Jekyll Markdown examples

February 01, 2017

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve or bundle exec jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

A better way to higlight is to just use the language name after the first three backticks:

import numpy as np
a = np.linspace(0, 1, 10)
print(a**2)

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

Trying out some maths: \(\int_0^1 x^2 dx\) (would not work without MathJax plugin, mathjax: true in front matter)

Also, we can write:-

\[sin(x) = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots\]

Heading Two (h2)

Heading Three (h3)

Heading Four (h4)

Heading Five (h5)

Blockquotes

Single line

My mom always said life was like a box of chocolates. You never know what you’re gonna get.

Multiline

What do you get when you cross an insomniac, an unwilling agnostic and a dyslexic?

You get someone who stays up all night torturing himself mentally over the question of whether or not there’s a dog.

– Hal Incandenza

Horizontal Rule

Table

Title 1	Title 2	Title 3	Title 4
First entry	Second entry	Third entry	Fourth entry
Fifth entry	Sixth entry	Seventh entry	Eight entry
Ninth entry	Tenth entry	Eleventh entry	Twelfth entry
Thirteenth entry	Fourteenth entry	Fifteenth entry	Sixteenth entry

Code

Source code can be included by fencing the code with three backticks. Syntax highlighting works automatically when specifying the language after the backticks.

```javascript
function foo () {
    return "bar";
}
```

This would be rendered as:

function foo () {
    return "bar";
}

Lists

Unordered

First item
Second item
Third item
- First nested item
- Second nested item

Ordered

First item
Second item
Third item
1. First nested item
2. Second nested item

MathJax

You can enable MathJax by setting mathjax: true on a page or globally in the _config.yml. Some examples:

Note: Begin align does not work without the fleqn option in the _config.yml.

Fine man

Euler’s formula relates the complex exponential function to the trigonometric functions.

\[e^{i\theta}=\cos(\theta)+i\sin(\theta)\]

The Euler-Lagrange differential equation is the fundamental equation of calculus of variations.

\[\frac{\mathrm{d}}{\mathrm{d}t} \left ( \frac{\partial L}{\partial \dot{q}} \right ) = \frac{\partial L}{\partial q}\]

The Schrödinger equation describes how the quantum state of a quantum system changes with time.

\[i\hbar\frac{\partial}{\partial t} \Psi(\mathbf{r},t) = \left [ \frac{-\hbar^2}{2\mu}\nabla^2 + V(\mathbf{r},t)\right ] \Psi(\mathbf{r},t)\]

Code

Embed code by putting {% highlight language %} {% endhighlight %} blocks around it. Adding the parameter linenos will show source lines besides the code.

static void asyncEnabled(Dict* args, void* vAdmin, String* txid, struct Allocator* requestAlloc)
{
    struct Admin* admin = Identity_check((struct Admin*) vAdmin);
    int64_t enabled = admin->asyncEnabled;
    Dict d = Dict_CONST(String_CONST("asyncEnabled"), Int_OBJ(enabled), NULL);
    Admin_sendMessage(&d, txid, admin);
}

Gists

With the jekyll-gist plugin, which is preinstalled on Github Pages, you can embed gists simply by using the gist command:

Images

Upload an image to the assets folder and embed it with ![title](/assets/name.jpg)). Keep in mind that the path needs to be adjusted if Jekyll is run inside a subfolder.

A wrapper div with the class large can be used to increase the width of an image or iframe.

Black Hole 1

Black Hole

This will also work for image resizing

Black Hole

Flower

Flower by Tj Holowaychuk

Embedded content

You can also embed a lot of stuff, for example from YouTube, using the embed.html include.