logospathos's tech log: TexのコードブロックがBloggerでハイライトされない

Texのコードを書いたコードブロックが、Blogger上ではハイライトされませんでした。

---

僕は、Bloggerへの投稿記事を、VSCodeでマークダウン形式で作成しています。

Texのコードを書いたコードブロックがあるマークダウンのテキストをVSCodeで作成したのですが、

VSCodeのプレビューと同じように、Bloggerでも同じようにハイライト表示されるだろうと思っていたところ、

BloggerでTexのコードブロックがハイライトされませんでした。

以下、その症状と原因、解決策をまとめてみました。
<a name='more'></a>

---

## 前提

### 環境

- ブログサービス：Blogger
  - 元テーマ：Awesome.Inc
  - マークダウン・プラグイン：Marked.js（0.6.2）
  - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6)
    - [highlight.jsの導入手順](https://logospathos-techlog.blogspot.com/2019/04/bloggerhighlightjs.html)
  - 数式表示プラグイン：$\KaTeX$（0.10.0）

- マークダウン・エディタ：VSCode（1.33.1）
  - マークダウン関連拡張機能：
    - Markdown All in One（2.2.0）
    - Markdown Preview Enhanced（0.3.13）
    - Markdown+Math （2.3.9）

### やりたい投稿手順

大まかには、以下のような手順で投稿できるようにしたいと思って、導入しました。

1. VSCode上で、マークダウン形式で投稿テキストを作成する。
   - マークダウン形式で、数式を入力するときの区切り文字は、インライン（`inline`）の場合、`$`、独立行（`display`）の場合、`$$`とする。
   - TeXのコードブロックは、<code>\`\`\`tex</code>と指定する。
2. 作成したテキストを、基本的にコピー＆ペーストで、Bloggerに投稿する。
   - Bloggerの投稿作成画面では、HTML形式欄で入力する。

---

## 症状

マークダウン上で<code>\`\`\`tex</code>と指定した、TeXのコードブロックが、Blogger上でハイライトされませんでした。

### ハイライトされなかったときのtexコードブロック（イメージ）

```latex
$$
    \begin{aligned}
        \frac{dG(t, t_0)}{dt_0}
        &= \lim\limits_{h \rightarrow0} \frac{G(t, t_0+h)-G(t,t_0)}{h} \\\\
        &= \lim\limits_{h \rightarrow0}
        \frac{\int^\infin_{t_0+h}f(t, t_0+h)dt-\int^\infin_{t_0}f(t, t_0)dt}{h} \\\\
        &= \lim\limits_{h \rightarrow0}
        \frac{\int^\infin_{t_0}f(t, t_0+h)dt-\int^\infin_{t_0}f(t, t_0)dt-\int^{t_0+h}_{t_0}f(t, t_0+h)dt}{h} \\\\
        &= \int^\infin_{t_0}\lim\limits_{h \rightarrow0}\frac{f(t, t_0+h)-f(t, t_0)}{h}dt
        -\lim\limits_{h \rightarrow0}\frac{\int^{t_0+h}_{t_0}f(t, t_0+h)dt}{h} \\\\
        &= \int^\infin_{t_0}\frac{df(t,t_0)}{dt_0}dt - f(t_0, t_0)
    \end{aligned}
$$
```

## 原因

highlight.jsサイトの“[How to use highlight.js](https://highlightjs.org/usage/)”[1]の“Getting the Library”には、以下のような説明がありました。

> The CDN-hosted package doesn't have all the languages. Otherwise it'd be too big. If you don't see the language you need in the "Common" section, it can be added manually:

CDN経由でhighlight.jsを読み込むとき、C++やHTMLなどよく使用される、一部の言語（"Common"に分類されたもの）だけが含まれているそうです。

ある言語が"Common"に分類されているか否かは、[ここ](https://highlightjs.org/download/)で調べることができます。[2]

調べてみたところ、TeXは、“Common”に分類された言語ではなかったので、TeX用のスクリプトを読み込むコードを追加しなければならなかったようです。

## 解決策

先述の“Getting the Library”によれば、それぞれの言語用のスクリプトは `…/<version>/languages/<言語名>.min.js` で指定すればいいそうです。

[highlight.js CSS classes reference](https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html) [3]によれば、TeXの言語名は、“TeX”ということなので、TeXのハイライト用スクリプトには、`tex.min.js`として、以下のようなコードを追加することにしました。

追加コード：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/tex.min.js"/>
```

コードの追加場所は、Bloggerのテーマの`<head>`内の`<script>hljs.initHighlightingOnLoad();</script>`の前に追加しました。

コードの追加場所：

```html
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/tex.min.js"/>
<script>hljs.initHighlightingOnLoad();</script>
```

これで、TeXのコードブロックもハイライトされるようになりました。

### ハイライトされるようになったtexコードブロック

```tex
$$
    \begin{aligned}
        \frac{dG(t, t_0)}{dt_0}
        &= \lim\limits_{h \rightarrow0} \frac{G(t, t_0+h)-G(t,t_0)}{h} \\\\
        &= \lim\limits_{h \rightarrow0}
        \frac{\int^\infin_{t_0+h}f(t, t_0+h)dt-\int^\infin_{t_0}f(t, t_0)dt}{h} \\\\
        &= \lim\limits_{h \rightarrow0}
        \frac{\int^\infin_{t_0}f(t, t_0+h)dt-\int^\infin_{t_0}f(t, t_0)dt-\int^{t_0+h}_{t_0}f(t, t_0+h)dt}{h} \\\\
        &= \int^\infin_{t_0}\lim\limits_{h \rightarrow0}\frac{f(t, t_0+h)-f(t, t_0)}{h}dt
        -\lim\limits_{h \rightarrow0}\frac{\int^{t_0+h}_{t_0}f(t, t_0+h)dt}{h} \\\\
        &= \int^\infin_{t_0}\frac{df(t,t_0)}{dt_0}dt - f(t_0, t_0)
    \end{aligned}
$$
```

### おことわり

冒頭のハイライトされていないコードブロックは、もともと言語を<code>\`\`\`tex</code>と指定していたのですが、今やハイライトされるようになったので、ハイライトされなかった症状を表示するために、実はここでは、 <code>\`\`\`latex</code>と指定して、あえてハイライトされないようにしています。

## 参考

- [1] : [highlight.js: How to use highlight.js](https://highlightjs.org/usage/)
- [2] : [highlight.js: Getting highlight.js](https://highlightjs.org/download/)
- [3] : [highlight.js: CSS classes reference](https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html)

---

## 今後の課題

* [ ] この方法では、Bloggerでコードブロックに表示したい言語が増えるたびに、読み込むスクリプトが増えてしまいます。ある投稿で使用する言語が、他の投稿には関係のない場合も多く、言語が多くなるにつれて、スクリプトの読み込みに時間がかかるようになることが心配です。投稿ごとに読み込むスクリプトを個別に指定する方法がないか、いずれ検討が必要になりそうです。

---

## 更新履歴

2019-04-27 新規作成

logospathos's tech log

2019年4月27日土曜日

TexのコードブロックがBloggerでハイライトされない

0 件のコメント:

コメントを投稿