feat: add katex math typesetting shortcode (#157)

This commit is contained in:
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]?
hugo-book
ToC
ToC-Tree
toc
macOS
SVG
@ -24,3 +25,5 @@ prebuilt
whitespace
relref
href
KaTeX
katex

View file

@ -25,7 +25,7 @@ steps:
- name: html-validation
image: thegeeklab/vnu
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
image: thegeeklab/link-validator
@ -275,6 +275,6 @@ depends_on:
---
kind: signature
hmac: f50ce7eb9ad9db8f6813bad0af73022fa67d8d2b4e263629eeadcede12108c41
hmac: eab38beb69658699f03b9ce6ad2c70c5040f6fd028af08fcdaf27384cc61ab45
...

1
.gitignore vendored
View file

@ -16,6 +16,7 @@ static/*.min.css.map
static/js/
static/favicon/
static/fonts/GeekdocIcons.*
static/fonts/KaTeX_*
resources/
exampleSite/resources/
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

View file

@ -1,3 +1,7 @@
---
title: Buttons
---
Buttons are styled links that can lead to local page or external link.
```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.
```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.
## Example

View file

@ -1,3 +1,7 @@
---
title: Hints
---
Hint shortcode can be used as hint/alerts/notification block.
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.
```tpl

View file

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

View file

@ -1,6 +1,5 @@
---
# Empty front matter as shortcodes could not be includes
# as first line of a file.
title: Includes
---
{{< 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.
## Example

View file

@ -1,3 +1,7 @@
---
title: Tabs
---
Tabs let you organize content by context, for example installation instructions for each supported platform.
```tpl
@ -13,7 +17,7 @@ Tabs let you organize content by context, for example installation instructions
{{< tabs "uniqueid" >}}
{{< tab "macOS" >}}
# macOS
## macOS
This is tab **macOS** content.
@ -25,7 +29,7 @@ fastidious copious quo ad. Stet probates in duo.
{{< tab "Linux" >}}
# Linux
## Linux
This is tab **Linux** content.
@ -37,7 +41,7 @@ fastidious copious quo ad. Stet probates in duo.
{{< tab "Windows" >}}
# Windows
## Windows
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.
```tpl

View file

@ -1,3 +1,7 @@
---
title: ToC
---
Simple wrapper to generate a page Table of Content from a shortcode.
```tpl

View file

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

View file

@ -24,6 +24,7 @@ const through = require("through2");
var BUILD = "build";
var CSS_BUILD = BUILD + "/assets";
var JS_BUILD = BUILD + "/assets/js";
var FONTS = "static/fonts";
var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
var TIMESTAMP = Math.round(Date.now() / 1000);
@ -207,7 +208,7 @@ gulp.task("iconfont", function () {
timestamp: TIMESTAMP,
})
)
.pipe(gulp.dest("static/fonts/"));
.pipe(gulp.dest(FONTS));
});
gulp.task("js", function () {
@ -220,12 +221,14 @@ gulp.task("js", function () {
.pipe(gulp.dest(JS_BUILD));
});
gulp.task("asset-sync", function () {
gulp.task("asset-sync-js", function () {
return gulp
.src([
"node_modules/clipboard/dist/clipboard.min.js",
"node_modules/flexsearch/dist/flexsearch.compact.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(
@ -236,6 +239,24 @@ gulp.task("asset-sync", function () {
.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 () {
return gulp
.src(
@ -283,7 +304,10 @@ gulp.task("clean", function () {
/* 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"));

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==",
"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": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",

View file

@ -16,6 +16,7 @@
"dependencies": {
"clipboard": "2.0.8",
"flexsearch": "0.7.1",
"katex": "0.13.11",
"mermaid": "8.10.2"
},
"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 darkMode = false;
console.log(currentMode);
if (
currentMode === DARK_MODE ||
(currentMode === AUTO_MODE && darkModeQuery.matches)