Code not highlighting with renderingConfig

[sportanova]

Describe your question Code highlighting doesn't seem to be working. The rendered result looks the same with or without the renderingConfig. But if I call hljs.highlightBlock(block) I get the expected result once, but after toggling preview on and off it will revert back to the unformatted code block.

Is there something else that needs to be set?

I have a jsfiddle https://jsfiddle.net/c65jdpzm/10/ of the following code:

$(function() {
  var easyMDE = new EasyMDE({
    element: $("#editor")[0],
    renderingConfig: {
      codeSyntaxHighlighting: true
    },
    initialValue: "```function doSomething() {}```"
  });
  
  easyMDE.togglePreview();
  
  document.querySelectorAll('code').forEach((block) => {
    // will work once when the next line is uncommented
    // hljs.highlightBlock(block);
  });
});

[KingDarBoja]

Same issue that I posted on Highlight GitHub repo as I had no idea this is being caused by EasyMDE itself.

This is something that should be addressed as it doesn't seem to work on plain JS.

[farzindev]

@sportanova

When the ``` characters are in one line, the Editor thinks this is an inline code, not a block of code.

I saw your jsfiddle, it's already working. but the content is wrong. and CSS styles are not good, so you may want to use other themes for that. or add your styles.

In our project (Blogifier) we use EasyMDE and I wrote custom styles for the Syntax Highlighter.

You can see it on our demo: https://demo.blogifier.net/admin/

username: [email protected] password: admin