複数行を含んだ独立行の数式がBloggerで表示されないことがある

VSCodeのプレビュー上ではちゃんと表示される複数行を含んだ独立行の数式（つまり `$$ \begin{…} ～ \end{…} $$` を使用した数式）で、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 下の数式は、5つの行からなる独立行です。VSCodeのプレビュー上では、表示されますが、Blogger上ではうまく表示されません。 $$ \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} $$ うち、最初の3行だけ抜き出してみます。これはBloggerでも表示されます。 $$ \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} \\\\ \end{aligned} $$ 4行目だけを抜き出してみます。これもBloggerでも表示されます。 $$ \begin{aligned} &= \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} \\\\ \end{aligned} $$ 5行目だけを抜き出してみます。これもBloggerでも表示されます。 $$ \begin{aligned} &= \int^\infin_{t_0}\frac{df(t,t_0)}{dt_0}dt - f(t_0, t_0) \end{aligned} $$ ですが、4、5行目をまとめて抜き出してみます。VSCodeのプレビュー上では、表示されますが、Blogger上ではうまく表示されません。 $$ \begin{aligned} &= \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} $$ ``` 表示結果： 下の数式は、5つの行からなる独立行です。VSCodeのプレビュー上では、表示されますが、Blogger上ではうまく表示されません。 $$ \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} $$ うち、最初の3行だけ抜き出してみます。これはBloggerでも表示されます。 $$ \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} \\\\ \end{aligned} $$ 4行目だけを抜き出してみます。これもBloggerでも表示されます。 $$ \begin{aligned} &= \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} \\\\ \end{aligned} $$ 5行目だけを抜き出してみます。これもBloggerでも表示されます。 $$ \begin{aligned} &= \int^\infin_{t_0}\frac{df(t,t_0)}{dt_0}dt - f(t_0, t_0) \end{aligned} $$ ですが、4、5行目をまとめて抜き出してみます。VSCodeのプレビュー上では、表示されますが、Blogger上ではうまく表示されません。 $$ \begin{aligned} &= \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} $$ ## 回避策 表示されない数式のシンボル/関数の前後に、スペースを入れていくと、表示されたました。シンボル/関数の前後全ての前にスペースに入れる方が無難のようです。 .mdファイル： ```TeX Blogger上で表示できなかった、さきほどの4，5行目だけを抜き出した独立行です。 $$ \begin{aligned} &= \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} $$ 5行目の式の'\infin'の後にスペースを入れてみたら、Blogger上でも表示されるようになりました。 $$ \begin{aligned} &= \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} $$ ``` 表示結果： Blogger上で表示できなかった、さきほどの4，5行目だけを抜き出した独立行です。 $$ \begin{aligned} &= \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} $$ 5行目の式の'\infin'の後にスペースを入れてみたら、Blogger上でも表示されるようになりました。 $$ \begin{aligned} &= \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} $$ .mdファイル： ```TeX 冒頭で説明した、Blogger上で表示できなかった、5行からなる独立行です。 $$ \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} $$ 4行目の式の全ての関数の前後と、第5式の”\infin”の後に、スペースを入れてみると、Bloggerでも表示されるようになりました。 $$ \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} $$ ``` 表示結果： 冒頭で説明した、Blogger上で表示できなかった、5行からなる独立行です。 $$ \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} $$ 4行目の式の全ての関数の前後と、第5式の”\infin”の後に、スペースを入れてみると、Bloggerでも表示されるようになりました。 $$ \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} $$ ## 原因 原因はわかりません。 ## 解決策 原因がわからないので、解決策もわかりません。 当分の間、複数の行からなる数式は、マークダウン上での見易さのためにも、数式の切りのいいところで、適度にスペースを入れるようにしようと思います。 そうやって、もし同じような症状に出くわしたら、数式を行ごとに分解し、スペースを追加しながら、Bloggerでの表示を試してみることになりそうです。。。 --- ## 今後の課題 * [ ] 原因、根本的な解決策がわかりません。調査が必要。 --- ## 更新履歴 2019-04-26 新規作成