feat: add katex math typesetting shortcode (#157)

uci-hugo-doc
Robert Kaussow 2021-07-01 09:05:26 +02:00 committed by GitHub
parent 823ce1273f
commit 550745e727
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 149 additions and 14 deletions

View File

@ -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

View File

@ -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
... ...

1
.gitignore vendored
View File

@ -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/

1
.vnuignore Normal file
View File

@ -0,0 +1 @@
.*border-content.*

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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`.

View File

@ -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

View File

@ -1,4 +1,5 @@
--- ---
title: Images
resources: resources:
- name: forest-1 - name: forest-1
src: "forest-1.jpg" src: "forest-1.jpg"

View File

@ -1,6 +1,5 @@
--- ---
# Empty front matter as shortcodes could not be includes title: Includes
# as first line of a file.
--- ---
{{< toc >}} {{< toc >}}

View File

@ -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.

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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

View File

@ -1,5 +1,5 @@
--- ---
title: ToC Tree title: ToC-Tree
geekdocFlatSection: true geekdocFlatSection: true
--- ---

View File

@ -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"));

View File

@ -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>

15
package-lock.json generated
View File

@ -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",

View File

@ -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": {

3
src/js/katex-loader.js Normal file
View File

@ -0,0 +1,3 @@
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body);
});

View File

@ -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)