Demo link: https://jeffatoptics.github.io/jeff-minima/readme.html

look at below GIF file in https://jeffatoptics.github.io/jeff-minima/readme.html

jeff-minima

Purpose

Enhance jekyll/minima template with the support of katex/mathjax equation and mermaid diagram:

  • Enable katex /mathjax math support with math: katex or math: mathjax in page front matter. Disable it by removing the above words.

  • Enable the mermaid support with mermaid: default mermaid: dark mermaid: base or mermaid: neutral theme in page front matter. Disable it by removing the above words.

  • make a category page to auto display the notes by their category attributes

Major changes from the jekyll/minima

  1. Add the codes in custom-head.html to support katex/mathjax and mermaid in _includes folder

  2. Add a category page

Minor changes

They are related to the theme layout and color:

  1. set the minima content-width to 1000px: $content-width in ./_sass/minima/initialize.scss. The default was 800px

  2. adjust the dark scheme font $text-color in ./_sass/minima/initialize.scss to a lighter value as eeeeee. it was bbbbbb $brand-color-light is adjusted from 5% to 35%

  3. add an emoji favicon 🐬 in customer-head.html. you can change it to any emoji or remove the line <link rel="icon"..

  4. copy auto theme code auto.scss from sandervoerman/minima

  5. update the ./_layouts/post.html to display the categries in each post page.

Usage

  1. copy all the files to the local folder.
  2. customizing the author name email description skin in _config.yml. skin are typically classic,dark,solarized-dark and solarized
  3. customizing the index.md
  4. delete the markdown template files in _posts folder, and input your own markdown with name “yyyy-mm-dd-topic.md”
  5. delete the images in assets folder, and put your own, and link them with _post markdown files
  6. remove or customize the md files in root, i.e. about.md header1.md readme.md and [index_simple.md]

Syntax in your notes

  1. katex is using $ <latex> $ as inline equation, $$ <latex> $$ and

     $$
 <latex>
 $$

    for math block.

  2. mathjax is using $ <latex> $ and $$ <latex> $$ for inline, and

     $$
 <latex>
 $$

  3. mermaid is using the syntax with <div>.

     <div class="mermaid">
 graph LR;
 A-->B;
 </div>

  4. link syntax recommendation jekyll liquid syntax always works, but I would recommend to use markdown relative syntax as much as possible to align to local markdown editor. Examples:

    • [link to a file in post](/jeff-minima/markdown/2022/03/26/markdown-content-styles.html)
    • ![link to a file in asset](../assets/images/dolphin.jpg)
    • ![](../assets/images/dolphin.jpg){: width="250"}

Acknowledgement

  1. Auto theme code from sandervoerman/minima

  2. mathjax code is from link https://zhuanlan.zhihu.com/p/36302775

  3. katex reference: https://www.xuningyang.com/blog/2021-01-11-katex-with-jekyll/

  4. Mermaid reference: