Bootstrap wysiwyg and syntax highlight

Question

I trying to make new function in Bootstrap wysiwyg editor for inserting source code for highlightjs, but without success.

On official page (github) I have found few sentences about customizing and execCommand, but I do not know how to implement.

Anybody for help?

EDIT: I successfully added button on toolbar like:

<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" title="insertCode"><i class="icon-code"></i>&nbsp;<i class="icon-angle-down icon-on-right"></i></a> 
<ul class="dropdown-menu dropdown-light"> 
    <li><a data-edit="insertCode c">C/C++</li>
    <li><a data-edit="insertCode php">PHP</li>
</ul>

And I try to edit bootstrap-wysiwyg.js file as:

(function(b) {
   var insertCode = function (language) {
       var preElem = document.createElement("pre"),
       var codeElem = document.createElement("code");
       codeElem.className = language;
   }
...
...

But I do not know how to complete this. But before that I cannot run this method.

EDIT 2:: I replaced my editor to summernote for now, because I do not know how to resolve this issue.

Answer 1

To add a button that will format the selection as code, you can add a link like this to the toolbar.

<a class="btn" data-edit="formatBlock pre" title="Code"><i class="icon-cog"></i></a>

However, I wasn't able to get this working with highlightjs. I'm not sure that highlightjs is capable of picking up new pre tags that aren't present when the highlighter is initialized. The other problem is that the button I provided wraps the code in a <pre> tag rather than a <pre><code> tag.

This might be enough to get you started though.