Simplemde-markdown-editor: code highlighting?

[samayo]

Is there any easier way to allow code in the textarea? Do you guys have any plans for this? It would be cool to have this feature like http://codemirror.net/

[WesCossick]

See the codeSyntaxHighlighting option

[samayo]

@WesCossick I am not JS savvy, but when I added all the option from the README, entire code is not working. Due to this

 },
    previewRender: function(plainText, preview) { // Async method
        setTimeout(function(){
            preview.innerHTML = customMarkdownParser(plainText);
        }, 250);

        return "Loading...";
    }
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
    },

seems there is a comma left in

     return "Loading...";
    }
    renderingConfig: {

[WesCossick]

I've fixed the missing comma in the development branch. Regardless, all you need is the following option:

renderingConfig: {
    codeSyntaxHighlighting: true,
},

But for that option to work, you'll need highlight.js included on the page. See the documentation for more info.

[samayo]

Yeah, it is working albeit with highlight.js only as a syntax highlighter. prism.js is much supperior imho, if it is possible to integrate it, please let me know

[WesCossick]

From what I can tell, prism.js highlights code that already exists on the page. highlight.js allows you to pass in HTML and get formatted HTML returned.

[dorianamouroux]

Here is how I integrated Prism with SimpleMDE

            previewRender: function(plainText, preview) {
                setTimeout(function() {
                    preview.innerHTML = this.parent.markdown(plainText);
                    Prism.highlightAll();
                }.bind(this), 1)
                return "Loading..."
            },

[martinwojtus]

If you want to see highlighted code also in editor (not only on preview) you must add some css classes (from codemirror.css):

.cm-keyword {color: #708;}
.cm-atom {color: #219;}
.cm-number {color: #164;}
.cm-def {color: #00f;}... etc

and in your editor you must specified the language of your code block, for ex:

let a = 'test';
() => console.log('test');
class A {
}

Ok, it is hard to show this in github, because this editor is also using markdown, so go and check this link: https://codemirror.net/mode/gfm

[Kaleidosko]

Hello everyone,

I'd love to see syntax highlighting in edit mode (like martinwojtus mentioned). But I do not understand how to extend simpleMDE to the GFM mode :(

I'd like to highlight code blocks of js and php code.

Greetings

[EryouHao]

@martinwojtus Can you show me a demo, It's not work for me

[ivictbor]

@Kaleidosko @EryouHao working demo and code is here: https://hinty.io/ivictbor/editor-code-syntax-highlighting-in-easymde-ex-simplemde/