diff --git a/index.html b/index.html index 8ee92b35..a8261783 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ my-project -
diff --git a/package.json b/package.json index 5d291ae9..c075aad1 100644 --- 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", diff --git a/src/assets/fonts/inconsolata-bold.woff b/src/assets/fonts/inconsolata-bold.woff new file mode 100644 index 00000000..b149e95f Binary files /dev/null and b/src/assets/fonts/inconsolata-bold.woff differ diff --git a/src/assets/fonts/inconsolata.woff b/src/assets/fonts/inconsolata.woff new file mode 100644 index 00000000..f6233210 Binary files /dev/null and b/src/assets/fonts/inconsolata.woff differ diff --git a/src/assets/fonts/lato-black-italic.woff b/src/assets/fonts/lato-black-italic.woff new file mode 100644 index 00000000..30f2c71c Binary files /dev/null and b/src/assets/fonts/lato-black-italic.woff differ diff --git a/src/assets/fonts/lato-black.woff b/src/assets/fonts/lato-black.woff new file mode 100644 index 00000000..a0ab25e9 Binary files /dev/null and b/src/assets/fonts/lato-black.woff differ diff --git a/src/assets/fonts/lato-normal-italic.woff b/src/assets/fonts/lato-normal-italic.woff new file mode 100644 index 00000000..76114bc0 Binary files /dev/null and b/src/assets/fonts/lato-normal-italic.woff differ diff --git a/src/assets/fonts/lato-normal.woff b/src/assets/fonts/lato-normal.woff new file mode 100644 index 00000000..ae1307ff Binary files /dev/null and b/src/assets/fonts/lato-normal.woff differ diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 58b8d82b..f974daef 100644 --- 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 { diff --git a/src/components/common/base.scss b/src/components/common/base.scss index 61e7d607..a8bdc426 100644 --- 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, diff --git a/src/components/common/fonts.scss b/src/components/common/fonts.scss new file mode 100644 index 00000000..9cf4049f --- /dev/null +++ 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'); +} diff --git a/src/components/common/markdownHighlighting.scss b/src/components/common/markdownHighlighting.scss index 1f84ac23..6e30ca40 100644 --- 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, diff --git a/src/components/common/variables.scss b/src/components/common/variables.scss index 78b7b847..66de0c72 100644 --- 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; diff --git a/src/extensions/index.js b/src/extensions/index.js index 56fedeea..acb95064 100644 --- a/src/extensions/index.js +++ b/src/extensions/index.js @@ -1 +1,2 @@ +import './katexExt'; import './markdownExt'; diff --git a/src/extensions/katexExt.js b/src/extensions/katexExt.js new file mode 100644 index 00000000..c2d943c5 --- /dev/null +++ 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) => + `${markdown.utils.escapeHtml(tokens[idx].content)}`; + markdown.renderer.rules.display_math = (tokens, idx) => + `${markdown.utils.escapeHtml(tokens[idx].content)}`; + } +}); + +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)); +}); diff --git a/src/markdown/sample.md b/src/markdown/sample.md index 7228b8e1..3e9b7b4d 100644 --- 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 **Settings** dialog. > **Note:** You can find more information: diff --git a/src/services/constants.js b/src/services/constants.js index a769bf60..7dc3cbba 100644 --- a/src/services/constants.js +++ b/src/services/constants.js @@ -1,3 +1,3 @@ export default { - scrollOffset: 20, + scrollOffset: 0, }; diff --git a/yarn.lock b/yarn.lock index a10c28b0..e6ac9058 100644 --- 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"