Syntax highlighting

[bootstraponline]

Ace provides syntax highlighting for markdown. It'd be nice to have a similar level of syntax highlighting for markdown in EpicEditor.

[OscarGodson]

We most likely wont do syntax highlighting out of the box simply for the fact it's specific to people who write code which is a small percentage of the population.

However, since I do write code ;) I want it and @johnmdonahue and I have had this planned for awhile but as an EpicEditor package/plugin. Once we get packages done this will probably be one of the first ones we do. I marked it as an extension so it's on the list officially.

[bootstraponline]

I'm not asking for general purpose programming language syntax highlighting (although that would be nice). What I meant is syntax highlighting for Markdown.

Here's an example of Ace's markdown syntax highlighting. Type in some markdown and compare it to what happens when you enter markdown into Epic Editor.

Syntax highlighting markdown helps everyone writing markdown, not just developers.

[OscarGodson]

See my comment here: https://github.com/OscarGodson/EpicEditor/issues/148

We are trying to decouple Markdown as the parser. We'll always have markdown as the default, but it should work out of the box with any kind of parser you need whether it's wiki, textile, HTML, etc.

So, it'll still be an extension and we're actually working on something like what Mou does which will work with all types of parsers:

Basically it formats based on what the output would be. So things that'd become bold are bold in the editor, for example.

[bootstraponline]

That sounds great.

[victorhooi]

Hi,

Was there any movement on this?

Is a syntax highlighting plugin still on the roadmap?

Cheers, Victor

[OscarGodson]

Yes: https://github.com/OscarGodson/EpicEditor/pull/188

I haven't been able to get to fully review all the code yet as I'm trying to finish up the current release, but after that's done I'll look more into the pull request and hopefully get it merged in.

In the meantime you could do it fairly easily by doing something like:

var editor = new EpicEditor(...).load(function () {
  var previewer = this.getElement('previewer');
  var scriptTag = previewer.createElement('script');
  scriptTag.src = 'prettify.js';
  previewer.body.addChild(codePrettifierScriptTag);
});
editor.on('preview', function () {
  prettyprint();
});

Or, something very similar. Let me know if you are going to do it this way and you need help.

[OscarGodson]

But, as of now, it's really hard to review all the pull request and do a bunch of feature work when there's serious bugs and I'm basically the only one working on it :(

[valx76]

Hi,

if this can help you, I got it to work with Google-code-prettify ! Here is my code (Updated and better version, some posts below.) :

var editor = new EpicEditor({
    // ...
}).load();

editor.on('preview', function() {
    var md_iframe = document.getElementsByTagName('iframe')[0];
    var md_iframe_document = md_iframe.contentDocument || md_iframe.contentWindow.document;

    var inner_iframe = md_iframe_document.getElementById('epiceditor-previewer-frame');
    var inner_iframe_document = inner_iframe.contentDocument || inner_iframe.contentWindow.document;


    // Add CSS Stylesheet
    var head = inner_iframe_document.getElementsByTagName('head')[0];
    var link = inner_iframe_document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'google-code-prettify/prettify.css';

    head.appendChild(link);


    var codeBlocks = inner_iframe_document.getElementsByTagName('code');

    for (var i = 0; i < codeBlocks.length; i++)
        codeBlocks[i].className += ' prettyprint';

    prettyPrint(null, inner_iframe_document);
});

NOTE : It works well (tested with default configuration for EpicEditor & Google-code-prettify) :smile:

[OscarGodson]

@valx76 you're doing a lot of extra work EpicEditor can do for you :) see my comment above with the code sample

[valx76]

@OscarGodson I already tried your code but I didn't got it to work..

What I've done with it, is to include the script tag in the previewer iframe. Btw, in the editor.on('preview', function() { ... });, I can't use the prettyPrint() function because it's imported in the iframe and not the "global" document..

So, I'm importing the script in the global document too, and the function does not return any error. BUT, the <code> elements does not have the "prettyprint" class so the function does nothing..

[OscarGodson]

No, I'm talking about the getElement method and stuff to gather the elements you need. It handles all the cross browser stuff and if we ever change the DOM down the road the method will also be updated.

[valx76]

Right, thank you very much, better with your functions !!

So, if someone wants the code :

var previewer;

var editor = new EpicEditor({
    // ...
}).load(function() {
    previewer = this.getElement('previewer');

    // Prettify JS
    var scriptTag = previewer.createElement('script');
    scriptTag.src = 'google-code-prettify/prettify.js';

    // Prettify CSS
    var cssTag = previewer.createElement('link');
    cssTag.rel = 'stylesheet';
    cssTag.type = 'text/css';
    cssTag.href = 'google-code-prettify/prettify.css';

    // Add JS / CSS
    previewer.body.appendChild(scriptTag);
    previewer.head.appendChild(cssTag);
});

editor.on('preview', function() {
    // Add necessary classes to <code> elements
    var previewerBody = previewer.body;
    var codeBlocks = previewerBody.getElementsByTagName('code');

    for (var i = 0; i < codeBlocks.length; i++)
        codeBlocks[i].className += ' prettyprint';

    prettyPrint(null, previewerBody);
});

[OscarGodson]

Looks good! You should put it in the "tips and tricks" wiki page.

One small thing you could do is cache the previewer on load to save on lookup times, like:

var previewer;
var editor = new EpicEditor({
    // ...
}).load(function() {
    previewer = this.getElement('previewer');
//...
});
editor.on('preview', function() {
    // Add necessary classes to <code> elements
    previewer.body;
    // ...
});

[valx76]

Done, I modified the script below and linked the wiki to it :)

[vagari]

D'oh! I was reading through this thinking the later comments would work around the lack of styling in the editor itself only to realize @valx76's code simply adds Google Prettify to code blocks in the preview. I've been trying to come up with a solution to use within a CMS and the closest I've found so far is CodeMirror but it's a bit bloated and the wrappers for styling are a pain to reference outside the basics. I see that adding this down the road is planned but I imagine it'll take quite a while before it's implemented. Back to the drawing board...

For future reference, when this is implemented, the issue I'm referencing is that in CodeMirror each line is parsed and flagged items are wrapped individually in spans and then classes are added. Something like:

<pre>
    <span class="cm-header cm-header2">## This is a header</span> 
    <span class="cm-link cm-header cm-header2">[with a link]</span> 
    <span class="cm-string">(http://)</span> 
    <span class="cm-header cm-header2">in the middle</span>
</pre>

Wouldn't it make more sense to do something similar to proper HTML?

<pre>
    <span class="cm-header cm-header2">## This is a header 
    <span class="cm-link">[with a link] <span class="cm-string">(http://)</span></span> 
    in the middle</span>
</pre>

I'm actually not sure why the brackets of the link and the URL are broken apart separately... Especially when the URL has no cm-header declaration in it.

As I said, this is more for future reference. I'll have to keep looking or make do for now. Thanks!

[OscarGodson]

So, are you looking for coloring code blocks in preview or markdown in the editor? I think you're talking about another ticket: https://github.com/OscarGodson/EpicEditor/issues/14

The above ticket talks about coloring the markdown as you write it like Mou.

[vagari]

Markdown in the Editor. It sounded like the earlier comments were discussing something similar (color coding in the editor, and styling in the editor are not mutually exclusive). I thought this and #14 were similar. I guess I can migrate the information over there for posterity. Sorry for the mix-up.