LoginSignup
3
4

More than 5 years have passed since last update.

reveal.jsでMarkdown中に数式を書く時のエスケープ

Posted at

数式を書くプレゼンを作っていて、reveal.jsが対応しているMathJaxとMarkdown記法を併用したら一部の数式が変換されなくて困ったので、その原因と対策です。

reveal.jsはv1.3.1を使いました。

発端

画像のフーリエ変換のプレゼンを作っていて、フーリエ変換の式をMathJaxで書いたところ、1次元のフーリエ変換の式は期待通り表示されるのに、2次元のフーリエ変換の式はいつまで経っても数式にならなくて困りました。

ソースはこんな感じです。
※ちなみに Atom + markdown-preview-plus + mathjax-wrapper では、HTMLタグを除いたソースでどちらの式も表示されています。

<section data-markdown>
  <script type="text/template" >
    # フーリエ変換
    $$
      F(u) = \int_{-\infty}^{\infty} f(x)\mathrm{e}^{-j2\pi ux}dx
    $$

    # 2次元のフーリエ変換
    $$
      F(u,v) = \int_{-\infty}^{\infty} \int_{-\infty}^{\infty} f(x,y)\mathrm{e}^{-j2\pi (ux + vy )}dxdy
    $$
  </script>
</section>

原因と対応

実際に表示して見ると、

$$ F(u,v) = \int{-\infty}^{\infty} \int{-\infty}^{\infty} f(x,y)\mathrm{e}^{-j2\pi (ux + vy )}dxdy $$

と表示されて、しかも最初の\intのあとの{-\infty}^{\infty} \intの部分が斜体となっていました。

つまり、積分の範囲を示すつもりの_が、Markdownの強調記述として処理されてしまったわけです。
これを\_とエスケープすることで、期待通り表示できました。

<section data-markdown>
  <script type="text/template" >
    # フーリエ変換
    $$
      F(u) = \int\_{-\infty}^{\infty} f(x)\mathrm{e}^{-j2\pi ux}dx
    $$

    # 2次元のフーリエ変換
    $$
      F(u,v) = \int\_{-\infty}^{\infty} \int\_{-\infty}^{\infty} f(x,y)\mathrm{e}^{-j2\pi (ux + vy )}dxdy
    $$
  </script>
</section>

1次元の式は_が1つだけで強調の構文と判断されなかったようで、期待通りに表示されたようです。
下にまとめていますが文字として表示するためにはエスケープが必要になる\も、直後の文字がエスケープ対象でなければMarkdownの処理後もそのまま残されるようで、\\int などと書かなくても済んでいますがその分混乱を招いてくれました。

エスケープの一覧表

実際には_以外にもエスケープは必要だったので、確認しているものをまとめておきます。

通常の書き方 Markdown中での書き方
_ \_
* \*
` \`
\ \\
\\ \\\\
\{ , \} \\{, \\}
a = b\\
> c
a = b\\
\> c

エスケープ大事、です。

他にも表示できないものがあれば教えていただけると助かります。

しかし、Atomのプラグインみたいにエスケープなしには出来ませんかねぇ……(同時に処理する必要があるから難しいか)。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4