Added katex extension. Added fonts

2024-11-16 11:42:23 +08:00 · 2017-07-26 00:34:01 +01:00 · 2017-07-26 00:34:01 +01:00 · 886fa85b45
commit 886fa85b45
parent 3e94b1b16b
18 changed files with 177 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,6 @@
  <head>
    <meta charset="utf-8">
    <title>my-project</title>
-    <link href="https://fonts.googleapis.com/css?family=Cabin|Lato:400,400i,900,900i|Libre+Franklin:400,400i,700,700i|Merriweather:400,400i,700,700i|Open+Sans:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Source+Code+Pro|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -14,12 +14,12 @@
    "bezier-easing": "^1.1.0",
    "clunderscore": "^1.0.3",
    "diff-match-patch": "^1.0.0",
+    "katex": "^0.7.1",
    "markdown-it": "^8.3.1",
    "markdown-it-abbr": "^1.0.4",
    "markdown-it-deflist": "^2.0.2",
    "markdown-it-emoji": "^1.3.0",
    "markdown-it-footnote": "^3.0.1",
-    "markdown-it-mathjax": "^2.0.0",
    "markdown-it-pandoc-renderer": "1.1.3",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
--- a/src/assets/fonts/inconsolata-bold.woff
+++ b/src/assets/fonts/inconsolata-bold.woff
--- a/src/assets/fonts/inconsolata.woff
+++ b/src/assets/fonts/inconsolata.woff
--- a/src/assets/fonts/lato-black-italic.woff
+++ b/src/assets/fonts/lato-black-italic.woff
--- a/src/assets/fonts/lato-black.woff
+++ b/src/assets/fonts/lato-black.woff
--- a/src/assets/fonts/lato-normal-italic.woff
+++ b/src/assets/fonts/lato-normal-italic.woff
--- a/src/assets/fonts/lato-normal.woff
+++ b/src/assets/fonts/lato-normal.woff
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@ -36,7 +36,7 @@ export default {
  word-wrap: break-word;

  * {
-    line-height: 1.65;
+    line-height: $line-height-base;
  }

  .cledit-section {
--- a/src/components/common/base.scss
+++ b/src/components/common/base.scss
@ -1,4 +1,7 @@
@import '../../node_modules/normalize-scss/sass/normalize';
+@import '../../node_modules/katex/dist/katex.css';
+@import './variables.scss';
+@import './fonts.scss';

@include normalize();

@ -7,7 +10,7 @@ body {
  color: rgba(0, 0, 0, 0.75);
  font-family: $font-family-main;
  font-variant-ligatures: common-ligatures;
-  line-height: 1.65;
+  line-height: $line-height-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@ -34,6 +37,8 @@ h4,
 h5,
 h6 {
  margin: 1.8em 0 1.2em;
+  line-height: $line-height-title;
+  padding: 0.33em 0;
 }

 h1,
@ -41,6 +46,18 @@ h2 {
  border-bottom: 1px solid $hr-color;
 }

+h1 {
+  font-size: 2.2em;
+}
+
+h2 {
+  font-size: 1.6em;
+}
+
+h3 {
+  font-size: 1.22em;
+}
+
 ol ul,
 ul ol,
 ul ul,
--- a/src/components/common/fonts.scss
+++ b/src/components/common/fonts.scss
@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../assets/fonts/lato-normal.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../assets/fonts/lato-normal-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../assets/fonts/lato-black.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../assets/fonts/lato-black-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../assets/fonts/inconsolata.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../assets/fonts/inconsolata-bold.woff') format('woff');
+}
--- a/src/components/common/markdownHighlighting.scss
+++ b/src/components/common/markdownHighlighting.scss
@ -118,12 +118,18 @@
  }

  .h1,
+  .h11,
  .h2,
+  .h22,
  .h3,
  .h4,
  .h5,
  .h6 {
    font-weight: $editor-font-weight-bold;
+
+    * {
+      line-height: $line-height-title;
+    }
  }

  .h1,
--- a/src/components/common/variables.scss
+++ b/src/components/common/variables.scss
@ -1,6 +1,8 @@
-$font-family-main: 'Lato', sans-serif;
-$font-family-monospace: "Lucida Sans Typewriter", "Lucida Console", monaco, Courrier, monospace;
-$font-size-monospace: 0.85em;
+$font-family-main: Lato, 'Helvetica Neue', Helvetica, sans-serif;
+$font-family-monospace: Inconsolata, 'Lucida Sans Typewriter', 'Lucida Console', monaco, Courrier, monospace;
+$line-height-base: 1.67;
+$line-height-title: 1.33;
+$font-size-monospace: 0.95em;
 $code-bg: rgba(0, 0, 0, 0.05);
 $code-border-radius: 2px;
 $link-color: #4a80cf;
--- a/src/extensions/index.js
+++ b/src/extensions/index.js
@ -1 +1,2 @@
+import './katexExt';
 import './markdownExt';
--- a/src/extensions/katexExt.js
+++ b/src/extensions/katexExt.js
@ -0,0 +1,89 @@
+import katex from 'katex';
+import extensionSvc from '../services/extensionSvc';
+
+function texMath(state, silent) {
+  let startMathPos = state.pos;
+  if (state.src.charCodeAt(startMathPos) !== 0x24 /* $ */) {
+    return false;
+  }
+
+  // Parse tex math according to http://pandoc.org/README.html#math
+  let endMarker = '$';
+  startMathPos += 1;
+  const afterStartMarker = state.src.charCodeAt(startMathPos);
+  if (afterStartMarker === 0x24 /* $ */) {
+    endMarker = '$$';
+    startMathPos += 1;
+    if (state.src.charCodeAt(startMathPos) === 0x24 /* $ */) {
+      // 3 markers are too much
+      return false;
+    }
+  } else if (
+    // Skip if opening $ is succeeded by a space character
+    afterStartMarker === 0x20 /* space */
+    || afterStartMarker === 0x09 /* \t */
+    || afterStartMarker === 0x0a /* \n */
+  ) {
+    return false;
+  }
+  const endMarkerPos = state.src.indexOf(endMarker, startMathPos);
+  if (endMarkerPos === -1) {
+    return false;
+  }
+  if (state.src.charCodeAt(endMarkerPos - 1) === 0x5C /* \ */) {
+    return false;
+  }
+  const nextPos = endMarkerPos + endMarker.length;
+  if (endMarker.length === 1) {
+    // Skip if $ is preceded by a space character
+    const beforeEndMarker = state.src.charCodeAt(endMarkerPos - 1);
+    if (beforeEndMarker === 0x20 /* space */
+      || beforeEndMarker === 0x09 /* \t */
+      || beforeEndMarker === 0x0a /* \n */) {
+      return false;
+    }
+    // Skip if closing $ is succeeded by a digit (eg $5 $10 ...)
+    const suffix = state.src.charCodeAt(nextPos);
+    if (suffix >= 0x30 && suffix < 0x3A) {
+      return false;
+    }
+  }
+
+  if (!silent) {
+    const token = state.push(endMarker.length === 1 ? 'inline_math' : 'display_math', '', 0);
+    token.content = state.src.slice(startMathPos, endMarkerPos);
+  }
+  state.pos = nextPos;
+  return true;
+}
+
+extensionSvc.onGetOptions((options, properties) => {
+  options.math = properties['ext:katex'] !== 'false';
+});
+
+extensionSvc.onInitConverter(2, (markdown, options) => {
+  if (options.math) {
+    markdown.use((md) => {
+      md.inline.ruler.push('texMath', texMath);
+    });
+    markdown.renderer.rules.inline_math = (tokens, idx) =>
+      `<span class="katex--inline">${markdown.utils.escapeHtml(tokens[idx].content)}</span>`;
+    markdown.renderer.rules.display_math = (tokens, idx) =>
+      `<span class="katex--display">${markdown.utils.escapeHtml(tokens[idx].content)}</span>`;
+  }
+});
+
+extensionSvc.onSectionPreview((elt) => {
+  const highlighter = displayMode => (katexElt) => {
+    if (!katexElt.highlighted) {
+      try {
+        katex.render(katexElt.textContent, katexElt, { displayMode });
+      } catch (e) {
+        // Ignore
+      }
+    }
+    katexElt.highlighted = true;
+  };
+  elt.querySelectorAll('.katex--inline').cl_each(highlighter(false));
+  elt.querySelectorAll('.katex--display').cl_each(highlighter(true));
+});
--- a/src/markdown/sample.md
+++ b/src/markdown/sample.md
@ -151,6 +151,10 @@ GitHub's fenced code blocks are also supported with **Highlight.js** syntax high
 var bar = 0;
 ```

+```js
+var foo = 'bar'; // baz
+```
+
 > **Tip:** To use **Prettify** instead of **Highlight.js**, just configure the **Markdown Extra** extension in the <i class="icon-cog"></i> **Settings** dialog.

 > **Note:** You can find more information:
--- a/src/services/constants.js
+++ b/src/services/constants.js
@ -1,3 +1,3 @@
 export default {
-  scrollOffset: 20,
+  scrollOffset: 0,
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -3343,6 +3343,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@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
@ -3721,6 +3727,10 @@ markdown-it@^8.3.1:
    mdurl "^1.0.1"
    uc.micro "^1.0.3"

+match-at@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.0.tgz#f561e7709ff9a105b85cc62c6b8ee7c15bf24f31"
+
 math-expression-evaluator@^1.2.14:
  version "1.2.17"
  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"