PrismJS | Hacker News Reader

PrismJS

prismjs.com

103 pointssamkottler24 comments

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind.

Is there any particular advantage to using something like this for static code samples instead of just pre-rendering the HTML and CSS?

I usually just export my code from Emacs via M-x htmlfontify-buffer which dumps a bunch of CSS and HTML. This also allows me to take advantage of my different Emacs themes. It also outputs CSS with good class names like "string" or "keyword". If you add your own custom faces, it just uses the name you gave them. This means the coloring is exactly as customizable as it is in Emacs. It is also very easy to theme with CSS to match your site if you don't like any of the Emacs color themes.

I have used Vim's similar feature, `:TOhtml`.

If you want an even smaller (sans jQuery) JS highlighter that doesn't fail on edge cases, check my jQueryJSH: http://www.phoboslab.org/files/jquery-jsh/

github: https://github.com/phoboslab/jQuery-JSH

1) How do I know it doesn't fail on the same edge cases Prism might fail on? I see no tests.

2) Do you really need jQuery there? You seem to be using it only for the html method, and including 93K extra JS instead of just using innerHTML seems a bit overkill.

2) Do you really need jQuery there? You seem to be using it only for the html method, and including 93K extra JS instead of just using innerHTML seems a bit overkill.

It checks for the case that .innerHTML setting is not supported (I think that was for certain versions of IE) and switches to using appendChild(). I think that that small oversight is somewhat reasonable justification for using a wrapper that abstracts away the browser differences, although it can be argued that once someone understands the differences, they could just add the use cases to their code.

I am somewhat confused why you would trust tests for edge cases sufficiently strongly so as to distrust an implementation without any; edge cases should be proved from first principals, as you can't possible test all of them.

But smaller does not always mean better. Benchmarks have shown that parsers based exclusively on regular expressions can be even several times slower than parsers that use scanner/tokenizer.

The bigger regExps you write, the slower and more bug-prone your code will be.

Others people might find useful:

http://craig.is/making/rainbows (1.4kb) http://softwaremaniacs.org/soft/highlight/en/

I prefer

http://pygments.appspot.com

I don't think the author really understands IE usage patterns. The majority of IE6 usage isn't individuals who don't know better, its companies who should know better. Hence, you'll still get plenty of intelligent coders using IE.

Intelligent coders should know better than to be forced to work with IE6. What would be the server side technology in this case? JSP filled with code and SQL or ASP classic?

Um....no. Intelligent coders understand that there are always limitations placed on them and accept that to produce quality code, they need to understand their environment and code for the end user.

Not working in Opera 12.00 Build 1467 on OS X 10.7.4

Pretty in Chrome Canary Version 22.0.1221.0 though.

Neither working (and so far the only really bad rendering issue I've seen) on Android, using Firefox Beta.

The code snippets are overlayed with black 'blocks'.

I'm confused. In the features list: "Prism forces you to use the correct element for marking up code: <code>."

But the site's index.html is using only a pre tag:

  <p>The Prism source, highlighted with Prism (don’t you just love how meta this is?):</p>
  <pre data-src="prism.js"></pre>

It looks like the script is automatically expanding this, inserting <code> tags along with the named file, but I don't see any documentation for doing it this way.

Also, if anyone is as confused as I was about why there's a "data-src" attribute, apparently it's an HTML5 data attribute: http://ejohn.org/blog/html-5-data-attributes/

Lovely. Google code-prettyify (http://code.google.com/p/google-code-prettify/) is great as well, but Prism looks more aesthetically appealing. Would love to have additional languages `perl`, `python`, `ruby`.

someone please make a vim colorscheme that looks like the light scheme of prism. it is gorgeous

Ditto. I'd love this as a vim colorscheme.

Unfortunately I haven't found any similar at http://vimcolorschemetest.googlecode.com/svn/html/index-html...

For the "fails on certain edge cases" link, I'd have rather they'd linked to SelfGol (https://www.socialtext.net/perl5/selfgol)

The text-shadow in the dark theme needs a little getting used to but looks pretty nice in the end.

Can anyone compare this to CodeMirror which seems to include this functionality and much, much more?

CodeMirror is a "full" syntax highlighted code editor.

This is just a syntax highlighter for embedding code examples in your site/blog.

Right, but CodeMirror can be used as a simply syntax highlighter as well.

This one is around 2k in size, therefor "lightweight"

Reply on news.ycombinator.com