This is a quick cheatsheet for stylizing Jekyll blog posts. Jekyll uses Markdown for formatting, so all the Markdown commands work in Jekyll. There are also some additional things one can do with Jekyll.

Table of Contents

Headers

The largest header is a single #. For subsequently smaller headers, add another #

# Main header
## Secondary header
### Tertiary header...

Main header

Secondary header

Tertiary header…

Emphasis

*Single asterisk for italics*

**Double asterisk for bold**

***Triple asterisk for bold and italics***

Single asterisk for italics

Double asterisk for bold

Triple asterisk for bold and italics

Code

Use a grave accent “`” for code (it’s to the left of 1 on your keyboard)

You can also use triple grave accents for block code and specify the language:

<html>
  <head>
  </head>
  <body>
    <p>Hello, World! I am HTML </p>
  </body>
</html>

Here’s the Jekyll way to do it:

for i in range(10):
    print(i)

HTML tags

You can also use HTML tags. <b>Bold with HTML</b> gives you:

Bold with HTML

Lists

  • Dash with a space for an unordered list (bullets)
  • It works really well

The way ordered lists are down in Markdown is a bit quirky in my opinion. They are created as follows:

1. Step one
2. Step two
3. Step three

However, it doesn’t actually matter what the numbers are, so you can also just use 1. for each item. This makes it easier to add something into the middle of the list and everything else automatically updates.

1. Do this
1. Then do this
1. And finally this
  1. Do this
  2. Then do this
  3. And finally this

Bullets

* Use an asterisk and a space to make a bullet
  * Enter two spaces before the asterisk to make a subbullet
    * And four to make a subsubbullet
  • Use an asterisk and a space to make a bullet
    • Enter two spaces before the asterisk to make a subbullet
      • And four to make a subsubbullet

Links

[This Blog](https://jss367.github.io/)

This Blog

Images

![title](images/image.jpg "text for mouse scroll over")

For example:

![emu](/assets/img/neural_style/emu.jpg "Picture of an emu")

produces this:

emu

If you need more control over it (such as adjusting the size) you can always use standard HTML

<img src="/assets/img/neural_style/emu.jpg" alt="Drawing" style="width: 400px;"/>

Drawing

Tables

Content | Style | Result :-------------------------:|:-------------------------: |:-------------------------: ![eagle](/assets/img/neural_style/wedge-tailed_eagle.jpg) | ![scream](/assets/img/neural_style/vangogh_self.jpg) | ![Neural style emu](/assets/img/neural_style/neural_eagle.gif)

Content Style Result
eagle scream Neural style emu

Here’s another way to do a table specifically with Jekyll:

Address City Zip Code State
123 Main St. Best City 12345 AB
124 Main St. Best City 12345 AB
125 Main St. Best City 12345 AB

Or you could do it in HTML like this:

<table width="30%"> <tr> <td><img src="/assets/img/neural_style/wedge-tailed_eagle.jpg"></td> <td><p align="center"><img src="/assets/img/neural_style/vangogh_self.jpg"></p></td> <td align="right"><img src="/assets/img/neural_style/neural_eagle.gif"></td> </tr>

Mathematical Formulas

You can use LaTeX to write beautiful mathematical formulas. They can be in-line like \(\sum_{k=0}^{n-1} e^{2 \pi i \frac{k}{n}} = 0\) or they can have their own line:

\[\nabla \cdot \mathbf{E} = \frac {\rho} {\varepsilon_0}\] \[\nabla \cdot \mathbf{B} = 0\] \[\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}} {\partial t}\] \[\nabla \times \mathbf{B} = \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}} {\partial t} \right)\]

You simply need to put $$ around your equations. The theme I use relies on KaTeX.

Citations

This is a sentence with a citation1. Go to this StackOverflow question to see how to set them up.

  1. John Smith, A Title About Citations ↩