Skip to content

Commit

Permalink
fix: Math syntax attributes should have been specified in the wrappin…
Browse files Browse the repository at this point in the history 
…g `<span>` instead of the `<body>`.
  • Loading branch information
@akabekobeko
akabekobeko committed May 1, 2021
1 parent 1cbb877 commit 13dbc79
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 28 deletions.
8 changes: 4 additions & 4 deletions docs/vfm.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ display: $$1 + 1 = 2$$

**HTML**

It also outputs the `<script>` and `<body>` attributes for processing MathJax in Vivliostyle if `math` is enabled. However, even if the math syntax is valid, it will not be output if it does not actually exist.
It also outputs `<script>` for processing MathJax in Vivliostyle if `math` is enabled. However, even if the math syntax is valid, it will not be output if it does not actually exist.

```html
<html>
Expand All @@ -377,9 +377,9 @@ It also outputs the `<script>` and `<body>` attributes for processing MathJax in
<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>inline: <span class="math inline">\(x = y\)</span></p>
<p>display: <span class="math display">$$1 + 1 = 2$$</span></p>
<body>
<p>inline: <span class="math inline" data-math-typeset="true>"\(x = y\)</span></p>
<p>display: <span class="math display" data-math-typeset="true">$$1 + 1 = 2$$</span></p>
</body>
</html>
```
Expand Down
6 changes: 2 additions & 4 deletions src/plugins/math.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export const handlerInlineMath: Handler = (h, node: Node) => {
'span',
{
class: 'math inline',
'data-math-typeset': 'true',
},
[u('text', `\\(${node.data.value as string}\\)`)],
);
Expand All @@ -193,6 +194,7 @@ export const handlerDisplayMath: Handler = (h, node: Node) => {
'span',
{
class: 'math display',
'data-math-typeset': 'true',
},
[u('text', `$$${node.data.value as string}$$`)],
);
Expand Down Expand Up @@ -223,10 +225,6 @@ export const hast = () => (tree: Node) => {
});
node.children.push({ type: 'text', value: '\n' });
break;

case 'body':
node.properties = { ...node.properties, 'data-math-typeset': 'true' };
break;
}
});
};
40 changes: 20 additions & 20 deletions tests/math.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ $a$
$(x = y)$
$|x = y|$`;
const received = stringify(md, options);
const expected = `<p>text<span class="math inline">\\(x = y\\)</span>text
<span class="math inline">\\(a\\)</span>
<span class="math inline">\\((x = y)\\)</span>
<span class="math inline">\\(|x = y|\\)</span></p>`;
const expected = `<p>text<span class="math inline" data-math-typeset="true">\\(x = y\\)</span>text
<span class="math inline" data-math-typeset="true">\\(a\\)</span>
<span class="math inline" data-math-typeset="true">\\((x = y)\\)</span>
<span class="math inline" data-math-typeset="true">\\(|x = y|\\)</span></p>`;
expect(received).toBe(expected);
});

it('inline: multiline', () => {
const md = `$x = y
1 + 1 = 2$`;
const received = stringify(md, options);
const expected = `<p><span class="math inline">\\(x = y
const expected = `<p><span class="math inline" data-math-typeset="true">\\(x = y
1 + 1 = 2\\)</span></p>`;
expect(received).toBe(expected);
});
Expand All @@ -34,7 +34,7 @@ x = y$
$\tx = y$
`;
const received = stringify(md, options);
const expected = `<p>text $ text<span class="math inline">\\(x = y\\)</span>
const expected = `<p>text $ text<span class="math inline" data-math-typeset="true">\\(x = y\\)</span>
$
x = y$
$\tx = y$</p>`;
Expand All @@ -48,7 +48,7 @@ $
$x = y\t$
`;
const received = stringify(md, options);
const expected = `<p>text <span class="math inline">\\(x = $y\\)</span> text
const expected = `<p>text <span class="math inline" data-math-typeset="true">\\(x = $y\\)</span> text
$x = y
$
$x = y\t$</p>`;
Expand All @@ -66,23 +66,23 @@ it('inline: ignore "$.\\$.$"', () => {
const md = 'text $x = 5\\$ + \\\\\\$ + 4$ text';
const received = stringify(md, options);
const expected =
'<p>text <span class="math inline">\\(x = 5\\$ + \\\\\\$ + 4\\)</span> text</p>';
'<p>text <span class="math inline" data-math-typeset="true">\\(x = 5\\$ + \\\\\\$ + 4\\)</span> text</p>';
expect(received).toBe(expected);
});

it('inline: exclusive other markdown syntax', () => {
const received = stringify('text$**bold**$text', options);
const expected =
'<p>text<span class="math inline">\\(**bold**\\)</span>text</p>';
'<p>text<span class="math inline" data-math-typeset="true">\\(**bold**\\)</span>text</p>';
expect(received).toBe(expected);
});

it('display', () => {
const md = `text$$1 + 1 = 2$$text
$$a$$`;
const received = stringify(md, options);
const expected = `<p>text<span class="math display">$$1 + 1 = 2$$</span>text
<span class="math display">$$a$$</span></p>`;
const expected = `<p>text<span class="math display" data-math-typeset="true">$$1 + 1 = 2$$</span>text
<span class="math display" data-math-typeset="true">$$a$$</span></p>`;
expect(received).toBe(expected);
});

Expand All @@ -92,7 +92,7 @@ x=y
1 + 1 = 2
$$`;
const received = stringify(md, options);
const expected = `<p><span class="math display">$$
const expected = `<p><span class="math display" data-math-typeset="true">$$
x=y
1 + 1 = 2
$$</span></p>`;
Expand All @@ -102,7 +102,7 @@ $$</span></p>`;
it('display: exclusive other markdown syntax', () => {
const received = stringify('text$$**bold**$$text', options);
const expected =
'<p>text<span class="math display">$$**bold**$$</span>text</p>';
'<p>text<span class="math display" data-math-typeset="true">$$**bold**$$</span>text</p>';
expect(received).toBe(expected);
});

Expand All @@ -111,8 +111,8 @@ it('inline and display', () => {
'inline: $x = y$\n\ndisplay: $$1 + 1 = 2$$',
options,
);
const expected = `<p>inline: <span class="math inline">\\(x = y\\)</span></p>
<p>display: <span class="math display">$$1 + 1 = 2$$</span></p>`;
const expected = `<p>inline: <span class="math inline" data-math-typeset="true">\\(x = y\\)</span></p>
<p>display: <span class="math display" data-math-typeset="true">$$1 + 1 = 2$$</span></p>`;
expect(received).toBe(expected);
});

Expand All @@ -125,7 +125,7 @@ it('un-match: $$$...', () => {
it('un-match inline', () => {
const received = stringify('$x = y$ $ x = y$ $x = y $ $x = y$7', options);
const expected =
'<p><span class="math inline">\\(x = y\\)</span> $ x = y$ $x = y $ $x = y$7</p>';
'<p><span class="math inline" data-math-typeset="true">\\(x = y\\)</span> $ x = y$ $x = y $ $x = y$7</p>';
expect(received).toBe(expected);
});

Expand All @@ -148,7 +148,7 @@ $$</p>`;
expect(received).toBe(expected);
});

it('HTML head and body', () => {
it('Output <script> tag', () => {
const received = stringify('$x=y$', { math: true, disableFormatHtml: true });
const expected = `<!doctype html>
<html>
Expand All @@ -157,15 +157,15 @@ it('HTML head and body', () => {
<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><span class="math inline">\\(x=y\\)</span></p>
<body>
<p><span class="math inline" data-math-typeset="true">\\(x=y\\)</span></p>
</body>
</html>
`;
expect(received).toBe(expected);
});

it('math syntax does not exist, without <script> and <body> attribute', () => {
it('math syntax does not exist, without <script> tag', () => {
const md = 'Sample';
const received = stringify(md, {
math: false,
Expand Down

0 comments on commit 13dbc79

Please sign in to comment.