typography.md

layout	post
title	Typography of this Website

• To {:toc}

Basic Syntax

This website uses kramdown as the basic syntax. However, a lot of html/css/js has been applied to generate some certain contents or styles.

Math also follows the kramdown syntax.

Notes div

{% highlight html %}

Some notes here, with markdown support

This is success text

This is warning text

This is error text

{% endhighlight %}

Please beware that with `markdown="1"` the content and div tags have to be on different lines.

Figure with Caption

{% highlight html %}

 inspect($('.sidebar')) {% endhighlight %}

Please determine the path of the image according to the path of the post itself. Otherwise, an absolute path can be specified,

![]({{ site.url }}/assets/programming/chrome-dev-tools-inspect.png)

where {{ site.url }} is the configured url of the site.

Alternatively, we can use the set attributes syntax in kramdown.

{% highlight md %} This is a paragraph with some class. The class is specified in the end of the paragraph. {: .notes--warning} {% endhighlight %}

The results shows as a paragraph with the corresponding class. Notice that this only works for one paragraph.

This is a paragraph with some class. The class is specified in the end of the paragraph. {: .notes--warning}

Table of Contents

{% highlight text %}

• ToC {:toc} {% endhighlight %}

is used to generate table of contents.

Footnote

Syntax for footnotes is elaborated more on the website of kramdown.

{% highlight text %} Some text here some other text here.¹

Footnotes

1. Footnote here {% endhighlight %} ↩