Has anyone found a way to handle code well in WYSIHTML5?

Question

I use WYSIHTML5 Bootstrap ( http://jhollingworth.github.com/bootstrap-wysihtml5 ) based on WYSIHTML5 ( https://github.com/xing/wysihtml5 ), which is absolutely fantastic when clearing HTML when copying from websites.

I would like to be able to process the code in an editor and then highlight the syntax using HighlightJS.

I created a new button and replicated the method used in wysihtml5.js to turn bold <b> on and off, instead using <pre> :

 (function(wysihtml5) { var undef; wysihtml5.commands.pre = { exec: function(composer, command) { return wysihtml5.commands.formatInline.exec(composer, command, "pre"); }, state: function(composer, command, color) { return wysihtml5.commands.formatInline.state(composer, command, "pre"); }, value: function() { return undef; } }; })(wysihtml5) 

But this is not enough. The editor hides tags when editing. I need to be able to wrap my content in both <pre> and <code> i.e. <pre><code></code></pre> .

This means writing a different function than the one used by wysihtml5, and I don't know how ... Can anyone help me with this?

Here is the code for the formatInline function in wysihtml5:

  wysihtml5.commands.formatInline = { exec: function(composer, command, tagName, className, classRegExp) { var range = composer.selection.getRange(); if (!range) { return false; } _getApplier(tagName, className, classRegExp).toggleRange(range); composer.selection.setSelection(range); }, state: function(composer, command, tagName, className, classRegExp) { var doc = composer.doc, aliasTagName = ALIAS_MAPPING[tagName] || tagName, range; // Check whether the document contains a node with the desired tagName if (!wysihtml5.dom.hasElementWithTagName(doc, tagName) && !wysihtml5.dom.hasElementWithTagName(doc, aliasTagName)) { return false; } // Check whether the document contains a node with the desired className if (className && !wysihtml5.dom.hasElementWithClassName(doc, className)) { return false; } range = composer.selection.getRange(); if (!range) { return false; } return _getApplier(tagName, className, classRegExp).isAppliedToRange(range); }, value: function() { return undef; } }; })(wysihtml5); 

Answer 1

Got a response from Christopher, wysihtml5 developer:

 wysihtml5.commands.formatCode = function() { exec: function(composer) { var pre = this.state(composer); if (pre) { // caret is already within a <pre><code>...</code></pre> composer.selection.executeAndRestore(function() { var code = pre.querySelector("code"); wysihtml5.dom.replaceWithChildNodes(pre); if (code) { wysihtml5.dom.replaceWithChildNodes(pre); } }); } else { // Wrap in <pre><code>...</code></pre> var range = composer.selection.getRange(), selectedNodes = range.extractContents(), pre = composer.doc.createElement("pre"), code = composer.doc.createElement("code"); pre.appendChild(code); code.appendChild(selectedNodes); range.insertNode(pre); composer.selection.selectNode(pre); } }, state: function(composer) { var selectedNode = composer.selection.getSelectedNode(); return wysihtml5.dom.getParentElement(selectedNode, { nodeName: "CODE" }) && wysihtml5.dom.getParentElement(selectedNode, { nodeName: "PRE" }); } }; 

... and add this to your toolbar:

 <a data-wysihtml5-command="formatCode">highlight code</a> 

Thanks a lot to Christopher!

Answer 2

I fork today bootstrap-wysihtml5 project and add code highlighting support using Highlight.js.

You can check out the demo at http://evereq.github.com/bootstrap-wysihtml5 and view the source code https://github.com/evereq/bootstrap-wysihtml5 . This is basically almost the same code as Christopher, along with changes to the user interface and the built-in boot version of the editor itself.