Added katex extension. Added fonts
This commit is contained in:
benweet
parent
3e94b1b16b
commit
886fa85b45
@ -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>
|
||||
|
||||
@ -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",
|
||||
|
||||
BIN
src/assets/fonts/inconsolata-bold.woff
Normal file
BIN
src/assets/fonts/inconsolata-bold.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/inconsolata.woff
Normal file
BIN
src/assets/fonts/inconsolata.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/lato-black-italic.woff
Normal file
BIN
src/assets/fonts/lato-black-italic.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/lato-black.woff
Normal file
BIN
src/assets/fonts/lato-black.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/lato-normal-italic.woff
Normal file
BIN
src/assets/fonts/lato-normal-italic.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/lato-normal.woff
Normal file
BIN
src/assets/fonts/lato-normal.woff
Normal file
Binary file not shown.
@ -36,7 +36,7 @@ export default {
|
||||
word-wrap: break-word;
|
||||
|
||||
* {
|
||||
line-height: 1.65;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.cledit-section {
|
||||
|
||||
@ -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,
|
||||
|
||||
41
src/components/common/fonts.scss
Normal file
41
src/components/common/fonts.scss
Normal file
@ -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');
|
||||
}
|
||||
@ -118,12 +118,18 @@
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h11,
|
||||
.h2,
|
||||
.h22,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-weight: $editor-font-weight-bold;
|
||||
|
||||
* {
|
||||
line-height: $line-height-title;
|
||||
}
|
||||
}
|
||||
|
||||
.h1,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1 +1,2 @@
|
||||
import './katexExt';
|
||||
import './markdownExt';
|
||||
|
||||
89
src/extensions/katexExt.js
Normal file
89
src/extensions/katexExt.js
Normal file
@ -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));
|
||||
});
|
||||
@ -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:
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export default {
|
||||
scrollOffset: 20,
|
||||
scrollOffset: 0,
|
||||
};
|
||||
|
||||
10
yarn.lock
10
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user