-
-
---
-## Demo
+**[View demo](https://abridge.netlify.app/)**
-[https://abridge.netlify.app/](https://abridge.netlify.app/)
+
## Requirements
@@ -85,8 +83,14 @@ The result should be:
theme = "abridge"
[markdown]
extra_syntaxes_and_themes = ["highlight_themes", "themes/abridge/highlight_themes"]
+highlight_code = true
+highlight_theme = "css"
```
+By default abridge uses `highlight_theme = "css"`.
+
+This allows the code block light/dark mode to change with the rest of the site, this also prevents unsafe-inline for style-src in our CSP.
+
### Step 4: Add new content
You can copy the content from the theme directory to your project:
@@ -114,6 +118,8 @@ You can customize your configurations, templates and content for yourself. Look
at the `config.toml`, `content` files, and templates files in this
repo for an idea.
+Abridge does support a theme switcher for dark/light mode, but it is disabled by default because it reuires additional javascript.
+
### Number of Items per page for pagination
To change the number of items per page edit: `abridge/content/_index.md` and change the value for `paginate_by`
@@ -131,10 +137,11 @@ $mb:1200px !default;// value at which to switch from fluid layout to using max-w
Colors and style are handled by the sass files of [abridge.css](https://github.com/jieiku/abridge.css)
-Abridge comes with two "Skins" each with their own auto, dark, and light modes.
+Abridge comes with "Skins" each with their own auto, dark, light and switcher modes.
Auto mode automatically displays a dark or light version depending on browser/OS settings.
+Switcher mode automatically displays a dark or light version depending on browser/OS settings, and has a user clickable theme switcher, but it requires additional javascript.
-The skin used on [the Demo](https://abridge.netlify.app/) uses primarily orange colors.
+The skin used on [the Demo](https://abridge.netlify.app/) uses primarily orange colors, it the auto without the switcher.
It is defined here: `/themes/abridge/sass/abridge.scss`
There is also other variations, that you will see defined in this same directory.
@@ -142,6 +149,26 @@ There is also other variations, that you will see defined in this same directory
To change colors or fonts all you need to do is edit these files or duplicate them and create your own skin.
Then in the root of your site type `zola build` which will regenerate your site, this is similar to what zola serve does, except it does not facilitate serving the site.
+### Javascript Files, js_bundle and options
+
+These are the javascript files currently used by Abridge:
+
+- search_index.en.js: search index generated by zola at each build for elasticlunr.
+- elasticlunr.min.js: search library for client side searching.
+- search.js: to make use of elasticlunr from our sites search box for both suggestions and the results page.
+- theme.js: very tiny script to facilitate local storage for the theme switcher. (never bundle, gets loaded separate)
+- theme_button.js: tiny script for the theme switcher function when you click the theme switch button.
+- prestyle.js: Used to preload css files `` ...etc so that we basically render it during the build process. If complex mathematics were part of my daily life then I might be motivated to write such code for Zola.
+You can see a demo of this here [this page](https://abridge.netlify.app/overview-math/).
-You will also see [this page](https://abridge.netlify.app/overview-math/) rendered correctly if you git clone this repo and use zola serve because then there will be no Content Security Policy in place.
+I recommend only enabling math on a per page bases in your post.md files, instead of in your main config.toml file.
### Templates
All pages extend to `base.html`, and you can customize them as need.
-## Optional Optimizations:
+## Optional Performance Optimizations:
+
+### Theme-Switcher
+
+The theme switcher relies on javascript to work, it applies the .light class to the root documentElement. The file that handles this (theme.js) is tiny and optimized and it is the first file loaded in the head, so the performance hit is minimal, but it does still exist. Without the Theme switcher you can still use The automatic Theme, it works by using Browser/OS preference and works well enough for me, you can even install a [Firefox plugin](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-firefox/) to quickly switch between the two. By default the demo has the theme switcher enabled so that it can be evaluated.
+
+With the growing number of options and configuration it can get confusing. To disable the Theme Switcher, you would comment out the Switcher section and enable your choice in the No switcher section, for example:
+
+```toml
+########## Switcher ########## (comment this block out if NOT using switcher):
+#js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher)
+#js_themeButton = "theme_button.js"# Bundleable
+#js_bundle = "abridge-switcher.min.js"# Bundle JS File, comment out to disable (includes switcher)
+#stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
+#stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher
+#stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher
+
+########## No Switcher ##########
+#js_bundle = "search.min.js"# Bundle JS File, comment out to disable (search only: no switcher/prestyle)
+js_bundle = "abridge.min.js"# Bundle JS File, comment out to disable (no switcher)
+stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference
+```
### Optimize PNG files:
@@ -311,22 +359,38 @@ cd static
oxipng -o max --strip all -a -Z *.png
```
-### Consolidate two search js files into one:
-
-Optionally you can serve a single js file for the search instead of a separate index by combining the two:
-(although I am not sure how to accomplish this if your using the theme as a submodule, maybe you can use a git action for this command depending on your hosting provider.)
-
-First comment out this line in config.toml:
+You can go even farther if you use leanify:
+
+git clone https://github.com/JayXon/Leanify
+cd Leanify
+make
+sudo cp leanify /usr/local/bin/leanify
+exit #launch new terminal
+leanify -i 7777 *.{png,ico}
+
+Here is the results of using leanify on files previously processed with oxipng:
+
+Processing: android-chrome-192x192m.png
+2.23 KB -> 2.22 KB Leanified: 11 B (0.48%)
+Processing: android-chrome-192x192.png
+2.51 KB -> 2.48 KB Leanified: 33 B (1.28%)
+Processing: android-chrome-512x512.png
+5.49 KB -> 5.25 KB Leanified: 241 B **(4.29%)**
+Processing: apple-touch-icon.png
+2.57 KB -> 2.54 KB Leanified: 30 B (1.14%)
+Processing: banner.png
+13.07 KB -> 12.93 KB Leanified: 138 B (1.03%)
+Processing: mstile-150x150.png
+2.24 KB -> 2.20 KB Leanified: 38 B (1.66%)
+Processing: favicon-16x16.png
+559 B -> 366 B Leanified: 193 B **(34.53%)**
+Processing: favicon-32x32.png
+969 B -> 663 B Leanified: 306 B **(31.58%)**
+Processing: favicon.ico
+2.59 KB -> 1.90 KB Leanified: 703 B **(26.53%)**
+
+Google lighthouse will often notice when your pictures could be more compressed, this may even help SEO.
-```toml
-#js_search_index ="search_index.en.js
-```
-
-Then build and uglifyjs:
-```bash
-zola build
-uglifyjs search_index.en.js search.min.js -o search.min.js -c -m
-```
### Pre gzip content to serve with nginx:
@@ -349,12 +413,15 @@ gzip_types text/plain text/css application/json application/javascript text/xml
#gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
```
-Then you can gzip your files:
+Then you can gzip/brotli your files:
```bash
zola build
-find ./public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip -k -9 -f {} \;
+find ~/.dev/abridge/public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip --best -k -f {} \+ -exec brotli --best -f {} \;
+rsync -zvrh ~/.dev/abridge/public/ web:/var/www/abridge
```
+Nginx does not come by default with brotli support, but adding it was not difficult.
+
## Reporting Issues
We use GitHub Issues as the official bug tracker for **abridge**.
diff --git a/config.toml b/config.toml
index b87826d..793a3ea 100644
--- a/config.toml
+++ b/config.toml
@@ -65,14 +65,12 @@ headhr = false # show or hide horizontal rule below header
foothr = true # show or hide horizontal rule above footer
menu = [
- {url = "/", name = "Home", slash = true},
{url = "/about/", name = "About", slash = true},
{url = "/posts/", name = "Posts", slash = true},
{url = "/categories/", name = "Categories", slash = true},
{url = "/tags/", name = "Tags", slash = true},
]
menu_footer = [
- {url = "/", name = "Home", slash = true},
{url = "/about/", name = "About", slash = true},
{url = "/contact/", name = "Contact", slash = true},
{url = "/privacy/", name = "Privacy", slash = true},
@@ -86,22 +84,47 @@ menu_footer = [
#security_header_referrer = "strict-origin-when-cross-origin"
-#security_header_csp = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; img-src 'self' data: cdn.cloudflare.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com; script-src 'self' www.youtube-nocookie.com player.vimeo.com"
+#security_header_csp = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
#################
# Resource Files
#################
-banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
-js_search_index = "search_index.en.js"
-js_search = "search.min.js"
-stylesheet = "abridge.css" # location and file to use for stylesheet:
-# abridge.css - Orange Automatic Dark/Light Theme based on browser/system preference.
-# abridge-dark.css - Orange Dark Theme
-# abridge-light.css - Orange Light Theme
-# abridge-blue.css - Blue Automatic Night/Light Theme based on browser/system preference.
-# abridge-bluelight.css - Blue Light Theme
-# abridge-bluenight.css - Blue Dark Theme
+js_search_index = "search_index.en.js" # Separate Always, generated each build
+js_prestyle = "prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts
+js_search = [ "elasticlunr.min.js", "search.js" ]# Bundleable
+
+########## Switcher ########## (comment this block out if NOT using switcher):
+js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher)
+js_themeButton = "theme_button.js"# Bundleable
+js_bundle = "abridge-switcher.min.js"# Bundle JS File, comment out to disable (includes switcher)
+stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
+#stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher
+#stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher
+
+########## No Switcher ##########
+#js_bundle = "search.min.js"# Bundle JS File, comment out to disable (search only: no switcher/prestyle)
+#js_bundle = "abridge.min.js"# Bundle JS File, comment out to disable (no switcher)
+#stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference
+#stylesheets = [ "abridge-blue.css" ] # Blue Automatic Night/Light Theme based on browser/system preference
+#stylesheets = [ "abridge-blueshade.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference
+#stylesheets = [ "abridge-dark.css" ] # Orange Dark Theme
+#stylesheets = [ "abridge-light.css" ] # Orange Light Theme
+#stylesheets = [ "abridge-blue-dark.css" ] # Blue Dark Theme
+#stylesheets = [ "abridge-blue-light.css" ] # Blue Light Theme
+#stylesheets = [ "abridge-blueshade-dark.css" ] # BlueShade Dark Theme
+#stylesheets = [ "abridge-blueshade-light.css" ] # BlueShade Light Theme
+#stylesheets = [ "abridge.css", "extra.css" ] # example loading extra css
+
+
+# If you have js_bundle set, then Bundleable js files are ignored (it's assumed you bundled them).
+# You can include whatever js you want in your bundle. just generate your file like below and place in your sites root static directory:
+# cd mysite/themes/abridge/static
+# search: uglifyjs elasticlunr.min.js search.js -o search.min.js -c -m
+# noswitcher: uglifyjs prestyle.js elasticlunr.min.js search.js -o abridge.min.js -c -m
+# ALL: uglifyjs prestyle.js theme_button.js elasticlunr.min.js search.js -o abridge-switcher.min.js -c -m
+# theme: uglifyjs theme.js -o theme.min.js -c -m
+banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
# favicons, comment out a line to disable loading some or all of these.
favicon_theme_color = "#333333"
favicon_ms_color = "#333333"
@@ -115,20 +138,16 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png
# Uncomment below line to load fontawesome, eg:
#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"
-# Externally using googleapis for fonts gets you a Free CDN, AND may already be cached by the end user.
-# Sometimes the font you want is not available by googleapis, or you only want to load local resources.
-# For Locally loaded fonts review: abridge/sass/skins/_abridge_fonts.scss
-
# For externally loaded Fonts, make sure to include the FULL url including the http/https prefix
#fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ]
# Local fonts are defined in the css, defining them here only adds the preload tag to the head.
-# preload will eliminate Content Layout Shift, but will hurt with page load time.
+# preload will eliminate Content Layout Shift, but will hurt with page load time. (not recommended)
#fonts = [
# {url = "font/FiraCode.woff2"},
-# {url = "font/Jost.woff2"},
-# {url = "font/Jost-italic.woff2"},
-# {url = "font/Jost-Bold.woff2"},
+# {url = "font/Roboto.woff2"},
+# {url = "font/Roboto-Italic.woff2"},
+# {url = "font/Roboto-Bold.woff2"},
#]
math = false # katex math js library, used to to render mathematical notations, requires javascript
@@ -143,7 +162,7 @@ katex_css = "katex.min.css" # Fonts - to load the css locally, you also need to
katex_js = "katex.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
mathtex_js = "mathtex-script-type.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
katex_autorender_js = "auto-render.min.js"
-
+katex_options = "katexoptions.js"
##########################
# meta/seo/analytic tags
diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index 408e500..147740c 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -7,7 +7,7 @@ categories = ["Features"]
tags = ["config"]
+++
-Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons, no mandatory JS, and perfect [Lighthouse](https://web.dev/measure/?url=https%3A%2F%2Fabridge.netlify.app) and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores.
+Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect [Lighthouse](https://web.dev/measure/?url=https%3A%2F%2Fabridge.netlify.app) and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores.
For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used.
diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md
index 7a9c835..16c3409 100644
--- a/content/overview-code-blocks.md
+++ b/content/overview-code-blocks.md
@@ -120,12 +120,12 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true));
{
"name": "Abridge Zola Theme",
"short_name": "Abridge",
- "start_url": "https://abridge.netlify.app/",
"description": "Fast & Lightweight Zola Theme",
+ "start_url": "/index.html",
"scope": "/",
- "display": "standalone",
- "theme_color": "#222222",
"background_color": "#111111",
+ "theme_color": "#222222",
+ "display": "standalone",
"icons": [
{
"src": "/android-chrome-192x192.png",
@@ -138,7 +138,7 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true));
"type": "image/png"
},
{
- "src": "/android-chrome-192x192x128m.png",
+ "src": "/android-chrome-192x192m.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
diff --git a/content/overview-math.md b/content/overview-math.md
new file mode 100644
index 0000000..2e704da
--- /dev/null
+++ b/content/overview-math.md
@@ -0,0 +1,112 @@
++++
+title = "Mathematical Notations"
+description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library."
+date = 2021-05-05
+updated = 2022-01-01
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","Mathematics"]
+[extra]
+math = true
+math_auto_render = true
+keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
++++
+
+You can use [KaTeX](https://katex.org) to render mathematical notations.
+
+You can enable the $\KaTeX$ support globally, per-section or per-page basis.
+
+
+## Enable Globally
+
+To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml`
+at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
+
+```toml
+[extra]
+math = true
+math_auto_render = false
+```
+
+## Per-section Basis
+
+To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`.
+Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
+
+```toml
++++
+[extra]
+math = true
++++
+```
+
+## Per-page Basis
+
+To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's
+frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
+
+```toml
++++
+[extra]
+math = true
+math_auto_render = true
++++
+```
+
+It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the
+required files on that particular page, without affecting the page load speed of other pages.
+If your site is not math-heavy, please do NOT enable this feature globally or per-section basis.
+
+## Usage
+
+Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline
+Mathematics and `$$...$$` for block Mathematics.
+
+### Inline Mathematics
+
+This is the most beautiful equation I've ever seen:
+
+### Usage
+```rs
+{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%}
+```
+### Output
+```html
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
+```
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
+
+### Block Mathematics
+
+Some Mathematics in display mode is fair enough:
+
+### Usage
+```rs
+{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%}
+```
+### Output
+```html
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+```
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+
+### Auto Render Inline Example
+```
+$ e^{i\pi}+1=0 $
+```
+
+$ e^{i\pi}+1=0 $
+
+### Auto Render Block Example
+```
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+```
+
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
diff --git a/content/overview-math/index.md b/content/overview-math/index.md
deleted file mode 100644
index 88f5df4..0000000
--- a/content/overview-math/index.md
+++ /dev/null
@@ -1,121 +0,0 @@
-+++
-title = "Mathematical Notations"
-description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library."
-date = 2021-05-05
-updated = 2022-01-01
-[taxonomies]
-categories = ["Features"]
-tags = ["shortcodes","Mathematics"]
-[extra]
-math = true
-math_auto_render = true
-keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
-+++
-
-You can use [KaTeX](https://katex.org) to render mathematical notations.
-
-You can enable the $\KaTeX$ support globally, per-section or per-page basis.
-
-# CSP Note
-
-KaTeX unfortunately requires `script-src 'unsafe-inline'` in the Content Security Policy. This is a security vulnerability, so this page will not render KaTeX correctly because this demo site uses best security practices. I have taken a picture below to show you what some of these formulas look like should you enable KaTeX.
-
-KaTeX js is designed to work even with dynamic content, but because Zola is a SSG it seems to me the best solution is to avoid using this javascript all-together, process our markdown files similar to how KaTeX autorender does, but do it during zola build. insert some `` ...etc so that we basically render it during the build process. If complex mathematics were part of my daily life then I might be motivated to write such code for Zola.
-
-You will also see this page rendered correctly if you git clone this repo and use `zola serve` because then there will be no Content Security Policy in place.
-
-{{ img(src="katex.png" alt="KaTeX" w=568 h=1014) }}
-
-## Enable Globally
-
-To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml`
-at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
-and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
-
-```toml
-[extra]
-math = true
-math_auto_render = false
-```
-
-## Per-section Basis
-
-To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`.
-Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
-and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
-
-```toml
-+++
-[extra]
-math = true
-+++
-```
-
-## Per-page Basis
-
-To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's
-frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
-and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
-
-```toml
-+++
-[extra]
-math = true
-math_auto_render = true
-+++
-```
-
-It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the
-required files on that particular page, without affecting the page load speed of other pages.
-If your site is not math-heavy, please do NOT enable this feature globally or per-section basis.
-
-## Usage
-
-Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline
-Mathematics and `$$...$$` for block Mathematics.
-
-### Inline Mathematics
-
-This is the most beautiful equation I've ever seen:
-
-### Usage
-```rs
-{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%}
-```
-### Output
-```html
-{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
-```
-{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
-
-### Block Mathematics
-
-Some Mathematics in display mode is fair enough:
-
-### Usage
-```rs
-{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%}
-```
-### Output
-```html
-{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
-```
-{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
-
-### Auto Render Inline Example
-```
-$ e^{i\pi}+1=0 $
-```
-
-$ e^{i\pi}+1=0 $
-
-### Auto Render Block Example
-```
-$$
-f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-$$
-```
-
-$$
-f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-$$
diff --git a/content/overview-math/katex.png b/content/overview-math/katex.png
deleted file mode 100644
index acfb6ac..0000000
Binary files a/content/overview-math/katex.png and /dev/null differ
diff --git a/dist/syntect.css b/dist/syntect.css
new file mode 100644
index 0000000..4c0e4b0
--- /dev/null
+++ b/dist/syntect.css
@@ -0,0 +1 @@
+.z-code{color:#bfbab0;background-color:#191919}.z-comment,.z-punctuation.z-definition.z-comment{color:#798491;font-style:italic}.z-variable{color:#bfbab0}.z-string,.z-constant.z-other.z-symbol{color:#c2d94c}.z-constant.z-numeric{color:#f29718}.z-string.z-regexp,.z-constant.z-character.z-escape{color:#95e6cb}.z-constant.z-language{color:#f29718}.z-constant.z-character,.z-constant.z-other{color:#f29718}.z-variable.z-member{color:#ff7d82}.z-keyword,.z-keyword.z-operator.z-word{color:#00bbff}.z-keyword.z-operator{color:#f29668}.z-punctuation.z-separator,.z-punctuation.z-terminator{color:#bfbab0}.z-punctuation.z-section{color:#bfbab0}.z-punctuation.z-accessor{color:#f29668}.z-punctuation.z-definition.z-annotation{color:#bfbab0}.z-variable.z-other.z-dollar.z-only.z-js,.z-variable.z-other.z-object.z-dollar.z-only.z-js,.z-variable.z-type.z-dollar.z-only.z-js,.z-support.z-class.z-dollar.z-only.z-js{color:#e6b673}.z-storage{color:#00bbff}.z-storage.z-type{color:#00bbff}.z-entity.z-name.z-function{color:#ffb454}.z-entity.z-name,.z-entity.z-name.z-tag,.z-entity.z-name.z-label{color:#59c2ff}.z-entity.z-other.z-inherited-class{color:#59c2ff;text-decoration:underline}.z-variable.z-parameter{color:#f29718}.z-variable.z-language{color:#39bae6;font-style:italic}.z-entity.z-name.z-tag,.z-meta.z-tag.z-sgml{color:#39bae6}.z-punctuation.z-definition.z-tag.z-end,.z-punctuation.z-definition.z-tag.z-begin,.z-punctuation.z-definition.z-tag{color:#39bae6}.z-entity.z-other.z-attribute-name{color:#ffb454}.z-variable.z-function,.z-variable.z-annotation{color:#ffb454}.z-support.z-function,.z-support.z-macro{color:#fe7d83}.z-support.z-constant{color:#f29668;font-style:italic}.z-support.z-type,.z-support.z-class{color:#39bae6;font-style:italic}.z-invalid{color:#ff7c6d}.z-invalid.z-deprecated{color:#ffffff;background-color:#00bbff}.z-meta.z-diff,.z-meta.z-diff.z-header{color:#c594c5}.z-source.z-ruby .z-variable.z-other.z-readwrite{color:#ffb454}.z-source.z-css .z-entity.z-name.z-tag,.z-source.z-sass .z-entity.z-name.z-tag,.z-source.z-scss .z-entity.z-name.z-tag,.z-source.z-less .z-entity.z-name.z-tag,.z-source.z-stylus .z-entity.z-name.z-tag{color:#59c2ff}.z-source.z-css .z-support.z-type,.z-source.z-sass .z-support.z-type,.z-source.z-scss .z-support.z-type,.z-source.z-less .z-support.z-type,.z-source.z-stylus .z-support.z-type{color:#798491}.z-support.z-type.z-property-name{color:#39bae6}.z-constant.z-numeric.z-line-number.z-find-in-files{color:#798491}.z-constant.z-numeric.z-line-number.z-match{color:#00bbff}.z-entity.z-name.z-filename.z-find-in-files{color:#c2d94c}.z-message.z-error{color:#ff7c6d}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json,.z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string{color:#39bae6}.z-markup.z-heading{color:#00bbff;font-weight:bold}.z-string.z-other.z-link,.z-markup.z-underline.z-link{color:#95e6cb;text-decoration:underline;font-style:italic}.z-punctuation.z-definition.z-image{color:#ffb454}.z-markup.z-italic{color:#fe7d83;font-style:italic}.z-markup.z-bold{color:#fe7d83;font-weight:bold}.z-markup.z-italic .z-markup.z-bold,.z-markup.z-bold .z-markup.z-italic{font-weight:bold;font-style:italic}.z-markup.z-raw{background-color:#bfbab0}.z-markup.z-raw.z-inline{background-color:#bfbab0}.z-meta.z-separator{color:#798491;background-color:#bfbab0;font-weight:bold}.z-markup.z-quote{color:#f29718;font-style:italic}.z-markup.z-list.z-numbered.z-bullet,.z-markup.z-list .z-punctuation.z-definition.z-list_item{color:#95e6cb}.z-markup.z-inserted{color:#c2d94c}.z-markup.z-changed{color:#39bae6}.z-markup.z-deleted{color:#fe7d83}.z-markup.z-strike{color:#e6b673}.z-markup.z-table{color:#39bae6;background-color:#bfbab0}.z-text.z-html.z-markdown .z-markup.z-raw.z-inline{color:#f29668}.z-text.z-html.z-markdown .z-meta.z-dummy.z-line-break{color:#798491}.z-markup.z-raw.z-block.z-fenced.z-markdown{color:#bfbab0;background-color:#bfbab0}.z-punctuation.z-definition.z-fenced.z-markdown,.z-variable.z-language.z-fenced.z-markdown{color:#798491;background-color:#bfbab0}.z-variable.z-language.z-fenced.z-markdown{color:#798491}.z-markup.z-inserted.z-git_gutter{color:#c2d94c}.z-markup.z-changed.z-git_gutter{color:#39bae6}.z-markup.z-deleted.z-git_gutter{color:#ff7c6d}.z-markup.z-ignored.z-git_gutter{color:#20272c}.z-markup.z-untracked.z-git_gutter{color:#20272c}.z-gutter_color{color:#ffffff}.z-acejump.z-label.z-blue{color:#ffffff;background-color:#39bae6}.z-acejump.z-label.z-green{color:#ffffff;background-color:#c2d94c}.z-acejump.z-label.z-orange{color:#ffffff;background-color:#00bbff}.z-acejump.z-label.z-purple{color:#ffffff;background-color:#fe7d83}.z-sublimelinter.z-mark.z-warning{color:#39bae6}.z-sublimelinter.z-gutter-mark{color:#ffffff}.z-sublimelinter.z-mark.z-error{color:#ff7c6d}
diff --git a/highlight_themes/abridge-light.tmTheme b/highlight_themes/abridge-light.tmTheme
index 95a9157..e102160 100644
--- a/highlight_themes/abridge-light.tmTheme
+++ b/highlight_themes/abridge-light.tmTheme
@@ -20,23 +20,23 @@