markedjs/marked-highlight

How to customize the generated pre

wallleap opened this issue · 2 comments

Take the following code as an example:

marked.parse('```javascript'+
'const highlight = "code";' +
'```');

// Now:
// <pre><code class="hljs language-javascript">
//   <span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
// </code></pre>


// I need:
// <pre class="hljs-code"><div class="pre-header"><span class="lang-info">javascript</span><svg aria-hidden="true" class="svg-icon icon-copy"><use xlink:href="#icon-copy" fill="currentColor"></use></svg></div><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;</code></pre>

renderer.code(code, infostring, escaped) and marked.use(markedHighlight()) will overwrite each other

I can't customize it in renderer.code(), hope to provide a good solution.

You should be able to override the code renderer if you add it after markedHighlight

marked.use(markedHighlight())
marked.use({
  renderer: {
    code() {
    ...
    }
  }
})

Thanks for your reply, now it works