Highlight.jsをWordPressに導入

2020/03/25 2021/12/08

Highlight.js と highlightjs-line-numbers.js を導入する

自分のウェブサイトでコードを見やすく表示したい，ということでHighlight.jsを導入．

公式ページ
「highlight.js」https://highlightjs.org/

導入する上で参考にしたサイトは以下の通り

「Highlight.jsに乗り替えて高速化、重いCrayonを捨てる」きもおたねっと。　https://kimoota.net/highlightjs/
「WordPressでhighlight.jsを使う方法。」DESIGNREMARKS　https://design-remarks.com/highlight-to-wordpress/

導入する言語の選択では，これだけ入れとけばいいだろうというものを入れた．具体的には次の通り．

C#，C++，HTML, XML，HTTP， JSON / JSON with Comments，Java，JavaScript，Markdown，PHP，Python，Ruby，Excel， PowerShell，R，TeX

なお，2020/3/14現在でのバージョンは 9.18.1であった．

cssファイルは，atom-one-dark.css を選択．
基本的にそのままだが，コードっぽくするために，font-familyだけ追加した．
とりあえず，使われてそうな気がした「源ノ角ゴシック Code JP」「Ricty Diminished」「VLゴシック」「Ricty」を指定しておいた．

ところで， highlight.js には，行番号を表示する機能がない．
そこで，highlightjs-line-numbers.js を導入して行番号を表示することを試みた．

公式ページ
“wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js” GitHub https://github.com/wcoder/highlightjs-line-numbers.js/

導入に当たって参考にしたサイトは以下

「highlight.jsで行番号を表示させる方法」CESolution http://chemesim.xsrv.jp/wp/highlight-jsで行番号を表示させる方法-197.html
「Blogger highlight.js に行番号（highlightjs-line-numbers.js）」ざっくりログ　http://nkurilog.blogspot.com/2017/11/blogger-highlightjs-line-numbersjs.html

というわけで，テーマフォルダのなかに，新たに highlightフォルダを作成し，そこに highlight.pack.js と highlightjs-line-numbers.min.js , stylesフォルダを突っ込んだ．
そして，header.php 内の <head> ~ </head> 内に以下を記述．

<link rel="stylesheet" href="<?php echo get_template_directory_uri()."/highlight/styles/atom-one-dark.css"; ?>" media="print" onload="this.media='all'">
<script src="<?php echo get_template_directory_uri()."/highlight/highlight.pack.js"; ?>"></script>
<script src="<?php echo get_template_directory_uri()."/highlight/highlightjs-line-numbers.min.js"; ?>"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

ここまでやれば，wordpress の編集の際にソースコードブロックを選んで記述すれば（= <pre><code>で囲めば）自動でテキストが行番号付きハイライトされる．

なお，HTMLを直接編集した際に，<pre><code>の直後で改行すると1行目が空行になってしまう（ CESolution より，動作確認済み）ので注意する．

スタイルシートの調整

さて，ここで困ったことにコードの周りに罫線が引かれ，表のようになってしまった．どうやら，このスクリプトはコードをtableにして実現しており，テーマの方で設定してあったCSSの設定の方が勝ってしまったらしい．

仕方ないので，公式サイトやデベロッパーツールで確認しつつ，style.css に新たに以下を書き加えた．

.hljs table{
    margin-bottom: 0
}
.hljs-ln tr .hljs-ln-numbers {
    text-align: right;
    color: #ccc;
    border: 0;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}
.hljs-ln tr .hljs-ln-code {
    border: 0;
    padding-left: 10px;
    padding-right: 10px;
}

ついでに，フォントをコードっぽくするのと（選んだフォントは独断と偏見による），周りの文章との位置関係の調整として，以下も書き加えた．

.hljs{
    font-family: "源ノ角ゴシック Code JP","Source Han Code JP","Ricty Diminished","VLゴシック","Ricty","Meiryo","Yu Gothic","ＭＳ ゴシック",sans-serif;
    margin : 0 0 1rem 0;
}

言語を表示する

以上に示したものまでで充分に使えそうなものが完成する．

でも，せっかくなので highlight.js の言語自動判別を利用した言語の表示機能も付けることにする．
参考にしたサイトはこちら

「jQuery不要の軽量コードハイライト！「highlight.js」の解説」HPcode　https://haniwaman.com/highlight-js/

どうやら，highlight.js は，<code> に class属性 hljs と判定された言語に対応する属性を付加する模様．

class属性と言語の対応は全て，highlight.js をダウンロードした際の zipファイル内にある README.md に載っているが，今回自分が使うものを抜粋すれば以下の表の通りである．

もし，Highlight.js が正しく言語を認識できなくても，<code>のクラス属性にこれらを追加すれば正しく認識されるようになるそう．

言語	class
C#	cs, csharp
C++	cpp, c, cc, h, c++, h++, hpp
CSS	css
Excel	excel, xls, xlsx
HTML, XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
HTTP	http, https
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Markdown	markdown, md, mkdown, mkd
PHP	php, php3, php4, php5, php6, php7
PowerShell	powershell, ps, ps1
Python	python, py, gyp
R	r
Ruby	ruby, rb, gemspec, podspec, thor, irb
TeX	tex

つまり，これらの言語のクラス属性ごとに場合分けして言語名を表示させれば良い訳だ．
ということで，HPcode様のページを参考にしつつ，カスタマイズしたのが以下のコードである．

style.css に書き加えたのが以下

.hljs{
    font-family: "源ノ角ゴシック Code JP","Source Han Code JP","Ricty Diminished","VLゴシック","Ricty","Meiryo","Yu Gothic","ＭＳ ゴシック",sans-serif;
    margin : 0 0 1rem 0;
    position: relative;
    padding: 1.5rem 0.5em 0.5em 0.5em;
    tab-size: 4;
}
.hljs table{
    margin-top: 0;
    margin-bottom: 0;
}
.hljs::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
  content: '';
  color: #fff;
  padding: 0.1rem 0.8rem;
  background-color: #e44d26;
}
.hljs.cs::before,
.hljs.csharp::before {
  content: 'C#';
}
.hljs.c::before,
.hljs.cpp::before {
  content: 'C++';
}
.hljs.css::before {
  content: 'CSS';
}
.hljs.excel::before,
.hljs.xls::before {
  content: 'Excel';
}
.hljs.xml::before,
.hljs.html::before {
  content: 'HTML';
}
.hljs.http::before,
.hljs.https::before {
  content: 'HTTP';
}
.hljs.json::before {
  content: 'JSON';
}
.hljs.java::before {
  content: 'Java';
}
.hljs.js::before,
.hljs.javascript::before {
  content: 'JavaScript';
}
.hljs.markdown::before,
.hljs.md::before {
  content: 'Markdown';
}
.hljs.php::before {
  content: 'PHP';
}
.hljs.powershell::before,
.hljs.ps::before {
  content: 'PowerShell';
}
.hljs.python::before,
.hljs.py::before {
  content: 'Python';
}
.hljs.r::before {
  content: 'R';
}
.hljs.rb::before,
.hljs.ruby::before{
  content: 'Ruby';
}
.hljs.tex::before {
  content: 'TeX';
}
.hljs.dispcode::before {
  content: 'Code';
}

また， atom-one-dark.css の l.21 付近，クラスhljs の部分から padding の記述を削除した．すなわち，

.hljs {
  display: block;
  overflow-x: auto;
  color: #abb2bf;
  background: #282c34;
}

これによって，コードの左上に小さく言語名が表示される．
全てのクラスを書くのはやめた．必要になったら書き加えれば良いし．
また，該当するクラスがない場合は Code とのみ表示するようにした．

以下，色々な言語を試してみるコーナー

python の場合

print('Hello World')

import pandas as pd
list1 = [[1,2,3],[10,20,30]]
df1 = pd.DataFrame(list1)
print(df1)

Rの場合

これだけではRとは判別してくれなかったので，<code class=”r”>としている．

library(dplyr)
data<-read.csv("aaaaa.csv")
data$Column

このようにしたらクラスは “hljs r” となった．

TeXの場合

偏微分
\[ \mbox {div} \vec{A} =
   \frac{\partial A_x}{\partial x} +
   \frac{\partial A_y}{\partial y} +
   \frac{\partial A_z}{\partial z} \]

highlight.js に使わないだろうと思って入れていない fortran の場合

<code>のクラス属性に何も指定しない or “fortran” を指定では，class=”fortran hljs powershell” となり，PowerShell と表示されてしまう．

program hello
  print *, 'Hello World!'
end program hello

そこで， <code>のクラス属性に “dispcode” を入れると，Codeと表示させることができるようにしてある．

program hello
  print *, 'Hello World!'
end program hello