feat: add katex math typesetting shortcode (#157)
parent
823ce1273f
commit
550745e727
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
...
|
||||
|
|
|
@ -16,6 +16,7 @@ static/*.min.css.map
|
|||
static/js/
|
||||
static/favicon/
|
||||
static/fonts/GeekdocIcons.*
|
||||
static/fonts/KaTeX_*
|
||||
resources/
|
||||
exampleSite/resources/
|
||||
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
|
||||
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: Buttons
|
||||
---
|
||||
|
||||
Buttons are styled links that can lead to local page or external link.
|
||||
|
||||
```tpl
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: Columns
|
||||
---
|
||||
|
||||
The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
|
||||
|
||||
```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.
|
||||
|
||||
## Example
|
||||
|
|
|
@ -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`.
|
||||
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: Icons
|
||||
---
|
||||
|
||||
Simple shortcode to include icons from SVG sprites outside of menus.
|
||||
|
||||
```tpl
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
title: Images
|
||||
resources:
|
||||
- name: forest-1
|
||||
src: "forest-1.jpg"
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
# Empty front matter as shortcodes could not be includes
|
||||
# as first line of a file.
|
||||
title: Includes
|
||||
---
|
||||
|
||||
{{< 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.
|
||||
|
||||
## Example
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: ToC
|
||||
---
|
||||
|
||||
Simple wrapper to generate a page Table of Content from a shortcode.
|
||||
|
||||
```tpl
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: ToC Tree
|
||||
title: ToC-Tree
|
||||
geekdocFlatSection: true
|
||||
---
|
||||
|
||||
|
|
30
gulpfile.js
30
gulpfile.js
|
@ -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"));
|
||||
|
||||
|
|
|
@ -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==",
|
||||
"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",
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
"dependencies": {
|
||||
"clipboard": "2.0.8",
|
||||
"flexsearch": "0.7.1",
|
||||
"katex": "0.13.11",
|
||||
"mermaid": "8.10.2"
|
||||
},
|
||||
"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 darkMode = false;
|
||||
|
||||
console.log(currentMode);
|
||||
|
||||
if (
|
||||
currentMode === DARK_MODE ||
|
||||
(currentMode === AUTO_MODE && darkModeQuery.matches)
|
||||
|
|
Loading…
Reference in New Issue