PrismJS

http://prismjs.com/

by samkottler • 14 years ago

103 24 14 years ago

prismjs.com

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

drivebyacct22• 14 years ago

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

lukeholder2• 14 years ago

CodeMirror is a "full" syntax highlighted code editor.

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

drivebyacct22• 14 years ago

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

lukeholder2• 14 years ago

Others people might find useful:

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

I prefer

http://pygments.appspot.com

Kartificial• 14 years ago

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

gyaresu• 14 years ago

Not working in Opera 12.00 Build 1467 on OS X 10.7.4

Pretty in Chrome Canary Version 22.0.1221.0 though.

darklajid• 14 years ago

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'.

nodesocket• 14 years ago

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`.

peteretep• 14 years ago

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

tikhonj• 14 years ago

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.

jergason• 14 years ago

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

czzarr• 14 years ago

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

dytrivedi• 14 years ago

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

devgutt• 14 years ago

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

moomin• 14 years ago

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.

slig• 14 years ago

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?

countessa• 14 years ago

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.

phoboslab• 14 years ago

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

jacobr• 14 years ago

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.

Xurinos• 14 years ago

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.

saurik• 14 years ago

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.

jarek-foksa• 14 years ago

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.

graue• 14 years ago

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/

PrismJS

Related Stories