Blogger投稿でKaTeX数式入力時の注意事項

マークダウン形式テキスト中の数式で、VSCodeのプレビューで表示されるのに、Bloggerではうまく表示されないケースがあります。 --- 僕は、Bloggerへの投稿記事を、VSCodeでマークダウン形式で作成しています。 数式入りの文章も投稿できるように、VSCodeには、拡張機能「Markdown+Math」をインストールすることで、数式入力できるようにし、Bloggerには、KaTeXを導入することで、数式が表示できるようにしました。 「Markdown+Math」も内部で、KaTeXを使用しているので、VSCodeのプレビューと同じように、Bloggerにも表示されるだろうと思っていたのですが、Bloggerでうまく表示されないケースがありました。 ここでは、そんなケースとその回避策についてまとめてみたいと思います。 <a name='more'></a> --- ## 前提 環境と投稿の手順は以下のとおりです。 ### 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - 数式表示プラグイン：$\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） - ブラウザ： - FireFox Quantum(66.0.3 (64 ビット)) - Microsoft EdgeHTML (17.17134) ### 投稿の手順 1. VSCode上で、マークダウン形式で投稿テキストを作成する。 - マークダウン形式で、数式を入力するときの区切り文字は、インライン（`inline`）の場合、`$`、独立行（`display`）の場合、`$$`とする。 2. 作成したテキストを、基本的にコピー＆ペーストで、Bloggerに投稿する。 - Bloggerの投稿作成画面では、HTML形式欄で入力する。 --- ## Bloggerでうまく表示されないケース ### 式番号の表示 VSCodeで独立行の数式と同じ行に、右寄せした式番号をつける場合、以下の記法があります。 .mdファイル： ```tex $$ y = x + 1 $$ (1.1) ``` しかし、Bloggerでは、式番号が改行されてしまいます。 表示結果： > $$ y = x + 1 $$ (1.1) 、というように。 式番号を着けたい場合は、`\tag{}`または`\tag*{}`を数式入れると、右寄せされた式番号をBloggerでも表示させることができます。 .mdファイル： ```tex $$ \tag{1.1} y = x + 1 $$ $$ \tag*{1.1} y = x + 1 $$ ``` 表示結果： > $$ \tag{1.1} y = x + 1 $$ $$ \tag*{1.1} y = x + 1 $$ `\tag{}`は`()`つき、`\tag*{}`はカッコなしで表示されます。私は、`()`つきの`\tag{}`を使用していますが、もし式番号のカッコを変えたい場合は、`\tag*{}`を使えば良さそうです。 #### `\tag*{}`を使用する場合の注意 複数の独立行が連続した（空白行が入らない）場合、その中に`\tag*`を含む独立行を複数あると、Bloggerでうまく表示されないようです。 - `\tag*`を含む独立行が2行連続した場合 .mdファイル： ```tex $$ \tag*{1.1} y = x + 1 $$ $$ \tag*{1.2}　z = x^2 + 2x + 1 $$ ``` 表示結果： > $$ \tag*{1.1} y = x + 1 $$ $$ \tag*{1.2}　z = x^2 + 2x + 1 $$ 式番号表示で`\tag*`を使用する場合、独立行の間に空行を挿入する。 .mdファイル： ```tex $$ \tag*{1.1} y = x + 1 $$ $$ \tag*{1.2}　z = x^2 + 2x + 1 $$ ``` 表示結果： > $$ \tag*{1.1} y = x + 1 $$ > > $$ \tag*{1.2}　z = x^2 + 2x + 1 $$ ### 中カッコ`{`、`}`の表示 KaTeXでは、数式中の中カッコ`{`、`}`を以下のよう記述することができます。実際、VSCodeのプレビューでは表示されます。 .mdファイル： ```tex 対$\{ A,B \}$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. ``` しかし、Bloggerでは、数式中の中カッコ`{`、`}`が消えてしまいます。 表示結果： > 対$\{ A,B \}$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. 、というように。 これに対して、Blogger上で、以下のようにエスケープ文字を重ねると中カッコが表示されるようになります。 .mdファイル： ```tex 対$\\{ A,B \\}$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. ``` 表示結果： > 対$\\{ A,B \\}$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. しかし、VSCode上で同じように記述すると、中カッコは表示されず、そのうえ左中カッコで改行も発生し（数式中の`\\`が改行コード扱いになるためか）、レイアウトが崩れてしまいます。 `{`は`\lbrace`、`}`は`\rbrace`、とそれぞれ記述すると、VSCode上でもBlogger上でも中カッコが表示されます。 .mdファイル： ```tex 対$\lbrace A,B \rbrace$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. ``` 表示結果： > 対$\lbrace A,B \rbrace$が可制御ならば、$A$が安定*になるための必要十分条件は解$Y$が存在して正定値になることとなる. ### 複数行の数式の表示 複数行を含む数式の場合、改行について、以下のこと気をつけないとならないようです。 * [ ] 数式中の改行コード`\\`は二重`\\\\`にする。 * [ ] それぞれの行の終端に空白文字を置かない。 * [ ] インデントした文章に続けて数式を書く場合は、文章と数式の間に空白行を挿入し、左端の`$$`は行頭に置く。 #### Bloggerで表示できるケース .mdファイル： ```tex 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^２ \end{aligned} $$ ``` 表示結果： > 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^２ \end{aligned} $$ #### 数式中の改行コード`\\`のままの場合、 Bloggerで表示するとき、`\\`はエスケープされて、`\`となって表示されるようです。 したがって、`\\\\`とおけば、エスケープ後に`\\となり、数式の改行コードとして認識されるようになりました。 これは、Marked.jsとKaTeXの呼び出し順を変更すれば、解決できるかもしません。 ```tex 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\ &= (x + 1)^2 \\ &= y^２ \end{aligned} $$ ``` 表示結果： > 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\ &= (x + 1)^2 \\ &= y^２ \end{aligned} $$ #### 数式中の改行前に空白文字（ここではスペース2個）を入れた場合、 マークダウン形式では、スペース2個で`<br>`に変換されますが、VSCodeの数式中では、無視されて、問題なくプレビューできるようです。一方、Bloggerでは、無視されず、マークダウンの変換中に改行が挿入され、無効な数式となってしまうようです。 これは、Marked.jsとKaTeXの呼び出し順を変更すれば、解決できるかもしません。 .mdファイル： ```tex 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ ``` 表示結果： > 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ .mdファイル： ```tex 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ ``` 表示結果： > 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ #### すでにインデントされた文に続けて、数式の左端の`$$`をインデントした場合、 .mdファイル： ```tex - 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ ``` 表示結果： > - 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ この場合、インデントした文と数式の間に、1行空白行を挿入し、数式の左端の`$$`を行頭におくようにすると、Bloggerでも表示されるようになりました。 .mdファイル： ```tex - 例）以下のように変形する。 $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ ``` 表示結果： > - 例）以下のように変形する。 > > $$　\begin{aligned} \tag{1.3} z &= x^2 + 2x + 1 \\\\ &= (x + 1)^2 \\\\ &= y^2 \end{aligned} $$ ## 参考 - [1] : [KaTex:Support Table]([https://link](https://katex.org/docs/support_table.html)) --- ## 今後の課題 * [ ] Marked.jsとKaTeXの呼び出し順を変更してみた結果を確認する。 * [ ] インデントした文のあとに、数式をインデントして表示することができないことになる。回避策を検討する。 * [ ] 複数行の数式で、表示できないケースがまだある。 * [ ] 複数の独立行を空白行なしで入力すると、表示できないケースがある。 --- ## 更新履歴 2019-04-25 新規作成