Adding initial math support

2026-07-05 11:09:47 +08:00 · 2017-04-13 16:49:00 -07:00
parent c24a1d0485
commit b3efa2526d
9 changed files with 9131 additions and 11 deletions
@@ -0,0 +1,19 @@
+import katex from "katex";
+
+const html = `
+<style>
+dt-math[block] {
+  display: block;
+}
+</style>
+`;
+
+export default function(dom, data) {
+  let equationElements = [].slice.call(dom.querySelectorAll("dt-math"));
+  equationElements.forEach(el => {
+    let content = el.textContent;
+    console.log(content)
+    let displayMode = el.hasAttribute("block") ? true : false;
+    el.innerHTML = html + katex.renderToString(content, {displayMode: displayMode});
+  });
+}
@@ -26,6 +26,7 @@ dt-article > h4,
 dt-article > figure,
 dt-article > ul,
 dt-article > dt-byline,
+dt-article > dt-math,
 dt-article > dt-code,
 dt-article section > div,
 dt-article section > p,
@@ -59,6 +60,7 @@ dt-article section > dt-code {
  dt-article > figure,
  dt-article > ul,
  dt-article > dt-byline,
+  dt-article > dt-math,
  dt-article > dt-code,
  dt-article section > div,
  dt-article section > p,
@@ -85,6 +87,7 @@ dt-article section > dt-code {
  dt-article > figure,
  dt-article > ul,
  dt-article > dt-byline,
+  dt-article > dt-math,
  dt-article > dt-code,
  dt-article section > div,
  dt-article section > p,
@@ -1,6 +1,9 @@
 <!doctype html>
 <meta charset="utf8">
 <script src="../dist/template.js"></script>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
+
 <script type="text/front-matter">
  title: Article Title
  published: Jan 10, 2017
@@ -21,6 +24,8 @@
  <p>Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
  <p>Test for owner's possessive.</p>
  <p>Test for "quoting a passage." And another sentence. Or two.</p>
+  <p>Here's a test of an inline equation <dt-math>c = a^2 + b^2</dt-math>.</p>
+  <dt-math block>c = \pm\sqrt{a^2 + b^2}</dt-math>
  <p>We can also cite <dt-cite key="gregor2015draw,mercier2011humans"></dt-cite> external publications. <dt-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></dt-cite></p>
  <p>We should also be testing footnotes<dt-fn>This will become a hoverable footnote.</dt-fn>.</p>
 </dt-article>
@@ -10,6 +10,7 @@ import appendix from "./components/appendix";
 import appendixDistill from "./components/appendix-distill";
 import citation from "./components/citation";
 import footnote from "./components/footnote";
+import DTMath from "./components/dt-math";
 import markdown from "./components/markdown";
 import code from "./components/code";
 import typeset from "./components/typeset";
@@ -31,6 +32,7 @@ function renderOnLoad(dom, data) {
  byline(dom, data);
  appendix(dom, data);
  markdown(dom, data);
+  DTMath(dom, data);
  code(dom, data);
  citation(dom, data);
  footnote(dom, data);
@@ -40,6 +40,7 @@
    "commander": "^2.9.0",
    "d3-time-format": "^2.0.3",
    "html-escape": "^2.0.0",
+    "katex": "^0.7.1",
    "mustache": "^2.3.0"
  }
 }
@@ -813,6 +813,12 @@ jsprim@^1.2.2:
    json-schema "0.2.3"
    verror "1.3.6"

+katex@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.7.1.tgz#06bb5298efad05e1e7228035ba8e1591f3061b8f"
+  dependencies:
+    match-at "^0.1.0"
+
 kind-of@^3.0.2:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -909,6 +915,10 @@ marked@^0.3.6:
  version "0.3.6"
  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"

+match-at@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.0.tgz#f561e7709ff9a105b85cc62c6b8ee7c15bf24f31"
+
 micromatch@^2.1.5:
  version "2.3.11"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"