{"id":2551,"date":"2012-08-05T21:55:07","date_gmt":"2012-08-06T03:55:07","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2551"},"modified":"2012-08-20T13:48:06","modified_gmt":"2012-08-20T19:48:06","slug":"the-perfect-syntax-highlighterprism","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2012\/08\/05\/the-perfect-syntax-highlighterprism\/","title":{"rendered":"The Perfect Syntax Highlighter&mdash;<code>Prism<\/code>"},"content":{"rendered":"<p>I've been looking for a good <a href=\"\/blog\/2011\/01\/28\/playing-with-syntax-highlighters\/\" title=\"Playing with Syntax Highlighters\">Javascript-based syntax highlighter<\/a>, and it looks like <a href=\"http:\/\/prismjs.com\">Prism<\/a> is it. It fulfills just about all my criteria: works on code blocks whether inline or in block elements, is HTML5-friendly, uses classes on <code class=\"language-html\">span<\/code>s rather than hard-coded styles, and is easy to extend. It's what is running on the website now.<\/p>\r\n<p>But it's not actually perfect; it mucks about with class names more than I would like (though it isn't really a problem), and it uses a different name for HTML--<code>class=\"language-markup\"<\/code> rather than <code>class=\"language-html\"<\/code>. That is easy to fix; just do <code class=\"language-javascript\">Prism.languages.html = Prism.languages.markup<\/code> and you're done. The biggest downside (though not one that affects me in real life; it just seems inelegant) is that it flattens the text to analyze it (it uses <code class=\"language-javascript\">var code = element.textContent.trim();<\/code>. It ought to be possible to use <a href=\"\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\">my range routines<\/a> to wrap elements without flattening them.<\/p>\r\n<p>Be that as it may, it works well; see just about any post on the blog.<\/p>\r\n<h2>Plugins for other languages:<\/h2>\r\n<ul>\r\n<li><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism.php.js\">PHP<\/a>, based almost completely on Aaron Harun's <a href=\"http:\/\/aahacreative.com\/2012\/07\/31\/php-syntax-highlighting-prism\/\">code<\/a>.<\/li>\r\n<li><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism.pdf.js\">PDF<\/a><\/li>\r\n<li><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism.lisp.js\">Lisp\/Scheme<\/a><\/li>\r\n<li><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism.vb.js\">Visual Basic<\/a><\/li>\r\n<\/ul>\r\n<p>Plus I added a <code class=\"language-javascript\">Prism.languages.markup.jquery= \/\\$|jQuery\/<\/code> so I could mark it up separately.<\/p>","protected":false},"excerpt":{"rendered":"I've been looking for a good Javascript-based syntax highlighter, and it looks like Prism is it. It fulfills just about all my criteria: works on code blocks whether inline or in block elements, is HTML5-friendly, uses classes on spans rather than hard-coded styles, and is easy to extend. It's what is running on the website [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2551"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2551"}],"version-history":[{"count":11,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2551\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2551\/revisions\/2606"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}