feat: add katex math typesetting shortcode (#157)
parent
823ce1273f
commit
550745e727
|
@ -4,6 +4,7 @@ Shpak
|
||||||
(S|s)hortcode[s]?
|
(S|s)hortcode[s]?
|
||||||
hugo-book
|
hugo-book
|
||||||
ToC
|
ToC
|
||||||
|
ToC-Tree
|
||||||
toc
|
toc
|
||||||
macOS
|
macOS
|
||||||
SVG
|
SVG
|
||||||
|
@ -24,3 +25,5 @@ prebuilt
|
||||||
whitespace
|
whitespace
|
||||||
relref
|
relref
|
||||||
href
|
href
|
||||||
|
KaTeX
|
||||||
|
katex
|
||||||
|
|
|
@ -25,7 +25,7 @@ steps:
|
||||||
- name: html-validation
|
- name: html-validation
|
||||||
image: thegeeklab/vnu
|
image: thegeeklab/vnu
|
||||||
commands:
|
commands:
|
||||||
- vnu --skip-non-html --also-check-css --errors-only exampleSite/public
|
- vnu --skip-non-html --also-check-css --errors-only --filterfile .vnuignore exampleSite/public
|
||||||
|
|
||||||
- name: link-validation
|
- name: link-validation
|
||||||
image: thegeeklab/link-validator
|
image: thegeeklab/link-validator
|
||||||
|
@ -275,6 +275,6 @@ depends_on:
|
||||||
|
|
||||||
---
|
---
|
||||||
kind: signature
|
kind: signature
|
||||||
hmac: f50ce7eb9ad9db8f6813bad0af73022fa67d8d2b4e263629eeadcede12108c41
|
hmac: eab38beb69658699f03b9ce6ad2c70c5040f6fd028af08fcdaf27384cc61ab45
|
||||||
|
|
||||||
...
|
...
|
||||||
|
|
|
@ -16,6 +16,7 @@ static/*.min.css.map
|
||||||
static/js/
|
static/js/
|
||||||
static/favicon/
|
static/favicon/
|
||||||
static/fonts/GeekdocIcons.*
|
static/fonts/GeekdocIcons.*
|
||||||
|
static/fonts/KaTeX_*
|
||||||
resources/
|
resources/
|
||||||
exampleSite/resources/
|
exampleSite/resources/
|
||||||
exampleSite/data/sprites/
|
exampleSite/data/sprites/
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
.*border-content.*
|
|
@ -39,7 +39,7 @@ my_projcet/
|
||||||
│ ├── ...
|
│ ├── ...
|
||||||
```
|
```
|
||||||
|
|
||||||
That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icon/) available.
|
That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icons/) available.
|
||||||
|
|
||||||
## Build-in icons
|
## Build-in icons
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Buttons
|
||||||
|
---
|
||||||
|
|
||||||
Buttons are styled links that can lead to local page or external link.
|
Buttons are styled links that can lead to local page or external link.
|
||||||
|
|
||||||
```tpl
|
```tpl
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Columns
|
||||||
|
---
|
||||||
|
|
||||||
The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
|
The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Expand
|
||||||
|
---
|
||||||
|
|
||||||
Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
|
Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
|
||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Hints
|
||||||
|
---
|
||||||
|
|
||||||
Hint shortcode can be used as hint/alerts/notification block.
|
Hint shortcode can be used as hint/alerts/notification block.
|
||||||
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
|
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Icons
|
||||||
|
---
|
||||||
|
|
||||||
Simple shortcode to include icons from SVG sprites outside of menus.
|
Simple shortcode to include icons from SVG sprites outside of menus.
|
||||||
|
|
||||||
```tpl
|
```tpl
|
|
@ -1,4 +1,5 @@
|
||||||
---
|
---
|
||||||
|
title: Images
|
||||||
resources:
|
resources:
|
||||||
- name: forest-1
|
- name: forest-1
|
||||||
src: "forest-1.jpg"
|
src: "forest-1.jpg"
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
# Empty front matter as shortcodes could not be includes
|
title: Includes
|
||||||
# as first line of a file.
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{{< toc >}}
|
{{< toc >}}
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
title: KaTeX
|
||||||
|
---
|
||||||
|
|
||||||
|
[KaTeX](https://katex.org/) shortcode let you render math typesetting in markdown document.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
{{< columns >}}
|
||||||
|
|
||||||
|
```latex
|
||||||
|
{{</* katex [display] [class="text-center"] */>}}
|
||||||
|
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||||
|
{{</* /katex */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
<--->
|
||||||
|
|
||||||
|
<!-- spellchecker-disable -->
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
{{< katex display >}}
|
||||||
|
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||||
|
{{< /katex >}}
|
||||||
|
|
||||||
|
<!-- spellchecker-enable -->
|
||||||
|
|
||||||
|
{{< /columns >}}
|
||||||
|
|
||||||
|
KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with a `display` setting. for example `display: block`:
|
||||||
|
|
||||||
|
<!-- spellchecker-disable -->
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
{{< katex display >}}
|
||||||
|
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||||
|
{{< /katex >}}
|
||||||
|
|
||||||
|
<!-- spellchecker-enable -->
|
||||||
|
|
||||||
|
Text continues here.
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Mermaid
|
||||||
|
---
|
||||||
|
|
||||||
[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
|
[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
|
||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: Tabs
|
||||||
|
---
|
||||||
|
|
||||||
Tabs let you organize content by context, for example installation instructions for each supported platform.
|
Tabs let you organize content by context, for example installation instructions for each supported platform.
|
||||||
|
|
||||||
```tpl
|
```tpl
|
||||||
|
@ -13,7 +17,7 @@ Tabs let you organize content by context, for example installation instructions
|
||||||
{{< tabs "uniqueid" >}}
|
{{< tabs "uniqueid" >}}
|
||||||
{{< tab "macOS" >}}
|
{{< tab "macOS" >}}
|
||||||
|
|
||||||
# macOS
|
## macOS
|
||||||
|
|
||||||
This is tab **macOS** content.
|
This is tab **macOS** content.
|
||||||
|
|
||||||
|
@ -25,7 +29,7 @@ fastidious copious quo ad. Stet probates in duo.
|
||||||
|
|
||||||
{{< tab "Linux" >}}
|
{{< tab "Linux" >}}
|
||||||
|
|
||||||
# Linux
|
## Linux
|
||||||
|
|
||||||
This is tab **Linux** content.
|
This is tab **Linux** content.
|
||||||
|
|
||||||
|
@ -37,7 +41,7 @@ fastidious copious quo ad. Stet probates in duo.
|
||||||
|
|
||||||
{{< tab "Windows" >}}
|
{{< tab "Windows" >}}
|
||||||
|
|
||||||
# Windows
|
## Windows
|
||||||
|
|
||||||
This is tab **Windows** content.
|
This is tab **Windows** content.
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: ToC-Tree
|
||||||
|
---
|
||||||
|
|
||||||
The `toc-tree` shortcode will generate a Table of Content from a section file tree of your content directory. The root of the resulting ToC will be the page on which you define the shortcode.
|
The `toc-tree` shortcode will generate a Table of Content from a section file tree of your content directory. The root of the resulting ToC will be the page on which you define the shortcode.
|
||||||
|
|
||||||
```tpl
|
```tpl
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
---
|
||||||
|
title: ToC
|
||||||
|
---
|
||||||
|
|
||||||
Simple wrapper to generate a page Table of Content from a shortcode.
|
Simple wrapper to generate a page Table of Content from a shortcode.
|
||||||
|
|
||||||
```tpl
|
```tpl
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: ToC Tree
|
title: ToC-Tree
|
||||||
geekdocFlatSection: true
|
geekdocFlatSection: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
30
gulpfile.js
30
gulpfile.js
|
@ -24,6 +24,7 @@ const through = require("through2");
|
||||||
var BUILD = "build";
|
var BUILD = "build";
|
||||||
var CSS_BUILD = BUILD + "/assets";
|
var CSS_BUILD = BUILD + "/assets";
|
||||||
var JS_BUILD = BUILD + "/assets/js";
|
var JS_BUILD = BUILD + "/assets/js";
|
||||||
|
var FONTS = "static/fonts";
|
||||||
var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
|
var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
|
||||||
var TIMESTAMP = Math.round(Date.now() / 1000);
|
var TIMESTAMP = Math.round(Date.now() / 1000);
|
||||||
|
|
||||||
|
@ -207,7 +208,7 @@ gulp.task("iconfont", function () {
|
||||||
timestamp: TIMESTAMP,
|
timestamp: TIMESTAMP,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.pipe(gulp.dest("static/fonts/"));
|
.pipe(gulp.dest(FONTS));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("js", function () {
|
gulp.task("js", function () {
|
||||||
|
@ -220,12 +221,14 @@ gulp.task("js", function () {
|
||||||
.pipe(gulp.dest(JS_BUILD));
|
.pipe(gulp.dest(JS_BUILD));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("asset-sync", function () {
|
gulp.task("asset-sync-js", function () {
|
||||||
return gulp
|
return gulp
|
||||||
.src([
|
.src([
|
||||||
"node_modules/clipboard/dist/clipboard.min.js",
|
"node_modules/clipboard/dist/clipboard.min.js",
|
||||||
"node_modules/flexsearch/dist/flexsearch.compact.js",
|
"node_modules/flexsearch/dist/flexsearch.compact.js",
|
||||||
"node_modules/mermaid/dist/mermaid.min.js",
|
"node_modules/mermaid/dist/mermaid.min.js",
|
||||||
|
"node_modules/katex/dist/katex.min.js",
|
||||||
|
"node_modules/katex/dist/contrib/auto-render.min.js",
|
||||||
])
|
])
|
||||||
.pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
|
.pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
|
||||||
.pipe(
|
.pipe(
|
||||||
|
@ -236,6 +239,24 @@ gulp.task("asset-sync", function () {
|
||||||
.pipe(gulp.dest(JS_BUILD));
|
.pipe(gulp.dest(JS_BUILD));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
gulp.task("asset-sync-css", function () {
|
||||||
|
return gulp
|
||||||
|
.src(["node_modules/katex/dist/katex.min.css"])
|
||||||
|
.pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
|
||||||
|
.pipe(
|
||||||
|
rename(function (path) {
|
||||||
|
path.basename = path.basename.replace(/compact/, "min");
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.pipe(gulp.dest(CSS_BUILD));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task("asset-sync-font", function () {
|
||||||
|
return gulp
|
||||||
|
.src(["node_modules/katex/dist/fonts/KaTeX_*"])
|
||||||
|
.pipe(gulp.dest(FONTS));
|
||||||
|
});
|
||||||
|
|
||||||
gulp.task("asset-rev", function () {
|
gulp.task("asset-rev", function () {
|
||||||
return gulp
|
return gulp
|
||||||
.src(
|
.src(
|
||||||
|
@ -283,7 +304,10 @@ gulp.task("clean", function () {
|
||||||
|
|
||||||
/* Task series */
|
/* Task series */
|
||||||
|
|
||||||
gulp.task("asset", gulp.series("asset-sync", "asset-rev"));
|
gulp.task(
|
||||||
|
"asset",
|
||||||
|
gulp.series("asset-sync-font", "asset-sync-css", "asset-sync-js", "asset-rev")
|
||||||
|
);
|
||||||
|
|
||||||
gulp.task("svg", gulp.series("svg-sprite"));
|
gulp.task("svg", gulp.series("svg-sprite"));
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
{{ if not (.Page.Scratch.Get "katex") }}
|
||||||
|
<!-- Include katext only first time -->
|
||||||
|
<link rel="stylesheet" href="{{ index .Site.Data.assets "katex.min.css" | relURL }}" />
|
||||||
|
<script defer src="{{ index .Site.Data.assets "js/katex.min.js" | relURL }}"></script>
|
||||||
|
<script defer src="{{ index .Site.Data.assets "js/auto-render.min.js" | relURL }}"></script>
|
||||||
|
<script defer src="{{ index .Site.Data.assets "js/katex-loader.min.js" | relURL }}"></script>
|
||||||
|
{{ .Page.Scratch.Set "katex" true }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<span class="gdoc-katex katex{{ with .Get "class" }} {{ . }}{{ end }}">
|
||||||
|
{{ cond (in .Params "display") "\\[" "\\(" -}}
|
||||||
|
{{- trim .Inner "\n" -}}
|
||||||
|
{{- cond (in .Params "display") "\\]" "\\)" }}
|
||||||
|
</span>
|
|
@ -4393,6 +4393,21 @@
|
||||||
"integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
|
"integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"katex": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/katex/-/katex-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-yJBHVIgwlAaapzlbvTpVF/ZOs8UkTj/sd46Fl8+qAf2/UiituPYVeapVD8ADZtqyRg/qNWUKt7gJoyYVWLrcXw==",
|
||||||
|
"requires": {
|
||||||
|
"commander": "^6.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"commander": {
|
||||||
|
"version": "6.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
|
||||||
|
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"kew": {
|
"kew": {
|
||||||
"version": "0.7.0",
|
"version": "0.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
"flexsearch": "0.7.1",
|
"flexsearch": "0.7.1",
|
||||||
|
"katex": "0.13.11",
|
||||||
"mermaid": "8.10.2"
|
"mermaid": "8.10.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
renderMathInElement(document.body);
|
||||||
|
});
|
|
@ -4,8 +4,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
||||||
let primaryColor = "#ececff";
|
let primaryColor = "#ececff";
|
||||||
let darkMode = false;
|
let darkMode = false;
|
||||||
|
|
||||||
console.log(currentMode);
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
currentMode === DARK_MODE ||
|
currentMode === DARK_MODE ||
|
||||||
(currentMode === AUTO_MODE && darkModeQuery.matches)
|
(currentMode === AUTO_MODE && darkModeQuery.matches)
|
||||||
|
|
Loading…
Reference in New Issue