Merge pull request #71 from welpo/feature/KaTeX-support

✨ feat: add KaTeX support

README.md

@@ -9,6 +9,8 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [
 ## Features
 
 - [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
+- [X] [KaTeX](https://katex.org/) support.
+- [X] All JavaScript (theme switcher and KaTeX) can be fully disabled.
 - [X] Projects page.
 - [X] Archive page.
 - [x] Tags.

content/blog/almost-no-js.md

@@ -1,14 +1,17 @@
 +++
 title = "Almost no JavaScript"
 date = 2023-01-06
+updated = = 2023-04-15
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]
 tags = ["showcase"]
 +++
 
-# Javascript?
+# JavaScript?
 
-This theme has almost no JavaScript. It includes a single ~950 byte `.js` file with the logic for the light/dark mode switch.
+This theme has almost no JavaScript. It includes a ~950 byte `.js` file with the logic for the light/dark mode switch which can be disabled by setting `theme_switcher = false` in the `config.toml` file.
 
-Other than that, it's a fast site with html and css. Just the way (most of) the web should be :-)
+KaTex support, which requires JavaScript, can be activated for specific posts.
+
+Other than that, it's a fast site with HTML and CSS. Just the way (most of) the web should be :-)

content/blog/markdown.md

@@ -1,13 +1,31 @@
 +++
 title = "Markdown examples"
 date = 2023-01-31
-updated = 2023-03-01
+updated = 2023-04-15
 description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes."
 
 [taxonomies]
 tags = ["markdown", "showcase"]
+
+[extra]
+katex = true
 +++
 
+## KaTeX
+
+[KaTeX](https://katex.org/) is a fast and easy-to-use library that enables the rendering of mathematical notation, using LaTeX syntax.
+
+You can use KaTeX **inline** by wrapping the expression between `$` or between `\\(` and `\\)`.
+
+For example, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` would render: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $
+
+To display the expression **on its own line and centered**, wrap it around `$$` or between `\\[` and `\\]`.
+
+For example, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` renders: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]
+
+To activate KaTeX for a post, include `katex = true` within the `[extra]` section of the post's front matter. For enhanced performance and security, the JavaScript, CSS, and fonts are hosted locally.
+
+**Note**: After enabling KaTeX, if you want to use \$ without rendering a mathematical expression, escape it with a single backslash: `\$`.
 
 ## Table
 
@@ -20,7 +38,6 @@ Here's an example of a table[^1]. Its colours change depending on the current th
 | Fe      | Iron    | 26            |
 | Au      | Gold    | 79            |
 
-
 ## Code Block
 
 ```rust

templates/base.html

@@ -21,6 +21,12 @@
         {% endblock main_content %}
     </div>
     {% include "partials/footer.html" %}
+
+    {% if page.extra.katex and page.extra.katex == true %}
+        <link rel="stylesheet" href="{{ get_url(path='katex.min.css', trailing_slash=false) | safe }}">
+
+        <script defer src="{{ get_url(path='js/katex.min.js', trailing_slash=false) | safe }}"></script>
+    {% endif %}
 </body>
 
 </html>