{"id":3063,"date":"2013-12-16T16:01:22","date_gmt":"2013-12-16T22:01:22","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3063"},"modified":"2014-03-03T20:34:11","modified_gmt":"2014-03-04T02:34:11","slug":"simple-syntax-highlighting-editor-with-prism","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/12\/16\/simple-syntax-highlighting-editor-with-prism\/","title":{"rendered":"Simple syntax-highlighting editor with Prism"},"content":{"rendered":"Prism<\/a> is a great Javascript syntax highlighter, and it's fast enough to be used on the fly for active editing; Lea Verou (the author) does this with Dabblet<\/a>. Combined with bililiteRange<\/code><\/a> to handle some of the subtleties of dealing with contenteditable<\/code> elements, a syntax-highlighting editor is relatively easy.<\/p>\r\n

Simplest usage: bililiteRange.fancyText(element, Prism.highlightelement);<\/code>.<\/p>\r\n

See the demo<\/a>.<\/p>\r\n

See the code on github<\/a>.<\/p>\r\n

There's a fair amount of flakiness; contenteditable<\/code> elements are still handled inconsistently. Newlines are changed into actual elements (Firefox adds <br><\/code>s; Chrome adds a whole new <div><\/code>), even though a <pre><\/code> doesn't need that; it would interpret newlines the way we want. So we have to intercept those and just insert the newline. Firefox insists on changing newlines into <br><\/code>'s even in pasted text, and Chrome's clipboard implementation includes the carriage return character, so we have to intercept paste events and insert the text appropriately mangled.<\/p>\r\n\r\n

Usage<\/h3>\r\n
bililiteRange.fancyText(pre-element,[highlighter]);<\/code><\/pre>\r\n
sets up pre-element<\/code> to be an editor; meaning that it listens for input<\/code> events and re-highlights the code each time. The element can be any element, though only <pre><\/code> elements are targeted by the Prism CSS, and if you are writing code, whitespace is presumably important. So using <pre><\/code> makes the most sense. In order to allow editing, it should have contenteditable<\/code> set, though that is not enforced.<\/p>\r\n
highlighter<\/code> is a function highlighter(pre-element)<\/code> that does something<\/em> to the element that leaves its underlying text unchanged; intended to be Prism.highlightelement<\/code>. If undefined<\/code>, just sets up the keydown<\/code> and paste<\/code> event listeners as above without doing anything else.<\/p>\r\n\r\n
var editor = bililiteRange.fancyText(textarea,[highlighter]);<\/code><\/pre>\r\n
Replaces textarea<\/code> with a <pre><\/code>, calls Prism.editor<\/code> on that, and returns it. The original textarea<\/code> is deleted.<\/p>\r\n
var editor = bililiteRange.fancyText(pre-element, highlighter, threshold);<\/code><\/pre>\r\n
Even though Prism is fast, highlighting large texts with every keystroke can be slow. threshold<\/code> is the number of milliseconds to \"debounce\" the input<\/code> events; highlighting will only be done after that many milliseconds without any input.<\/p>\r\n\r\n
Notes<\/h3>\r\n
Originally I had this with the Prism highlighter hard-wired in, as a Prism plugin. I realized that most of the code has nothing to do with Prism per se, so I could use dependency injection to make this a general-purpose highlighting editor; for instance, use<\/p>\r\n
bililiteRange.fancyText(el, function(el){\r\n  el.innerHTML = '<span class=line>'+el.innerHTML.split('\\n').join('<\/span>\\n<span class=line>')+'<\/span>';\r\n});<\/code><\/pre>\r\n
to add  Elements\">line numbers<\/a> with CSS.<\/p>\r\n\r\n
Edited 2013-12-26:<\/strong> Prism requires an editable <pre><\/code> or other element, not a <textarea><\/code>. But that creates problems with progressive enhancement; I'd like my form to work without Javascript and <pre><\/code>'s don't get submitted. So ideally, the original HTML should have a <textarea><\/code> and the Javascript should replace it with a <pre contenteditable><\/code>. In that case, clearly the Javascript is working and you can get the text out of the editor to add it to the submitted form.<\/p>\r\n
Prism.editor<\/code> now does that. If the input element is a <textarea><\/code>, it replaces it with a <pre contenteditable><\/code> that has the same attributes (including id<\/code>) and returns the new element.<\/p>\r\n\r\n
Edited 2013-12-17:<\/strong> added threshold<\/code> parameter.<\/p>","protected":false},"excerpt":{"rendered":"Prism is a great Javascript syntax highlighter, and it's fast enough to be used on the fly for active editing; Lea Verou (the author) does this with Dabblet. Combined with bililiteRange to handle some of the subtleties of dealing with contenteditable elements, a syntax-highlighting editor is relatively easy. Simplest usage: bililiteRange.fancyText(element, Prism.highlightelement);. See the demo. […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3063"}],"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=3063"}],"version-history":[{"count":22,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3063\/revisions"}],"predecessor-version":[{"id":3303,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3063\/revisions\/3303"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}