{"id":1558,"date":"2011-01-28T00:09:49","date_gmt":"2011-01-28T06:09:49","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=1558"},"modified":"2012-08-05T21:29:01","modified_gmt":"2012-08-06T03:29:01","slug":"playing-with-syntax-highlighters","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2011\/01\/28\/playing-with-syntax-highlighters\/","title":{"rendered":"Playing with Syntax Highlighters"},"content":{"rendered":"<p>Update: I no longer (2012-08-05) use Chili, I've switched to <a href=\"http:\/\/prismjs.com\">Prism<\/a>.<\/p>\r\n<p>I wanted to try <a href=\"\/blog\/2011\/01\/13\/fixins-for-chili\/\">different syntax highlighters<\/a> so I wrote a little WordPress plugin that let me switch between different highlighters (<a href=\"mailto:d.wachss@prodigy.net\">email me<\/a> if you would like that code). I wanted syntax highlighters that were javascript-based (ruling out <a href=\"http:\/\/qbnz.com\/highlighter\/\">GeSHi<\/a>), and that allowed me to highlight inline <code>code<\/code> elements as well as <code>code<\/code> elements within block-level <code>pre<\/code> elements, using the <a href=\"http:\/\/www.w3.org\/TR\/html5\/text-level-semantics.html#the-code-element\">HTML5 <code>&lt;code class=\"language-whatever\"&gt;<\/code> notation<\/a> for determining language. I also wanted something that didn't do any fancy javascript or Flash for selection and copying, and either supported Lisp and Basic or was easy enough to extend.<\/p>\r\n<p>Everyone seems to use <a href=\"http:\/\/code.google.com\/p\/syntaxhighlighter\/\">Alex Gorbatchev's syntaxhighlighter<\/a> but it uses nonstandard name attributes and only works on <code>pre<\/code> and <code>textarea<\/code> elements, so I haven't tried that. I tried <a href=\"http:\/\/balupton.com\/projects\/jquery-syntaxhighlighter\">Benjamin Lupton's jQuery syntaxhighlighter<\/a> based on <a href=\"http:\/\/code.google.com\/p\/google-code-prettify\/\">Google's prettify<\/a>. It insisted on making all elements <code class=\"language-css\">display: block<\/code> but a little CSS manipulation fixed that.<\/p> <p>Then I tried <a href=\"http:\/\/www.steamdev.com\/snippet\/\">snippet<\/a>, which only works on <code>pre<\/code> elements but was easily modifiable to get around that, then also needed some stylesheet changes to keep the results from being <code class=\"language-css\">display: block<\/code>. Adding new languages however looks far too complicated; it uses <a href=\"http:\/\/shjs.sourceforge.net\/\">shjs<\/a> which uses language definitions from <a href=\"http:\/\/www.gnu.org\/software\/src-highlite\/\">GNU Source-highlight<\/a>, which is a whole different language.<\/p>\r\n<p><a href=\"http:\/\/jush.sourceforge.net\/\">jush<\/a> does things right (working on <code>code<\/code> elements and not forcing them to be block) but it's hardwired for a limited number of languages and the CSS is pretty ugly. That could be fixed, though, and it does a cool trick of turning keywords into links to the documentation. Too limited a language selection, though, but it would be a nice base for working on.<\/p>\r\n<p>In the end, I'm going to stick with <a href=\"http:\/\/noteslog.com\/chili\/\">chili<\/a>. It's simple enough for me to modify to suit my needs, it's easy to add new languages and it works. Creating new \"themes\" is impossible; the styles are hard-coded into the javascript files, but I can live with that. I may sometime write my own highlighter, but for now, I'll stick with what works.<\/p>","protected":false},"excerpt":{"rendered":"Update: I no longer (2012-08-05) use Chili, I've switched to Prism. I wanted to try different syntax highlighters so I wrote a little WordPress plugin that let me switch between different highlighters (email me if you would like that code). I wanted syntax highlighters that were javascript-based (ruling out GeSHi), and that allowed me to [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1558"}],"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=1558"}],"version-history":[{"count":10,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1558\/revisions"}],"predecessor-version":[{"id":2553,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1558\/revisions\/2553"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=1558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=1558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=1558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}