OscarGodson / EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.
http://epiceditor.com
MIT License
4.25k stars 335 forks source link

Issue with code highlighting using highlightjs #339

Open derberg opened 10 years ago

derberg commented 10 years ago

added usage for highlight.js

var editor = new EpicEditor(opts).load();
editor.on('update', function () {
document.querySelector('#epiceditor-preview').innerHTML = this.exportFile(null, 'html');
$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
}).emit('update');

almost all if fine except of "no-highlight" usage it just doesn't work because of the problem with one regex in epiceditor.js

I had to add/change the following to accept "-" as well:

block.gfm = merge({}, block.normal, {
  fences: /^ *(`{3,}|~{3,}) *(\w+|\w+\-\w+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
  paragraph: /^/
});

It is still some kind of workaround because epiceditor.js is adding languages reference in the following way: lang-no-highlight hljs css

correct generated class should be:

zethussuen commented 9 years ago

Should probably look into some of the async vs sync highlighting suggestions on https://github.com/chjj/marked#highlight

paulocheque commented 8 years ago

Is this fixed?

I tested with your code and it worked perfectly.

      editor.on('update', function () {
        document.querySelector('#epiceditor-preview').innerHTML = this.exportFile(null, 'html');
        $(document).ready(function() {
          $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
        });
      }).emit('update');