

PrismJS - samkottler
http://prismjs.com/
Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind.
======
tikhonj
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
I have used Vim's similar feature, `:TOhtml`.

------
phoboslab
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
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
_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.

------
lukeholder
Others people might find useful:

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

I prefer

<http://pygments.appspot.com>

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

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

------
graue
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/>

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

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

~~~
devgutt
Unfortunately I haven't found any similar at
[http://vimcolorschemetest.googlecode.com/svn/html/index-
html...](http://vimcolorschemetest.googlecode.com/svn/html/index-html.html)

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

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

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

~~~
lukeholder
CodeMirror is a "full" syntax highlighted code editor.

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

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

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

