
Highlight.js – Syntax highlighting for the Web - tilt
https://highlightjs.org/
======
rlx0x
It should be mentioned that this does not support and will indeed never
support line numbers due to some strange opinions of the lead developer:

[http://highlightjs.readthedocs.org/en/latest/line-
numbers.ht...](http://highlightjs.readthedocs.org/en/latest/line-numbers.html)

~~~
pothibo
[http://prismjs.com/](http://prismjs.com/) is an alternative that supports
line numbers.

~~~
luddypants
And in particular prismjs lets you select lines of code without selecting the
line numbers, which you probably do not want.

~~~
codexon
Why wouldn't I want that?

If I am copying and pasting code from a website, it usually goes to my editor
and I don't want to have to delete the line numbers from it.

~~~
d0vs
You don't want the line numbers.

~~~
codexon
Oh if that's what he meant then I read it the wrong way.

------
chromakode
This is my favorite syntax highlighting JS library, by far.

The approach this library takes to building the highlighted DOM tree is very
clever. It represents the original DOM and the highlighted code output as
separate streams of tag open / close events and then merges them together.
This allows the highlighter to maintain the pre-existing DOM structure of the
highlighted code! The language auto-detection and sub-language handling are
also very neat.

If you like interesting codebases, I'd recommend giving it a quick read. :)

~~~
ioquatix
Sounds exactly like what I implemented 4 years ago.

Here is where you extract the existing HTML tags:
[https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d7...](https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.core.js#L1118-L1119)

When you brush the code (extract highlighing information) you provide the set
of initial matches which are converted into a tree:
[https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d7...](https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.core.js#L1088)
\- there is no merge step, they are merged in place in the tree which is then
used to generate DOM (or whatever you like really) output.

I never implemented language auto-detection but I'm sure I've seen that
implemented before prism before, perhaps Google's Prettify might have been one
of the first to do it. It basically highlights using all available brushes and
looks at which one matches the most tokens - not sure if this is how it is
currently implemented though. My feeling is that you usually know what
language you are highlighting, the auto-highlighter wouldn't always get it
right, and the cost of loading all brushes/languages is pretty high (imagine
for example you have 100 different languages supported, you'd have to do all
of them)..

The sub-language handling in jQuery.Syntax is as precise as possible:
[https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d7...](https://github.com/ioquatix/jquery-
syntax/blob/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.brush.html.js#L14-L17)

Basically, if you match some sub-portion of the code, you then highlight that
using a different brush. Sometimes it's almost impossible to know though (e.g.
diffs which may be incomplete).

------
accatyyc
In my opinion it's irresponsible to use highlighters like these. At least when
you use them like advertised. Why does no one bat an eyelid at letting the
clients handle the highlighting?

The highlighting (lexing) could (and should) be done ONCE at the server.
Imagine some high traffic blogs with hundreds of millions of hits combined -
all these clients downloading the highlighting libs + lexers for 50 different
languages that will never be used on the blog anyway. The wasted energy here
is probably even measurable.

Cons when letting the clients handle syntax highlighting:

\- Much slower load times

\- Wasted energy

\- Can fail because of JS crashing

\- Noscript users won't get any highlighting (and your blog targets technical
users, right? They are more likely to use no script)

\- Slow mobile devices will have a harder time loading the site (or depending
on javascript engine - failing highlight)

\- (if no site optimization is made) the client will download lexers for
languages not used on the blog

Cons when the server do the lexing ONCE:

\- NOTHING

Note that this rant isn't targeted at Highlight.js. It's a good highlighter -
I use it myself at my blog. Except I use it on the server via a CGI script. It
took me no more than 2 minutes to set up.

~~~
WA
_Except I use it on the server via a CGI script. It took me no more than 2
minutes to set up._

How about you write a tutorial about this and submit it to HN? This is
probably a better way to make people adapt your approach than a rant, no
matter how valid your points are :)

~~~
accatyyc
That's a good idea! I should make a blog post about it. And maybe be less
ranty. ;)

------
civilian
At one point I got really into the idea of ASTs for languages. I've used
pygments, the python syntax highlighter, with the intention of parsing the
meaning of code.

These syntax highlighters are great but I think that underlie the lack of a
defined and accessible AST parse definition for most languages. Highlight.js
and others kind of just rely regexes--
[https://github.com/isagalaev/highlight.js/blob/master/src/la...](https://github.com/isagalaev/highlight.js/blob/master/src/languages/python.js)

It'd be great if we could parse through programming languages to get their
meaning. I want to get tuples back!

``` a = 23 ``` would give

(variable(name=a), assignedTo, number(23))

This does exist for some languages, but mostly compiled ones. But it would
make the syntax highlighting even more robust! Antlr is the best one around at
the moment. [http://www.antlr.org/](http://www.antlr.org/)

~~~
ioquatix
I believe CodeMirror does something like this. It uses restartable parsers (or
it used to) to make parsing fast while editing.

I experimented editing code using jQuery.Syntax. I used the match tree it
generated to figure out where to restart parsing and it was pretty fast, it
would only re-evaluate the current line in most cases.

~~~
cben
CodeMirror still uses the restartable parsers. But they produce a flat
sequence of styles, not a hierarchical AST. E.g. ` _foo_ _bar_ * baz _` in
markdown becomes <span class="cm-em">_foo </span><span class="cm-strong cm-
em"> __bar __< /span><span class="cm-em"> baz*</span>. Also, most parsers
reuse a small set of style names (that are covered by themes) without much
regard to semantic appropriateness. E.g. markdown lists cycle through
'variable-2', 'variable-3', 'keyword'.

------
sarciszewski
We use highlight.js at Resonant Core for our blog posts. After reading the
comments here, I'm considering forking it to support line numbers :)

~~~
ericHosick
It would be really helpful when presenting at Events.

A lot of events record the presenters screen and the presenter but expect the
presenter to stand in one spot so they don't need a cameraman.

So, it does not work very well to point at a screen when presenting.

~~~
sarciszewski
It _should_ be a trivial patch. I'll see about getting it done tonight.

~~~
Gigablah
Famous last words ;)

------
greggman
Anyone know of one of these that supports some kind of callouts?

Basically I want to be able to annotate groups of 1 or more lines, something
like this, probably using some kind of inline comment

[http://reference.bitreactive.com/reference/images/tutorial/s...](http://reference.bitreactive.com/reference/images/tutorial/send_email_java_code_annotated.png)

~~~
ioquatix
jQuery.Syntax does support preserving the original DOM elements, so you could
do this.

------
lukevers
I've tried Highlight.js before and I was never really a big fan of it. It
seemed too heavy last time I tried it. I've been using rainbow.js for a year
or two now.

[http://craig.is/making/rainbows/](http://craig.is/making/rainbows/)

~~~
vonklaus
Rainbow doesn't seem to have line numbers. Is there another module available
that allows integration of lone numbers?

------
robbles
What's the recommended way of using something like this or prism.js to
highlight a simple textarea containing code?

I'm not talking a full-on programming editor, that's a much larger scope.
Rather, I have an admin tool with a <textarea> that allows entering short code
snippets, and it would be handy to see highlighting as you type. Even at this
low level of complexity, is it simpler to just embed something like Ace, or is
there an easy way to use a highlighting library?

~~~
SloopJon
Have you looked at CodeMirror? It might be a better fit for highlighting
editable text.

------
franzpeterstein
I like it, however, it is possible to make a "click all" checkbox for the
"other" languages. You now, I mean: "click, click, click, click ..." ;)

~~~
infogulch
Paste in console: $('input[type=checkbox]').prop('checked', true);

~~~
dstroot
You sir are brilliant!

------
adamkittelson
This isn't really related to the act of highlighting syntax, but I noticed the
example code for Elixir at
[https://highlightjs.org/static/demo/](https://highlightjs.org/static/demo/)
is quite out of date. Records generally aren't used anymore, and the syntax to
send a message to a process has changed from `pid <\- message` to `send(pid,
message)`

------
coolmitch
Used this in a project[0] a little while ago and found it really easy to work
with. The syntax detection was an added bonus that I had expected to need
another library for.

[http://cmdv.io](http://cmdv.io)

edit: I should mention that this might be a cool example for someone looking
to use hljs in React/Flux-- I tried to make it fairly clean. There's a github
link on the bottom-left of the website.

~~~
mmebane
Out of curiosity, are there any decent libraries you looked at for doing
language detection? Thhat's the main reason I'm using Highlight.js in one of
my projects instead of Prism or Rainbow.

Unfortunately, the tradeoff is no support for generating a display with line
numbers. In my case, that was the lesser of two evils, but I wouldn't mind
using two libraries if it meant I could get everything I want.

~~~
coolmitch
Just reading out of my notes, the only non-highlighting detector I was looking
at was [https://github.com/blakeembrey/node-language-
detect](https://github.com/blakeembrey/node-language-detect), but it's not
widely used or developed as far as i can tell.

If you have Ruby in your stack, it's easy -- use github's own
[https://github.com/github/linguist](https://github.com/github/linguist)

You might also be able to use just the language definition files from
[https://github.com/syntaxhighlighter](https://github.com/syntaxhighlighter)

------
tzm
Here's a hosted version of the HighlightJS developer tool:
[http://highlightjs-developer.appspot.com/](http://highlightjs-
developer.appspot.com/)

Planning to open source an http API (similar to
[http://markup.su/highlighter](http://markup.su/highlighter)).

------
esprehn
This is my favorite syntax highlighting library. The best feature is that it
returns a continuation of the code being highlighted which means you can
highlight code that's being streamed to you line by line. I couldn't find
another library that does that.

------
dougbarrett
I use this on my personal site, seen here:

[https://www.dougcodes.com/go-lang/building-a-web-
application...](https://www.dougcodes.com/go-lang/building-a-web-application-
with-martini-and-gorm-part-1)

Dead easy to implement, just set it and forget it.

------
adamkochanowicz
Is this news? I've been using this for quite a while.

~~~
jrvarela56
So, you using it seems like validation that this is a good contribution?

~~~
Kiro
It's like posting jQuery.

------
StavrosK
Why prefer this over something server-side, like Pygments, when you can use
the latter? I don't see many advantages to the client-side approach.

~~~
Confusion
You may have users actually writing 'code' on the client side. For those cases
a client-side solution gives a better experience that requires less code (no
roundtrip to server needed).

------
ausjke
Used this along with markdown to html conversion, works pretty well. will try
prismjs.com mentioned here, was unaware of that though.

------
smoyer
How does this compare with Prettify?

~~~
jongalloway2
I did a comparison of Syntax Highlighter, Prettify and Highlight.js for
weblogs.asp.net. I ended up preferring Highlight.js. My notes:

• SyntaxHighlighter

generates tons of nested tables, doesn’t work well with Bootstrap (overflows
into right rail)

• Google Prettify

Worked okay, but kind of ugly. Had to use jQuery to apply “prettyprint” class
to all pre elements.

• Highlight.js

Easy to set up, lots of themes, seems pretty quick, regular updates

Sample post: [http://weblogs.asp.net/jongalloway/looking-at-asp-net-
mvc-5-...](http://weblogs.asp.net/jongalloway/looking-at-asp-net-mvc-5-1-and-
web-api-2-1-part-4-web-api-help-pages-bson-and-global-error-handling)

Highlight.js + styles are hosted on cdnjs, which makes it easy to host on a
blog.

------
tomahunt
This looks really useful. I'm wondering if there is a way to get modern
fortran in the fold.

