A quick test of Prism.js

This post is more than 2 years old.

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>
Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Raymond Camden posted on 9/7/2013 at 7:43 PM

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.

Comment 2 by Randy Johnson posted on 9/7/2013 at 8:30 PM

I think the numbers are close enough to the line that you can keep them if you needed to refer to line numbers.

Comment 3 by Phil Leggetter posted on 9/7/2013 at 8:39 PM

Looks fine on mobile (Android Chrome)

Comment 4 by Adam Tuttle posted on 9/9/2013 at 4:56 AM

Told you so.

Comment 5 by Adam Tuttle posted on 9/9/2013 at 4:59 AM