The code highlighter in the post editor is rather more sophisticated than I’m used to seeing here on Discourse, and I was wondering what it is - a plugin of some sort? My blog is in need of something rather more capable than it currently has in it, so wondered whether what Discourse has might be usable there also. Does anyone know?
As far as I know, it is built in. But @James_Hibbard or @cpradio knows a lot more about Discourse than I do
I did wonder. It seems to work very nicely though from my limited exposure, hence the interest.
highlight.js (if I recall correctly). I believe Discourse limits the languages out of the box to a handful of common ones, but for the most part it isn’t modified by them.
1 Like
Wow, thank you. I’m implementing this on my website right now. I had to do a really complicated way before where I use & l t ; and do random <u> or <b> tags to highlight how I want (never bothered to get an actual script for this). Now I can just type and go!
Is it possible to have highlightjs recognize two languages in a codeblock? I put HTML and CSS togethr in my codeblocks and whatever language it recognizes first is what the rest is highlighted as.
Did you have any trouble getting it going Ryan? I threw together a quick test page to see how it behaved, but got no reaction out of it - finger trouble on my part no doubt.
This was my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Highlight.js Test</title>
<link rel="stylesheet" href="css/default.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
<nav>
<ul>
<li><a href="index.html" title="Joe's Pizza Co." class="active">Home</a></li>
<li><a href="about.html" title="Find out more about Joe's Pizza Co.">About</a></li>
<li><a href="news.html" title="Latest news about Joe's Pizza Co.">News</a></li>
<li><a href="menu.html" title="The restaurant menu for Joe's Pizza Co.">Menu</a></li>
<li><a href="locations.html" title="Joe's Pizza Co. restaurant locations">Locations</a></li>
<li><a href="bookings.html" title="Make a booking">Bookings</a></li>
</ul>
</nav>
</code></pre>
</body>
</html>
Now throw in CSS into that section (which I do to not force myself to have two code sections.)
I had to redo all my articles over the past couple hours to remove all <b></b><u></u><i></i> which took so long…SO LONG. However it was for the best.
Slight clarification - what I meant was that it didn’t do any syntax highlighting - it just treated the text between the pre/code tags as a normal unordered list.
Yeah I still have & l t; in place for now. I’m going to look into coding something that, before I submit to my database, throws all of that into htmlentities().
I’m only worrried right now about having two languages in there at once.
@chrisofarabia, I created a highlight.js example
https://github.com/cpradio/sitepoint-demos/tree/master/highlightjs
Thanks @cpradio, I’m in the office at the moment, but will take a look later once I’m home. I’ll let you know if I have any questions.
1 Like
OK. I uploaded that onto my server and it worked just fine, albeit it took a second or so to actually render from a list and into code. I’m now curious to know why that approach worked, rather than the one that the highlightjs.org outlines. What is it that your extra piece of JS script is doing that theirs didn’t?
Which implementation did you find on theirs, as I took mine from https://highlightjs.org/usage/
Are you talking about the configure call? I did that because I didn’t like the default tab spacing, so I reduced it to 2 spaces.
That’s where I took mine from too - just the three lines of bare minimum implementation they describe. The only difference was that I downloaded the JS/CSS files and stored them locally, before linking across to them. That’s probably what did it then.
Ah OK, that’s all there is to that then.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.