Introducing Prism: An awesome new syntax highlighter

For the past three weeks, on and off, I’ve been working on releasing Dabblet’s syntax highlighter as standalone, since many people had requested it. Zachary Forrest  suggested the name “Prism” and I liked it so much I decided to go with it, even though there is an abandoned Mozilla project with the same name. I ended up refactoring and extending it so much that I will need to backport it to Dabblet one of these days! This doesn’t mean I bloated it, the core is still a tiny 1.5KB minified & gzipped. It just means it’s more awesome. :)

Seriously? The world needs another syntax highlighter?

In certain ways, Prism is better than any other syntax highlighter I’ve seen:

  • It’s tiny. The core is only 1.5KB minified & gzipped, which can go up to 2KB with the currently available language definitions (CSS, Markup and JS). But many other highlighters are also small, so read on.
  • It’s incredibly extensible. Not only it’s easy to add new languages (that’s a given with every syntax highlighter these days), but also to extend existing ones. Most importantly, it supports plugins, through hooks strategically placed in its source. There are a few plugins already available, and it’s really easy to write your own. I haven’t seen any other highlighter that supports plugins.
  • It encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the only semantically correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the code language is declared through the way recommended in the HTML5 draft: through a language-xxxx class.
  • One of its best features: The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors. Obviously, if you define a language on the <body> element, you’ve essentially declared a default language for the entire document.
  • It looks good. All three of its existing themes. Most people wanted me to release Dabblet’s highlighter because they found other highlighters (including their themes) quite ugly.
  • It supports parallelism through Web Workers, for better performance in certain cases.
  • It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.

However, there are some limitations too:

  • Pre-existing HTML in the code block will be stripped off. However, there are plugins for links and highlighting certain lines.
  • I decided not to support IE8. Prism won’t break on IE8, it just won’t work. I don’t think many people using IE8 and below are able to read code, so I don’t see the point.

Enjoy: prismjs.com

If you like this project, don’t forget to follow @prismjs on Twitter!

I’ll soon update this blog to use Prism in the code examples as well.

  • Anonymous

    Yes! Not so long ago I found myself struggling about this topic, particularly on static generated websites. I couln’t find a list for already supported languages, thought … to bad as it is one of the first questions that comes to mind about syntax highlighters :)

    • http://lea.verou.me/ Lea Verou

      Here’s a list http://prismjs.com/download.html
      But good point, there needs to be a proper list somewhere.

      • Anonymous

        While I’m on this topic, if I want … let’s say, js highlight inside markup, would it be better to write a plugin or to extend markup ?

        sorry I’m being silly. a quick test drive answered my question.

  • keriati

    Looks great, and i love this part: “I decided not to support IE8. Prism won’t break on IE8, it just won’t work. I don’t think many people using IE8 and below are able to read code, so I don’t see the point.”

  • http://twitter.com/AndyPasztirak Andy Pasztirak

    Oh, this is fantastic, going to have to try it today!

  • http://twitter.com/haribangsa Bangun

    Nice! I love that dark theme because it’s looks neat.
    Is it possible for us to add the new own theme inside prism?

    Btw, congrats for your new tools!

    • http://lea.verou.me/ Lea Verou

      Of course it’s possible to make a new theme! You can use prism.css as a template, and customize it.

  • Aaron Allport

    Great work! This is really useful, but I have to say I don’t agree with the comment “I don’t think many people using IE8 and below are able to read code, so I don’t see the point.” Some people don’t have a choice of what browser they use (restricted corporate machines come to mind as an example). I’d put your justification down to the fact that IE8 and below simply don’t provide the standards support necessary to facilitate this tool :-) I am however going to be adding this to my tool kit for use going forward. Thank you!

    • http://twitter.com/jelmerdemaat Jelmer de Maat

      Of course the question remains whether you want to serve those who are “so far behind” that they stick with web development in IE8. As a company that (also) does webdev it would be very strange to force your employees to use outdated technologies such as IE8.

      • Aaron Allport

        It was more the point on people not being able to read code because of the browser they use. I don’t for one minute expect a decent web dev to be using outdated browsers for development work (only in testing that a design doesn’t break and those users get a functional but lesser experience, not as enhanced as those using more modern browsers). Apologies if that came across wrong!

  • Anonymous

    Very nice highlighter, but are you going to be releasing the code-editor parts too? I’m very interested to see how you tamed contenteditable.

    • Anonymous

      Nevermind, I see dabblet’s code is also opensource. Reading through editor.js now.

  • Frank Bültge

    Hi Lea,
    thanks for share your ideas and work.

    Where to you see the defference from your roject prism to highlight.js, an js lib for highlight, there I use very often and works fine. Use also plugins and different styles via css. see: http://softwaremaniacs.org/soft/highlight/en/
    The project ist maintained on github, mayn languages, styles and plugins.

    I hope, I can see the difference for the decison on my and other different projects.
    Thanks!

    • http://lea.verou.me/ Lea Verou

      The “plugins” listed on the highlight.js website are plugins that add highlight.js to other systems, not plugins in the sense that they modify its functionality. Also, check the full list of Prism’s features here: http://prismjs.com/#features-full
      Of course, if highlight.js does all you need, I don’t see why you should change. If Prism didn’t exist, highlight.js would probably be my choice too. :)

      • Frank Bültge

        Thanks for fast reply – than is the part on my side and i will see for the difference and the benefits.
        One of the beneft is the API and support of node.js.
        Current I see also not the plugins, but I used before for lines etc.

  • Niaatan

    Wow, very interesting !
    I’ve noticed 2 little things :
    • You use [wW] instead of a dot, is it for performances ?
    • And also you use “r?n” sometimes and “rn” somewhere else, is there a reason?

    (I apologize for my english level, froggies can’t speak :p)

    • http://lea.verou.me/ Lea Verou

      Your English is fine.

      1. The dot won’t match newlines, so I only use it in single line tokens.
      2. Nope, no reason. It should be r?n everywhere.

      • Niaatan

        I’ve learned something, thanks :)

  • Harry Mavidis

    Very nice Lea! I’ll give it a try!

  • Pingback: PHP Syntax Highlighting For Prism | Aaha Creative: Web Developer

  • Aaron Dowden

    I started a PHP syntax highlighting script so I can do a bit of testing. You can find it: http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/

    Overall, Prism looks really good.

  • Pingback: Prism: An awesome new syntax highlighter | Lea Verou « Andrew Scripts

  • David Higgins

    Could you create a bookmarklet for this?

    I already tried using this:

    http://iwantaneff.in/bin/view/5c624daf

    I would like for the URL http://prismjs.com/style.css

    To be highlighted with Prism.js

    This could be done by wrapping the CSS in a <code> tag.

    Now to put Utopia.js out there and create
    docs for it. Oh wait, I already did that ;)
    http://davidhiggins.me/utopia/

    • http://lea.verou.me/ Lea Verou

      Hi David,
      I’m already planning on doing that ;)

  • Pingback: Prism: Beautiful Code Highlighting for the Web - Gadsit Buzz

  • Pingback: » Seen on Mars #1 Blue Sky On Mars

  • Pingback: Prism: Beautiful Code Highlighting for the Web | freecsswebsitetemplates.com

  • Beben Koben

    good :D

  • http://dan.cx/ Daniel15

    Great, nice work! I’m definitely going to try it out.

  • Pingback: Syntax Highlighting mit Prism | kulturbanause blog

  • Pingback: Prism:轻量级的 Javascript 代码高亮库@爱水煮鱼 | seo博客大全

  • Mark Goldberg

    Prisim is already well established in the software world
    http://lmgtfy.com/?q=prisim+wpf
    shows just under 700,000 hits

    • http://lea.verou.me/ Lea Verou

      Well, I’m glad the software world does not start and end with WPF. Do you have anything of real value to add or is it just another “well actually”?

  • Gábor Zsótér

    Great work! I could not find any js highlight example without external source. Can you show me how can I do that? Or its not possible with prism? Thanks :)

  • vv

    i am confused… but it don`t work. if used locally, and trying to highlight HTML code – it dont convert first tag symbol “<" to "&gt". and result is nothing too

  • vv

    & lt, of couse

  • daisopa

    support php or other languages?

  • Pingback: Prism Impresionante Script para Resaltar tu Sintaxis | Código Adicto

  • Mattia

    ” I don’t think many people using IE8 and below are able to read code, so I don’t see the point….”

    TRU-TU-TUM-PA’ (drums)…. ;)))

  • thohan

    Has anyone tried using this in conjunction with, say, ckeditor, so the source view displays all colorful and such? Or is this my next homework assignment?

    • https://openid.stackexchange.com/user/52aa217a-a088-4464-8b4f-d539a3678b36 Gaelan

      There is an editor called ACE that will edit code. I’m not sure if there is one that uses Prism, however.

      • thohan

        I’ll check ACE out, thanks!

        • Dor Fire

          Also check out CodeMirror

  • Tom

    Nice!!! I will try to write a plugin for Ruby on Rails and PHP

  • Mark Torres

    It’s also great to hear that the module creation documentation is about to get some updates. Hopefully it will help the community to create more modules in the future

  • Chris

    Very cool. When are the known issues going to be fixed?

    • http://lea.verou.me/ Lea Verou

      Whenever I have an epiphany or someone sends a good pull request that fixes them.

  • Dor Fire

    Hey, just wanted to thank you for releasing this. I really appreciate the interface for defining languages – the tokenizer makes it a breeze to replace certain parts with HTML. Hope I can someday release the intranet application I’ve used Prism for…
    Keep it up!

  • Robert Alan Yeatts Jr.

    Great Work on discovering this new syntax highlighter! It looks like it will be an improvement!

  • Dabby

    Prism is fantastic, Lea, exactly what I was looking for. Using the structure works perfectly but I can't seem to get the file highlighter plug-in to work. Seems pretty straightforward but I get nothing...not even an error...thoughts?

    • http://lea.verou.me/ Lea Verou

      Maybe you’re trying it locally? Many browsers disable local XHR by default.

      • Dabby

        Ah, I think I figured it out:
        1. needed to add “” above the “” tag
        2. I couldn’t actually find the plug-in code in the .js file so I copied and pasted it into a new file and called it in the “”

        Thanks!

  • Pingback: Prism 是一款轻量级可扩展的代码语法高亮库 – 互动殿堂