7 ms·
Highlight.js – Syntax highlighting for the Web
- franzpeterstein 12y agoI 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 12y agoPaste in console: $('input[type=checkbox]').prop('checked', true);
- franzpeterstein 12y agoyea! thx!
- dstroot 12y agoYou sir are brilliant!
- smoyer 12y agoHow does this compare with Prettify?
- jongalloway2 12y agoI 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-1-and-web-api-2-1-part-4-web-api-help-pages-bson-and-global-error-handling http://weblogs.asp.net/jongalloway/looking-at-asp-net-mvc-5-... Highlight.js + styles are hosted on cdnjs, which makes it easy to host on a blog.
- deleted 12y ago[deleted]
- picsiak 12y agoWhat about Prism.js?
- chromakode 12y agoThis 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 12y agoSounds exactly like what I implemented 4 years ago. Here is where you extract the existing HTML tags: https://github.com/ioquatix/jquery-syntax/blob/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.core.js#L1118-L1119 https://github.com/ioquatix/jquery-syntax/blob/97e38d08924d7... 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/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.core.js#L1088 https://github.com/ioquatix/jquery-syntax/blob/97e38d08924d7... - 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/97e38d08924d776713108ed392fe3e6701b9d2c8/source/jquery.syntax.brush.html.js#L14-L17 https://github.com/ioquatix/jquery-syntax/blob/97e38d08924d7... 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).
- rlx0x 12y agoIt 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.html http://highlightjs.readthedocs.org/en/latest/line-numbers.ht...
- jimmytucson 12y agoIs line numbers considered "highlighting"? I mean, I get why you would want it but I never would have thought to ask for it.
- lelandbatey 12y agoMany popular syntax highlighting libraries do include this functionality. For example, the popular Python syntax highlighter "Pygments" supports line numbers[0]. [0] - http://pygments.org/docs/formatters/#HtmlFormatter http://pygments.org/docs/formatters/#HtmlFormatter
- pelhage 12y agoI personally use Prism.js for my blogging, which is what Smashing Magazine and CSS-tricks uses. Prism includes line numbers. I like Prism so far and don't have any issues with it yet
- awhitty 12y agoIt does seem more appropriate to have a separate module for line numbers. I would definitely understand the separation of concerns argument, but the maintainer instead makes some sort of emotional appeal about clutter and simplicity to explain why there is no line number support.
- jnbiche 12y ago> the maintainer instead makes some sort of emotional appeal about clutter and simplicity to explain why there is no line number support Clutter and simplicity is not an emotional argument. It becomes verifiably more difficult to maintain a code base with each new line. And since he's the one doing the maintaining, his position seems quite reasonable. Secondly, he seems to have a strong aesthetic aversion to line numbers, and I can totally respect that. Frankly, among popular open source projects, those whose developers have the strongest sense of style and design and usually (not always) the best.
- sarciszewski 12y agoWe 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 12y agoIt 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 12y agoIt should be a trivial patch. I'll see about getting it done tonight.
- Gigablah 12y agoFamous last words ;)
- ioquatix 12y agojQuery.Syntax supports line numbers and is generally pretty awesome * * I'm the author so of course I'd say that :)
- adamkochanowicz 12y agoIs this news? I've been using this for quite a while.
- jrvarela56 12y agoSo, you using it seems like validation that this is a good contribution?
- Kiro 12y agoIt's like posting jQuery.
- coolmitch 12y agoUsed 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 12y agoOut 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 12y agoJust 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
- civilian 12y agoAt 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/languages/python.js https://github.com/isagalaev/highlight.js/blob/master/src/la... 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 12y agoI 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 12y agoCodeMirror 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'.
- tzm 12y agoHere'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).
- dougbarrett 12y agoI use this on my personal site, seen here: https://www.dougcodes.com/go-lang/building-a-web-application-with-martini-and-gorm-part-1 https://www.dougcodes.com/go-lang/building-a-web-application... Dead easy to implement, just set it and forget it.
- lukevers 12y agoI'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 12y agoRainbow doesn't seem to have line numbers. Is there another module available that allows integration of lone numbers?
- tomahunt 12y agoThis looks really useful. I'm wondering if there is a way to get modern fortran in the fold.
- ausjke 12y agoUsed this along with markdown to html conversion, works pretty well. will try prismjs.com mentioned here, was unaware of that though.
- adamkittelson 12y agoThis 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)`
- greggman 12y agoAnyone 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/send_email_java_code_annotated.png http://reference.bitreactive.com/reference/images/tutorial/s...
- ioquatix 12y agojQuery.Syntax does support preserving the original DOM elements, so you could do this.
- robbles 12y agoWhat'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 12y agoHave you looked at CodeMirror? It might be a better fit for highlighting editable text.
- StavrosK 12y agoWhy 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 12y agoYou 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).
- esprehn 12y agoThis 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.
- accatyyc 12y agoIn 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 12y agoExcept 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 12y agoThat's a good idea! I should make a blog post about it. And maybe be less ranty. ;)
- sneak 12y agoComputing is cheap. Setting up and maintaining that is more human seconds than doing it clientside. I dare you to calculate the amount of energy this wastes on a blog that gets a billion hits. This is a battle you cannot win and should not attempt to fight.
- 12y ago