Open Metric
Science, Fiction and Me

Typography of this Website

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

<div class="notes--info" markdown="1">
Some notes here, with markdown support
</div>

<div class="notes--success" markdown="1">
This is success text
</div>

<div class="notes--warning" markdown="1">
This is warning text
</div>

<div class="notes--error" markdown="1">
This is error text
</div>

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

Figure with Caption

<figure markdown="1">
![](../assets/programming/chrome-dev-tools-inspect.png)
<figcaption>
inspect($('.sidebar'))
</figcaption>
</figure>

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

![](http://openmetric.org/assets/programming/chrome-dev-tools-inspect.png)

where http://openmetric.org is the configured url of the site.

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

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

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.

Table of Contents

* ToC
{:toc}

is used to generate table of contents.

Footnote

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

Some text here some other text here.[^1]

[^1]: Footnote here

By Lei Ma