PrismJS

#1

Post by samkottler » Tue, Jul 31, 2012, 6:52 AM UTC

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

PrismJS
prismjs.com

Re: PrismJS

#2

Post by drivebyacct2 » Tue, Jul 31, 2012, 7:37 AM UTC

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

Re: PrismJS

#3

Post by lukeholder » Tue, Jul 31, 2012, 7:43 AM UTC

Others people might find useful:

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

I prefer

http://pygments.appspot.com

Re: PrismJS

#4

Post by lukeholder » Tue, Jul 31, 2012, 7:44 AM UTC

drivebyacct2 wrote: post #2

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.

Re: PrismJS

#5

Post by Kartificial » Tue, Jul 31, 2012, 8:01 AM UTC

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

Re: PrismJS

#6

Post by gyaresu » Tue, Jul 31, 2012, 8:05 AM UTC

Not working in Opera 12.00 Build 1467 on OS X 10.7.4

Pretty in Chrome Canary Version 22.0.1221.0 though.

Re: PrismJS

#7

Post by nodesocket » Tue, Jul 31, 2012, 8:10 AM UTC

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

Re: PrismJS

#8

Post by peteretep » Tue, Jul 31, 2012, 8:37 AM UTC

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

Re: PrismJS

#9

Post by darklajid » Tue, Jul 31, 2012, 8:46 AM UTC

gyaresu wrote: post #6

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

Re: PrismJS

#10

Post by tikhonj » Tue, Jul 31, 2012, 8:47 AM UTC

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.