feat: implemented math syntax with MathJax #89

akabekobeko · 2021-04-19T10:45:43Z

#37 の議論を踏まえて MathJax 形式の数式構文を実装しました。

@MurakamiShinyu @yamasy1549
ドキュメント docs/vfm.md とテスト tests/math.test.ts のレビューをお願いします。

補足として当初は unified のみに依存する独自処理を実装していたのですが、remark を利用するとこれが拡張する tokenizer/method として登録しないと Markdown 構文間の排他がおこなわれないため、VFM 1.0 時点では仕方なく remark プラグインとすることにしました。

VFM 2.0 で remark 13 未満のインターフェースを判定して分岐しているため 13 以降では独自処理に切り替わるはずです。ただし remark 13 でも構文の排他は remark (micromark) として実装しないと機能しないと予想しています。

MurakamiShinyu · 2021-04-20T01:00:44Z

<body data-math-typeset>

が出力されますが、これは次のようにしないとVivliostyleは数式有効にしてくれません。

<body data-math-typeset="true">

akabekobeko · 2021-04-20T02:59:13Z

@MurakamiShinyu
ありがとうございます。真偽値から文字列に修正して data-math-typeset="true" となるようにしました。

MurakamiShinyu · 2021-04-20T03:29:38Z

数式が複数行で書かれているときの処理に疑問があります。

まず、$$ ... $$ のあいだにLaTeX形式の１行だけの場合

$ lib/cli.js --math
$$
\LaTeX \\ \LaTeX
$$
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  </head>
  <body data-math-typeset="true">
    <p>
      $$
      \LaTeX \\ \LaTeX
      $$
    </p>
  </body>
</html>

\\ がそのまま出力されていて問題ありません。
しかし、$$ ... $$ のあいだに2行書いた次の場合

$ lib/cli.js --math
$$
\LaTeX
\LaTeX \\ \LaTeX
$$
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  </head>
  <body data-math-typeset="true">
    <p>
      $$
      \LaTeX
      \LaTeX \ \LaTeX
      $$
    </p>
  </body>
</html>

\\ がMarkdownのエスケープの処理がされて \ になってます。LaTeX数式扱いにならないようです。

akabekobeko · 2021-04-20T04:03:39Z

@MurakamiShinyu
#37 の議論でインライン (Markdown としてのもの、MathJax のインラインとディスプレイ両方とも単一パラグラフ想定) のみ実装だと認識していました。Markdown 構文間の排他を remark で管理するためには remark-parse 依存のメソッドを実装する必要があり、そちらはインラインとブロックが分かれています。希望される複数行の対応はブロックになると思われます。

以上を踏まえて

ブロックも実装する
行ごとにインライン構文を記述することで代替する

のどちらにするのがよいでしょうか？

MurakamiShinyu · 2021-04-20T06:41:42Z

単一パラグラフ想定のみ実装でよいと思います。つまり、複数行にわたっていても、空白行（連続した改行）がない場合は単一パラグラフです。

pandoc での数式の扱いを調べたところ、そのようになっているのが分かりました。
そのうえpandocでは、インライン数式 $ ... $ は、はじめの $ のあとは空白~~や数字~~ではないこと、おわりの $ のまえは空白でないこと、おわりの $ のあとが数字でないことという制限があり、それにより $ が意図せず数式記法として扱われてしまうのを防ぐようになっていることが分かりました。

詳しくは pandoc のマニュアル→ https://pandoc.org/MANUAL.html#math

pandoc --mathjax を試すと、

$ pandoc --mathjax
Text $foo bar$ text
^D
<p>Text <span class="math inline">\(foo bar\)</span> text</p>

$ pandoc --mathjax
Text $50 text $100
^D
<p>Text $50 text $100</p>

↑ $ のあとが数字やスペースだと数式扱いにならない。

$ pandoc --mathjax
Text $$ \LaTeX
\LaTeX \\ LaTeX
\LaTeX $$ text.
^D
<p>Text <span class="math display">\[ \LaTeX
\LaTeX \\ LaTeX
\LaTeX \]</span> text.</p>

$ pandoc --mathjax
$$
foo

bar
$$
^D
<p>$$ foo</p>
<p>bar $$</p>

↑数式の途中に空白行は入れられない（数式扱いにならない）。

このpandocの数式の扱いの仕様は参考になるかと思います。

akabekobeko · 2021-04-20T07:05:25Z

ありがとうございます。remark の inline 系でこの条件を満たせるかを調べてみます。

akabekobeko · 2021-04-20T07:09:48Z

それとこれも追加ですね。

そのうえpandocでは、インライン数式 $ ... $ は、はじめの $ のあとは空白や数字ではないこと、おわりの $ のまえは空白でないこと、という制限があり、それにより $ が意図せず数式記法として扱われてしまうのを防ぐようになっていることが分かりました。

現在は $ または $$ 開始をチェックしていますが、前者は $$、後者は $$$...N のみを回避するようにしています。よって $1 + 1 = 2$ を通しているのですが、数字と空白の否定を正規表現へ追加します。

MurakamiShinyu · 2021-04-20T07:27:11Z

すみません、

pandocでは、インライン数式 $ ... $ は、はじめの $ のあとは空白や数字ではないこと、おわりの $ のまえは空白でないことという制限があり、

と書いたのですが、間違ってたので、次のように直しました：

pandocでは、インライン数式 $ ... $ は、はじめの $ のあとは空白ではないこと、おわりの $ のまえは空白でないこと、おわりの $ のあとが数字でないことという制限があり、

https://pandoc.org/MANUAL.html#math をよく読むと "and must not be followed immediately by a digit." というのは、$...$ の直後に数字がこないことということなので、はじめの $ ではなくておわりの $ です。

これによって、 $1 + 1 = 2$ はその直後が数字でないかぎりはインライン数式として扱われます。

$ pandoc --mathjax
$1 + 1 = 2$
<p><span class="math inline">\(1 + 1 = 2\)</span></p>

$ pandoc --mathjax
$1 + 1 = 2$100
<p>$1 + 1 = 2$100</p>

MurakamiShinyu · 2021-04-20T07:42:21Z

$...$, \[...] というHTMLマークアップ出力も pandoc --mathjax と互換にするのがよいかもしれません。MathJax はこれらのタグがなくても $...$, \[...\], $$...$$ を数式扱いにしますが、これらのタグがあると次のメリットがあります。

HTML を見たときに  や  のところが数式だということが分かりやすいし、論理構造的にセマンティックなマークアップとなる。
スタイルシートで、 span.math.inline { ... } や span.math.display { ... } として数式にスタイルを指定することが可能。

akabekobeko · 2021-04-20T07:53:41Z

ありがとうございます。

と書いたのですが、間違ってたので、次のように直しました：

この仕様により $... is $50 みたいなものを数式の範囲としないようにしているのですね。箇条書きにしてみました。間違えていたらツッコミお願いします。

開始
- $ または $$
- 直後は空白と数字以外
終端
- $ または $$
- 直前は空白以外
- 直後は数字以外

あわせて

$...$, \[...] というHTMLマークアップ出力も pandoc --mathjax と互換にするのがよいかもしれません。

も追加実装します。今回の対応で元の remark-prase 時代にあった HTML 出力が廃止されたので対応する CSS セレクターをドキュメントから削除したのですが、この元処理は村上さんの書かれているとおり明示的なスタイル付けを動機としているのだと思われます。そして数式の利用者にも需要はありそうなので新版でも↑の HTML 出力を実装してみます (ドキュメントにも CSS セレクターを改めて掲載します)。

MurakamiShinyu · 2021-04-20T08:10:35Z

箇条書きにしてみました。間違えていたらツッコミお願いします。

開始

$ または $$

直後は空白と数字以外

終端

$ または $$

直前は空白以外

直後は数字以外

インライン数式 $...$ とディスプレイ数式 $$...$$ で規則が違います。

インライン数式 $...$:

開始
- $
- 直後は空白以外
終端
- $
- 直前は空白以外
- 直後は数字以外
- \$ （$ の直前に \ が奇数個）は終端扱いしない

ディスプレイ数式 $$...$$:

開始
- $$
終端
- $$
途中に空白行がないかぎり、複数行にわたってもよい（注）

（注）pandocのマニュアル https://pandoc.org/MANUAL.html#math では、途中に空白行がないかぎり複数行にわたってもよいというのはディスプレイ数式だけのように読めるのですが、試してみるとインライン数式でも同様なようです。

akabekobeko · 2021-04-20T10:03:08Z

ありがとうございます。

（注）pandocのマニュアル https://pandoc.org/MANUAL.html#math では、途中に空白行がないかぎり複数行にわたってもよいというのはディスプレイ数式だけのように読めるのですが、試してみるとインライン数式でも同様なようです。

についてはインライン側も複数行で対応してみます。なお空白行がある場合、おそらくコードブロックなどの特殊な構文をのぞき remark-parse (の CommonMark/GFM) によってパラグラフが分離されると思われます。念の為、これが除外されることのテストは実装します。

akabekobeko · 2021-04-22T05:32:31Z

以下の正規表現でおおむね実現できた。

inline: /\$([^($| )].*?[^($| )])\$(?!(\$|\d))/gs
display: /\$\$([^$].*?[^$])\$\$(?!\$)/gs

フラグ s で .*? を改行を含めて最短一致できるのと、remark のインライン tokenizer 仕様によるパラグラフ限定のあわせ技となる。display のほうはパラグラフ限定により s フラグ追加だけでいける。

インラインの「\$ （$ の直前に \ が奇数個）は終端扱いしない」が課題。

akabekobeko · 2021-04-22T08:33:58Z

/\$([^($| )].*?[^(\\|$| )])\$(?!(\$|\d))/gs でいけそうに思えるが $1 + 1 = 2$ $x=y$5 $x = \\$y$ $1 + 1 = 2$ のように終端として除外対象となる数値などがあった場合は $x=y$5 でトークン消費されないため $x=y$5 $x = \\$y$ がヒットする。$5 とスペースではじまる $x が終端除外されて y$ に至るわけだ。

よって正規表現を変えるか tokenizer 側でなんとかする必要あり。

akabekobeko · 2021-04-22T09:26:58Z

前述のコメントを見返して $1 + 1 = 2$ $x=y$5 $x = \\$y$ $1 + 1 = 2$ が

$1 + 1 = 2$ = $1 + 1 = 2$
$x=y$5 $x = \\$y$ = $x=y$5 $x = \\$y$
$1 + 1 = 2$ = $1 + 1 = 2$

になるのは正しい挙動に思える。2 を問題としていたが y$5 や \\$y は数式中の $ といえるので、むしろ 2 を $x=y$5 と $$x = \\$y$$ にしないほうがよさそうだ。この認識でよければ現時点のローカル実装で要件は満たせたかもしれない。

…ns for start and end symbols, and escape

akabekobeko · 2021-04-23T09:17:01Z

@MurakamiShinyu @yamasy1549
提案された内容をひととおり実装してみました。テストコードとドキュメントのレビューをお願いします

MurakamiShinyu · 2021-04-23T16:21:54Z

気がついた問題：

`$` のあとが `(` や `|` だと数式扱いにならない

$ lib/cli.js --math --partial
$(1+2)$
^D
<p>$(1+2)$</p>

$ lib/cli.js --math --partial
$|a+b|$
^D
<p>$|a+b|$</p>

正規表現に問題があります。

const regexpInline = /\$([^($| )].*?[^(\\|$| )])\$(?!(\$|\d))/gs;

[^($| )] では (, $, |, , ) を除く文字ということになります。

1文字のみのインライン数式 $a$ が認識されない

この正規表現では2文字以上でないとマッチしません。

U+0020 以外の空白文字

pandoc の場合では U+0020 SPACE 以外の空白文字も同様に扱われます。pandocでのテスト：

開始 $ の後や終了 $ の前がタブ U+0009 の場合も数式扱いしない

$ pandoc --mathjax
$       a+b     $
<p>$ a+b $</p>

開始 $ の後や終了 $ の前が改行の場合も数式扱いしない

$ pandoc --mathjax
$
a+b
$
<p>$ a+b $</p>

この pandoc の動作にあわせるのがよいと思います。

MurakamiShinyu · 2021-04-23T16:28:24Z

偶数個の `\` のあとの `$` でインライン数式が終了するべき

$ lib/cli.js --math --partial
$a+b\\$
^D
<p>$a+b\$</p>

偶数個の \ でも $ をエスケープしてしまう。

pandocではそんなことはない:

$ pandoc --mathjax
$a+b\\$
<p><span class="math inline">\(a+b\\\)</span></p>

…he start and end in math syntax

akabekobeko · 2021-04-24T06:43:21Z

覚書。

以下を修正。

$ のあとが ( や | だと数式扱いにならない
U+0020 以外の空白文字

否定 [^] において () でグルーピングして区切りは | だと勘違いしていたのが原因。ここへはそのまま対象文字を列挙するだけでよかった。空白はそれのみが仕様だと認識していたので意図的に文字を指定していたが、改行やタブ文字も除外してよいとのことなのでメタ文字 \s に変更。

残件。

1文字のみのインライン数式 $a$ が認識されない
- .*? で 0 文字以上だが開始直後と終了直前で「それぞれ 1 文字ずつ判定 = 合計 2 文字は必要」なのが原因と思われる
- 開始と終了を文字消費なしの判定にできる？
偶数個の \ のあとの $ でインライン数式が終了するべき
- 条件として提示されていて途中まで検討していたのに対応を忘れていた
- 偶数、奇数回の繰り返しを判定できるか調べる必要あり

src/plugins/math.ts

docs/vfm.md

… in math syntax (inline) Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

…reak immediately before it was deleted to make it only display syntax Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

MurakamiShinyu · 2021-04-24T09:24:05Z

docs/vfm.md

+
+- `$...$`, `$$...$$` ...Range specification matches
+- `$...\n...$`, `$\n...\n$` ...Within the same paragraph
+- `$...\$...$`, `$$...\$...$$` ...Escape `$` by `\`


ディスプレイ数式では "Escape $ by \" という処理はされていない。
$$...\$$
をテストするとそれが確認できる。pandoc でも同様なので、この動作はたぶん問題ない。

$ lib/cli.js --math --partial $$...\$$ ^D $$...\$$ $ pandoc --mathjax $$...\$$ \[...\\]

次のように、奇数個のエスケープの例にするとよいかなと思います。

Suggested change

- `$...\$...$`, `$$...\$...$$` ...Escape `$` by `\`

- `$...\$...$`, `$...\\\$...$` ...Escape `$` by `\`

akabekobeko · 2021-04-24T09:25:39Z

@MurakamiShinyu
ありがとうございます！手元で試して OK でした。そのテストコードとドキュメント修正を加えてコミットします。

docs/vfm.md

Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

akabekobeko · 2021-04-24T09:38:24Z

@MurakamiShinyu
テストコードと村上さんによる修正を反映したドキュメントの変更をおこないました。これでよろしれけば merge します。

@yamasy1549
docs/vfm.md の Math equation をレビューお願いします。特に問題ないようであれば approve してください。

MurakamiShinyu

👍

akabekobeko · 2021-04-26T07:10:55Z

特に問題点の指摘もなさそうなので merge しました。利用してみて意見などがありましたら、改めて Issue などでご指摘ください。

yamasy1549 · 2021-04-26T09:49:13Z

@akabekobeko たいへん遅くなってすみません、今確認しました。ありがとうございます！

feat: implemented math syntax with MathJax

1f62c24

akabekobeko added docs enhancement labels Apr 19, 2021

akabekobeko added this to the v1.0.0 milestone Apr 19, 2021

akabekobeko requested review from MurakamiShinyu and yamasy1549 April 19, 2021 10:45

akabekobeko self-assigned this Apr 19, 2021

akabekobeko mentioned this pull request Apr 19, 2021

spec: Frontmatter #76

Closed

fix: change the value of data-math-typeset from boolean to string

ab3442b

akabekobeko mentioned this pull request Apr 20, 2021

spec: 数式モード #37

Closed

feat: add html tag for math syntax

bcffbda

feat: implemented MathJax multi-line specification, pre/post-conditio…

2611e92

…ns for start and end symbols, and escape

fix: incorrect specification of characters immediately before/after t…

e0948ec

…he start and end in math syntax

MurakamiShinyu reviewed Apr 24, 2021

View reviewed changes

src/plugins/math.ts Outdated Show resolved Hide resolved

MurakamiShinyu reviewed Apr 24, 2021

View reviewed changes

src/plugins/math.ts Outdated Show resolved Hide resolved

MurakamiShinyu reviewed Apr 24, 2021

View reviewed changes

docs/vfm.md Outdated Show resolved Hide resolved

akabekobeko and others added 3 commits April 24, 2021 18:20

feat: escape $ with an even number of \ and one-letter expression…

26e4cb8

… in math syntax (inline) Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

feat: one-letter expression in math syntax (display)

13f195a

Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

docs: immediately after the symbol of in-line math syntax, the line b…

5d40c12

…reak immediately before it was deleted to make it only display syntax Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

MurakamiShinyu reviewed Apr 24, 2021

View reviewed changes

docs/vfm.md Outdated Show resolved Hide resolved

akabekobeko and others added 2 commits April 24, 2021 18:31

docs: added documentation and test code for math syntax OK/NG cases

218ad29

fix: change data-math-typeset attribute to string boolean

ee733b7

Co-authored-by: Shinyu Murakami <murakami@vivliostyle.com>

MurakamiShinyu approved these changes Apr 24, 2021

View reviewed changes

akabekobeko merged commit e2cf3a3 into master Apr 26, 2021

akabekobeko deleted the feat-math-syntax branch April 26, 2021 07:10

This was referenced Apr 26, 2021

spec: Math notation #18

Closed

Processor-independent math output #30

Closed

yamasy1549 mentioned this pull request May 8, 2021

各テーマのサンプル文書を VFM v1.0.0-alpha.21 に対応させる vivliostyle/themes#38

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implemented math syntax with MathJax #89

feat: implemented math syntax with MathJax #89

akabekobeko commented Apr 19, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021 •

edited

Loading

MurakamiShinyu commented Apr 20, 2021 •

edited

Loading

akabekobeko commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021 •

edited

Loading

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021 •

edited

Loading

akabekobeko commented Apr 22, 2021 •

edited

Loading

akabekobeko commented Apr 22, 2021 •

edited

Loading

akabekobeko commented Apr 22, 2021

akabekobeko commented Apr 23, 2021

MurakamiShinyu commented Apr 23, 2021

MurakamiShinyu commented Apr 23, 2021

akabekobeko commented Apr 24, 2021

MurakamiShinyu Apr 24, 2021

akabekobeko commented Apr 24, 2021

akabekobeko commented Apr 24, 2021

MurakamiShinyu left a comment

akabekobeko commented Apr 26, 2021

yamasy1549 commented Apr 26, 2021

	- `$...\$...$`, `$$...\$...$$` ...Escape `$` by `\`
	- `$...\$...$`, `$...\\\$...$` ...Escape `$` by `\`

feat: implemented math syntax with MathJax #89

feat: implemented math syntax with MathJax #89

Conversation

akabekobeko commented Apr 19, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021 • edited Loading

MurakamiShinyu commented Apr 20, 2021 • edited Loading

akabekobeko commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021 • edited Loading

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021

MurakamiShinyu commented Apr 20, 2021

akabekobeko commented Apr 20, 2021 • edited Loading

akabekobeko commented Apr 22, 2021 • edited Loading

akabekobeko commented Apr 22, 2021 • edited Loading

akabekobeko commented Apr 22, 2021

akabekobeko commented Apr 23, 2021

MurakamiShinyu commented Apr 23, 2021

$ のあとが ( や | だと数式扱いにならない

1文字のみのインライン数式 $a$ が認識されない

U+0020 以外の空白文字

MurakamiShinyu commented Apr 23, 2021

偶数個の \ のあとの $ でインライン数式が終了するべき

akabekobeko commented Apr 24, 2021

MurakamiShinyu Apr 24, 2021

Choose a reason for hiding this comment

akabekobeko commented Apr 24, 2021

akabekobeko commented Apr 24, 2021

MurakamiShinyu left a comment

Choose a reason for hiding this comment

akabekobeko commented Apr 26, 2021

yamasy1549 commented Apr 26, 2021

akabekobeko commented Apr 20, 2021 •

edited

Loading

MurakamiShinyu commented Apr 20, 2021 •

edited

Loading

MurakamiShinyu commented Apr 20, 2021 •

edited

Loading

akabekobeko commented Apr 20, 2021 •

edited

Loading

akabekobeko commented Apr 22, 2021 •

edited

Loading

akabekobeko commented Apr 22, 2021 •

edited

Loading

`$` のあとが `(` や `|` だと数式扱いにならない

偶数個の `\` のあとの `$` でインライン数式が終了するべき