highlightjs-highlight-lines.js (+ highlightjs-highlight-filename.js)
Feb. 27, 2019, 6:43 a.m. edited May 31, 2020, 8:34 a.m.
You can do below. これができる
Star highlightjs-highlight-lines.js
Star highlightjs-highlight-filename.js
#include <stdio.h>
void print_text(char[] text) {
printf("%s\n", text);
}
int main() {
printf("hoge\n");
print_text("foobar");
return 0;
}
Description 説明
Syntax highlighting is great. The famous libraries for website are,
ブログでソースコードを貼り付けるときにシンタックスハイライトをつけると見栄えが良くなります。そのための便利なライブラリは
In this blog, I use highlight.js.
などが有名です。それぞれ色々な特徴がありますが、当ブログではhighlight.jsを用いています。
The usage is too simple, write
使い方は非常に簡単で、基本的には<head>内に
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
then, the all source codes inside <pre><code></code></pre> get to be highlighted.
と書くだけで、そのページにある<pre><code></code></pre>内のソースコードがすべてシンタックスハイライトされます。また、テーマも豊富にあり、デモページでそのスタイルの一覧を見ることができます。もっとも実際のCSSまでのパスはCDNから探すのが便利だと思います。
Emphasize lines 行を強調したい
We need emphasizing lines.
連載系のブログで前回の記事のプログラムからの差分を示すときなどに行を強調したいという需要があります。私も「PyO3とrust-numpyを使ってPythonからNumPyをRustに渡して操作する」という「PyO3でPythonからRustで作ったライブラリを呼ぶ」の続きの記事において、プログラムの書き加えた部分を示すためにいくつかの行を強調したくなりました。
However, highlight.js itself would not deal with it.
ゆえに調べてみるとissueが立っていましたが、highlight.js自体は対応するつもりはないとのことでした1。
So, I made the plugin for emphasizing lines for highlight.js. It is
そこで、highlight.jsで行を強調するためのプラグインを作りました。それが
highlightjs-highlight-lines.js
です。
Usage 使い方
Look at GitHub. :)
GitHubにも載せていますが一応。
<head>の本家highlight.jsを読み込んだ後に読み込みます。つまり、
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/TRSasasusu/highlightjs-highlight-lines.js@1.1.5/highlightjs-highlight-lines.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initHighlightLinesOnLoad([
[{start: 1, end: 3, color: '#555'}, {start: 6, end: 6, color: 'yellow'},], // ページにある最初の<pre><code></code></pre>の2行目から4行目を#555で強調し、7行目を黄色で強調する
[{start: 2, end: 3, color: 'rgba(255, 255, 255, 0.2)'},], // ページにある2番目の<pre><code></code></pre>の3行目から4行目をrgba(255, 255, 255, 0.2)で強調する
]);
</script>
という形です。説明は各行のコメントに書いてあります。強調されててわかりやすい！！
You can use this plugin with highlightjs-line-numbers.js.
また、行番号表示プラグインのhighlightjs-line-numbers.jsとも一緒に使うことができ、詳しくはGitHubを見てください。
highlightjs-highlight-filename.js
I made a plugin for displaying filename for highlight.js, highlightjs-highlight-filename.js.
ファイル名表示プラグインhighlightjs-highlight-filename.jsも作りましたー！
The usage is,
使い方は似たような感じで、
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/TRSasasusu/highlightjs-highlight-filename.js@1.0.1/highlightjs-highlight-filename.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initHighlightFilenameOnLoad([
{filename: 'main.c'},
{filename: 'program.py', backgroundColor: 'white', color: '#000'},
{filename: 'main.cpp', backgroundColor: '#111'},
]);
</script>