phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

marked.js で変換したコードを highlight.js でハイライト表示する方法

4 years ago

ちゃんと hljs というクラスが付いた pre タグとして出力する方法です.

デモは Runstant で作ってあるのでコードを見たりイジったりできます. 色々と遊んでみてください♪

Code

marked の共通オプションでオリジナルの renderer を登録しています.

;(function() {
  var renderer = new marked.Renderer()
  renderer.code = function(code, language) {
    return '<pre'+'><code class="hljs">' + hljs.highlightAuto(code).value + '</code></pre>';
  };

  marked.setOptions({
    renderer: renderer,
  });
})();

Demo

Reference