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">
以上です。
コメント