add KaTeX support

README.md

@@ -15,6 +15,7 @@ This blog template base on [base-blog](https://github.com/lumeland/base-blog/),
 - **Auto dark mode.** Light theme and dark theme will change according to your system settings. (Or you can choose which theme to use)
 - **For musicians.** Built-in [OSMD](https://opensheetmusicdisplay.org/) support. Inserting MusicXML score in markdown is as easy as inserting image. Express your feelings about music freely.
 - **MIDI Player.** Built-in [midi player](https://github.com/cifkao/html-midi-player) and visualizer.
+- **LaTeX.** Built-in KaTex plugin.
 - **Disqus** comment system.
 - **CloudFlare** web Analytics.
 - **Forestry.io** headless cms. 

_config.js

@@ -5,6 +5,7 @@ import code_highlight from "lume/plugins/code_highlight.ts";
 import base_path from "lume/plugins/base_path.ts";
 import { parse } from "https://deno.land/std/encoding/yaml.ts";
 import anchor from "https://jspm.dev/markdown-it-anchor";
+import katex from "https://jspm.dev/@iktakahiro/markdown-it-katex"
 
 const text = await Deno.readTextFile("./src/_data/site.yml")
 const data = parse(text)
@@ -16,6 +17,7 @@ const site = lume({
  markdown: {
  plugins: [
  [anchor, { permalink: anchor.permalink.headerLink() }],
+ [katex, {}],
  ],
  }
 });

src/_data/site.yml

@@ -55,5 +55,5 @@ cloudflareWebAnalytics:
 # Lume version this template should work.
 # Check lume-blog-muse github repository to get template for newer lume.
 version:
- lume: 1.0.1
+ lume: 1.1.0
  bulma: 0.9.3

src/_includes/layouts/base.njk

@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title or site.title }}</title>
  <meta name="description" content="{{ description or site.description }}">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET" crossorigin="anonymous">
  {% if site.autoDarkMode %}
  <link rel="stylesheet" href="/css/themeSwitch.css">
  {% elif site.darkMode %}

src/posts/MarkdownExample.md

@@ -152,4 +152,23 @@ Insert MusicXML :
 
 Insert Midi :
 
-<midi-container file="sample" type="piano_roll"><midi-container/>
+<midi-container file="sample" type="piano_roll"><midi-container/>
+
+## LaTeX
+
+Surround your LaTeX with a single $ on each side for inline rendering:
+
+$\\sqrt{3x-1}+(1+x)^2$
+
+Use two ($$) for block rendering. This mode uses bigger symbols and centers the result:
+
+$$\begin{array}{c}
+
+\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
+= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
+
+\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
+
+\nabla \cdot \vec{\mathbf{B}} & = 0
+
+\end{array}$$