React Django の組み合わせで、Blog を作っております。
React 内で、Remarkble の コードハイライトに highlight.js を使用したのですが、背景色がつきませんでした。
背景色をつけるために実施したことを記載します。

背景色がつかなかった際の実装

Remarkable の REAMDE.md を参考に以下の通り、実装しました。
jonschlinkert/remarkable: Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins are also available.

var Remarkable = require('remarkable');
var hljs       = require('highlight.js') // https://highlightjs.org/

// Actual default values
var md = new Remarkable({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (err) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (err) {}

    return ''; // use external default escaping
  }
});

上記のみだと、シンタックスハイライトの背景色がつきません。

背景色をつけた実装

langPrefix: "hljs language-", を付与しところ、背景色がつくようになりました。 

var Remarkable = require('remarkable');
var hljs       = require('highlight.js') // https://highlightjs.org/

// Actual default values
var md = new Remarkable({
  langPrefix: "hljs language-",
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (err) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (err) {}

    return ''; // use external default escaping
  }
});

以下、Issue に上記の内容を付与する旨の記載がありました。
Is there no option to customize the code block tags? · Issue #131 · jonschlinkert/remarkable

テーマ CSS の適用

highlight.js のテーマを使うには、別途なんらかの方法で、CSS ファイルを読み込む必要があります。
一旦、HTMLの head タグ内に CDN のCSSファイルへのリンクを追加することでテーマ適用をしました。 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/agate.min.css">
highlight.js demo でどんなテーマが使用できるかは把握できます。

以上です。

コメント

カテゴリー

最近の投稿