Twitter: raymondcamden


Address: Lafayette, LA, USA

A quick test of Prism.js

09-07-2013 6,740 views Misc 5 Comments

Sorry for the noise folks. This is really just a test post. But if you've never tried Prism before for code highlighting, I definitely recommend it. I'm using it over on JavaScript Cookbook and I've decided to start using it here as well.

I've went through a couple of different code highlighters over the past ten years. Most recently I've made use of Gists. I really liked the idea of offloading the code to another server, but when gists.github.com went down, it ended up completely breaking my blog posts. I certainly don't blame them (and they go down much less often than my own blog does), but I thought it might be nice to try something internal, simpler, and less prone to error.

Prism.js is the framework I'm going to use. Here is a real example.

<html>

<head>
<title>Foo</title>
</head>

<body>

<p>
Stuff
</p>

</body>
</html>

The only thing I need now is a quick way to escape HTML. Posting JavaScript won't be an issue but I need to escape my HTML examples. For what you saw above I used this app (Online HTML Escape Tool) but I am going to want something more direct. I'll probably use a bookmarklet or add something to my blog form.

Another example without line numbers.

<html>

<head>
<title>Foo</title>
</head>

<body>

<p>
Stuff
</p>

</body>
</html>

5 Comments

  • Commented on 09-07-2013 at 10:43 AM
    Hmpth, line numbers are a bit off. I had similar issues with Gists. I may just remove the line numbers. Going to edit the post and add a second example.
  • Randy Johnson #
    Commented on 09-07-2013 at 11:30 AM
    I think the numbers are close enough to the line that you can keep them if you needed to refer to line numbers.
  • Commented on 09-07-2013 at 11:39 AM
    Looks fine on mobile (Android Chrome)
  • Commented on 09-08-2013 at 7:56 PM
    Told you so.
  • Commented on 09-08-2013 at 7:59 PM
    http://fusiongrokker.com/post/bloggers-stop-outsou...

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty