Some New Features of TeXt Theme

I started customizing my blog template soon after I forked it from kitian616. The downside of customizing is that once started, there’s no going back.

I saw some new features added to the TeXt theme recently, some of which are quite appealing to me. Since I started custimizing my blog and since I’m a layman of web page design, I have to figure out how to implement these features by myself.

The features I implemented:

  1. Alert Text & Circled Image: These two features are basically simple CSS styling. I added these two features a bit different from the original TeXt theme, since we have different file structures now. But the concept is essentially the same, and I copy-and-pasted most of the code from _article.content.extra.scss of the TeXt theme to _article.content.scss of my blog’s source. I couldn’t figure out what some variables in _article.content.extra.scss refered to, so I changed all of them to plain CSS without refering to other files or variables.

  2. mermaid: Implementing mermaid is much more easy than the CSS things above, since I had experience with how JavaScript works on static sites (MathJax Setup). But I still encountered some difficulties: I don’t know how Tian Qi (author of TeXt theme) implemented it by setting code chunck language to mermaid. Anyway, I dealt with it by using the traditional html way1: using <div class="mermaid"> ... </div> directly in markdown (see section mermaid). I put the mermaid script in mathjax.html instead of creating a new mermaid.html.

Alert Text

Success Text.

Info Text.

Warning Text.

Error Text.

Code

Success Text.
{: .success}

Info Text.
{: .info}

Warning Text.
{: .warning}

Error Text.
{: .error}

kramdown Feature

{: something} is a feature unique to kramdown syntax (the markdown syntax used by Jekyll). It’s very useful for making markdown more powerful. The code (e.g. {: .error} above) works by attaching the class, error to the paragraph right above it (e.g. the paragraph, Error Text., above {: .error}. For more information, take a look at this post, Markdown Kramdown Tips & Tricks.

Circled Image

Code

![](path-to-image){:height="80px" width="80px"} 
{:.circle}

mermaid

mermaid is a script language for generating charts from simple text. Below is an example of drawing a flow chart using mermaid. Documentation for Mermaid.

graph TD; A(text)-->B(rounded); A-->C; B-->D; C-->D;

Code

<div class="mermaid">
graph TD;
    A(text)-->B(rounded);
    A-->C;
    B-->D;
    C-->D;
</div>

Notes

  1. See the section, Simple usage on a web page, in Usage of mermaid documentation.