A demo of Markdown and HTML includes many things

Elements

Tools added by Weilei for this site

display math

use front matter use-math: true. e.g. $ y=ax+b$

\begin{equation} y=ax+b \end{equation} \begin{align} M=a \\ M=b \end{align} \begin{array}{cc} a & b\\ c & 2 \end{array}

_e.g._ $ y=ax+b$

$$ y=f(x) $$

\begin{equation} y=ax+b \end{equation}
\begin{align} M=a \\\\ M=b \end{align}
\begin{array}{cc} a & b\\\\ c & 2 \end{array}

Citations

default bib file is _bibliography/reference.bib

(Zeng & Pryadko, 2019)

  1. Zeng, W., & Pryadko, L. P. (2019). Higher-Dimensional Quantum Hypergraph-Product Codes with Finite Rates. Physical Review Letters, 122(23), 230501. https://doi.org/10.1103/PhysRevLett.122.230501 DOI
  2. Zeng, W., Ashikhmin, A., Woolls, M., & Pryadko, L. P. (2019). Quantum convolutional data-syndrome codes. 2019 IEEE 20th International Workshop on Signal Processing Advances in Wireless Communications (SPAWC), 1–5. https://doi.org/10.1109/SPAWC.2019.8815487 DOI
<a class="citation" href="#zeng2019higher">(Zeng &amp; Pryadko, 2019)</a>

<ol class="bibliography"><li><span id="zeng2019higher">Zeng, W., &amp; Pryadko, L. P. (2019). Higher-Dimensional Quantum Hypergraph-Product Codes with Finite Rates. <i>Physical Review Letters</i>, <i>122</i>(23), 230501. https://doi.org/10.1103/PhysRevLett.122.230501</span>
<a href="https://doi.org/10.1103/PhysRevLett.122.230501">DOI</a> 
</li>
<li><span id="zeng2019convolutional">Zeng, W., Ashikhmin, A., Woolls, M., &amp; Pryadko, L. P. (2019). Quantum convolutional data-syndrome codes. <i>2019 IEEE 20th International Workshop on Signal Processing Advances in Wireless Communications (SPAWC)</i>, 1–5. https://doi.org/10.1109/SPAWC.2019.8815487</span>
<a href="https://doi.org/10.1109/SPAWC.2019.8815487">DOI</a> 
</li></ol>

original guide here

format converter


After title Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A small element

A link

Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in A link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt italicised text in culpa qui officia deserunt mollit anim id some code est laborum.

  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five

A simple blockquote

Some HTML…

<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
  <p>You planning a vacation, Mr. Sullivan?</p>
  <footer>
    <a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101">Sunways Security Guard</a>
  </footer>
</blockquote>

…CSS…

blockquote {
  text-align: center;
  font-weight: bold;
}
blockquote footer {
  font-size: .8rem;
}

…and JavaScript

const blockquote = document.querySelector("blockquote")
const bolden = (keyString, string) =>
  string.replace(new RegExp(keyString, 'g'), '<strong>'+keyString+'</strong>')

blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML)

Single line of code

HTML Includes

Contact form

Contact
* indicates a required field
{% include site-form.html %}

Demo map embed

{% include map.html id="XXXXXX" title="Coffee shop map" %}

Button include

A button

A button with icon 

{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon" link="https://twitter.com/daviddarnes" icon="twitter" %}

Icon include

twitter

{% include icon.html id="twitter" title="twitter" %}
[{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes)

Video include

{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}

Image includes

Image with caption
Image with caption
Right aligned image
Right aligned image
Left aligned image
Left aligned image
Image with just alt text
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %}