[gatsby-remark-katex] Upgrade remark-math to latest (#4005)

* update remark-math to latest version to fix an issue where equations surrounded by `$$` with new lines are not displayed in KaTeX' `displayMode` * update broken spec * add spec for display math node * [using-remark] fix "Math Equations in Display Mode" example
gatsbyjs · Feb 13, 2018 · d5d9815 · d5d9815
1 parent 224af0f
commit d5d9815
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 18 deletions.
diff --git a/examples/using-remark/src/pages/2017-08-07---katex/index.md b/examples/using-remark/src/pages/2017-08-07---katex/index.md
@@ -37,7 +37,10 @@ a^2 + b^2 = c^2
 $$
 ```
 
-**Example output:** $$ a^2 + b^2 = c^2 $$
+**Example output:**
+$$
+a^2 + b^2 = c^2
+$$
 
 **Add Katex CSS to your template** Katex's CSS file is required to render the
 formulas correctly. Include the CSS file in your template ([example][4])

diff --git a/packages/gatsby-remark-katex/package.json b/packages/gatsby-remark-katex/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "katex": "^0.8.3",
-    "remark-math": "^0.2.4",
+    "remark-math": "^1.0.3",
     "unist-util-visit": "^1.1.1"
   },
   "devDependencies": {

diff --git a/packages/gatsby-remark-katex/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-katex/src/__tests__/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`remark katex plugin renders inlineMath node properly 1`] = `
+exports[`remark katex plugin renders double $ inlineMath node properly 1`] = `
 Object {
   "children": Array [
     Object {
@@ -20,9 +20,9 @@ Object {
           },
           "position": Position {
             "end": Object {
-              "column": 18,
+              "column": 20,
               "line": 1,
-              "offset": 17,
+              "offset": 19,
             },
             "indent": Array [],
             "start": Object {
@@ -37,9 +37,9 @@ Object {
       ],
       "position": Position {
         "end": Object {
-          "column": 18,
+          "column": 20,
           "line": 1,
-          "offset": 17,
+          "offset": 19,
         },
         "indent": Array [],
         "start": Object {
@@ -53,9 +53,9 @@ Object {
   ],
   "position": Object {
     "end": Object {
-      "column": 18,
+      "column": 20,
       "line": 1,
-      "offset": 17,
+      "offset": 19,
     },
     "start": Object {
       "column": 1,
@@ -67,7 +67,7 @@ Object {
 }
 `;
 
-exports[`remark katex plugin renders math node properly 1`] = `
+exports[`remark katex plugin renders inlineMath node properly 1`] = `
 Object {
   "children": Array [
     Object {
@@ -82,14 +82,14 @@ Object {
             ],
             "hName": "span",
             "hProperties": Object {
-              "className": "inlineMath inlineMathDouble",
+              "className": "inlineMath",
             },
           },
           "position": Position {
             "end": Object {
-              "column": 20,
+              "column": 18,
               "line": 1,
-              "offset": 19,
+              "offset": 17,
             },
             "indent": Array [],
             "start": Object {
@@ -104,9 +104,9 @@ Object {
       ],
       "position": Position {
         "end": Object {
-          "column": 20,
+          "column": 18,
           "line": 1,
-          "offset": 19,
+          "offset": 17,
         },
         "indent": Array [],
         "start": Object {
@@ -120,9 +120,61 @@ Object {
   ],
   "position": Object {
     "end": Object {
-      "column": 20,
+      "column": 18,
       "line": 1,
-      "offset": 19,
+      "offset": 17,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`remark katex plugin renders math node properly 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "data": Object {
+        "hChildren": Array [
+          Object {
+            "type": "text",
+            "value": "a^2 + b^2 = c^2",
+          },
+        ],
+        "hName": "div",
+        "hProperties": Object {
+          "className": "math",
+        },
+      },
+      "position": Position {
+        "end": Object {
+          "column": 3,
+          "line": 3,
+          "offset": 21,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "html",
+      "value": "<span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding=\\"application/x-tex\\">a^2 + b^2 = c^2</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"strut\\" style=\\"height:0.8641079999999999em;\\"></span><span class=\\"strut bottom\\" style=\\"height:0.9474379999999999em;vertical-align:-0.08333em;\\"></span><span class=\\"base\\"><span class=\\"mord\\"><span class=\\"mord mathit\\">a</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8641079999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathrm mtight\\">2</span></span></span></span></span></span></span></span><span class=\\"mbin\\">+</span><span class=\\"mord\\"><span class=\\"mord mathit\\">b</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8641079999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathrm mtight\\">2</span></span></span></span></span></span></span></span><span class=\\"mrel\\">=</span><span class=\\"mord\\"><span class=\\"mord mathit\\">c</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8641079999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathrm mtight\\">2</span></span></span></span></span></span></span></span></span></span></span></span>",
+    },
+  ],
+  "position": Object {
+    "end": Object {
+      "column": 3,
+      "line": 3,
+      "offset": 21,
     },
     "start": Object {
       "column": 1,

diff --git a/packages/gatsby-remark-katex/src/__tests__/index.js b/packages/gatsby-remark-katex/src/__tests__/index.js
@@ -13,7 +13,7 @@ describe(`remark katex plugin`, () => {
     expect(markdownAST).toMatchSnapshot()
   })
 
-  it(`renders math node properly`, () => {
+  it(`renders double $ inlineMath node properly`, () => {
     const equation = `$$a^2 + b^2 = c^2$$`
     let remark = new Remark()
     for (let parserPlugins of plugin.setParserPlugins()) {
@@ -23,4 +23,15 @@ describe(`remark katex plugin`, () => {
     plugin({ markdownAST })
     expect(markdownAST).toMatchSnapshot()
   })
+
+  it(`renders math node properly`, () => {
+    const equation = `$$\na^2 + b^2 = c^2\n$$`
+    let remark = new Remark()
+    for (let parserPlugins of plugin.setParserPlugins()) {
+      remark = remark.use(parserPlugins)
+    }
+    const markdownAST = remark.parse(equation)
+    plugin({ markdownAST })
+    expect(markdownAST).toMatchSnapshot()
+  })
 })