Markdown

There are many guides for how to write markdown online. They can vary slightly as markdown comes in many flavours. Most things are the same no matter what guide you find. The site is using the Kramdown parser, but guides like this one is useful nonetheless.

See pages/markdown.md for the raw Markdown of this page.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Heading with custom id

It’s generally best to start page/post headings at h2, since the page/post title will likely already be an <h1> provided by the layout

Paragraphs

Set i won’t void spirit all. Had after called us It wherein Tree in deep abundantly also midst Seed. Beast. Divide sixth fruitful yielding gathered gathering dominion bring beast lights life hath let rule air appear.

Bring let rule creature. Very open hath to years. In second kind. Divide land night. Earth bearing tree lesser likeness likeness won’t. Likeness creature light.

Line breaks

This is the first line.
And this is the second line.

Emphasis

This is bold text

This is italicized text

This is bold italicized text

This is strikethrough text

Blockquotes

Gathering brought him green. Creeping very after hath a, from likeness dry tree moved dry fowl. Our let forth, male dry won’t god. Kind a thing, dominion lights midst him gathering waters fruitful greater god have dry land deep abundantly.

Lists

Unordered list:

• Item 1
• Item 2
• Item 3
  • Subitem 1
  • Subitem 2

Ordered list:

1. Item 1
2. Item 2
3. Item 3
   1. Subitem 1
   2. Subitem 2

Definition list:

term 1

definition 1.1

definition 1.2

term 2

definition 2

Code

Inline code

Indented code:

# Some comments
line 1 of code
line 2 of code
line 3 of code

Fenced code with syntax highlighting:

const greet = (text) => "Hello " + text;

// Test
console.log(greet("world"));

Horizontal rules

Links

link with url

link with title

url: http://www.example.com

See the Jekyll documentation to create internal links.

Tables

Aligned columns:

Table overflow

Tables have a tendency to grow large and hence overflow on smaller screens.

<div class="overflow-auto" style="white-space: nowrap;" markdown="block">

| Tables        | Are           | Cool  | Tables        | Are           | Cool  | Tables        | Are           | Cool  | Tables        | Are           | Cool  
| ------------- |:-------------:| -----:| ------------- |:-------------:| -----:| ------------- |:-------------:| -----:| ------------- |:-------------:| -----:
| col 3 is      | right-aligned | $1600 | col 3 is      | right-aligned | $1600 | col 3 is      | right-aligned | $1600 | col 3 is      | right-aligned | $1600 
| col 2 is      | centered      |   $12 | col 2 is      | centered      |   $12 | col 2 is      | centered      |   $12 | col 2 is      | centered      |   $12 
| zebra stripes | are neat      |    $1 | zebra stripes | are neat      |    $1 | zebra stripes | are neat      |    $1 | zebra stripes | are neat      |    $1 

</div>

You might want to add some additional styling to your table, such as white-space: nowrap; but that depends on the usecase. See styling section for more on custom styles.

Footnotes

Here’s a sentence with a footnote. ¹

Images

Figure with caption

Centered

Inline

You can add inline images by appending {: .inline-left } or {: .inline-right } if you need an inline image in the middle of your paragraph.

Set i won’t void spirit all. Had after called us It wherein Tree in deep abundantly also midst Seed. Beast. Divide sixth fruitful yielding gathered gathering dominion bring beast lights life hath let rule air appear.

Set i won’t void spirit all. Had after called us It wherein Tree in deep abundantly also midst Seed. Beast. Divide sixth fruitful yielding gathered gathering dominion bring beast lights life hath let rule air appear.

Clear

If you need to clear space after the paragraph, then you can set a clearfix class above the paragraph: {: .is-clearfix }.

Then this paragraph won’t slide up and be wrapped aound the picture.

See the the links section to learn how to reference your own images and documents.

Video

Styling content

With the Kramdown Markdown parser that Jekyll uses, you can add css classes to your content (see this blog post). The theme is build using Bulma So you can use classes from Bulma to style your content. If that doesn’t fit your needs, you can always write html in your Markdown and add your own css on /_sass/_main.scss.

Notification

Using the Bullma documentation we can add a notification

Alert info message. This paragraph is styled by prepending it with {: .notification .is-primary }.

Alert info message. This paragraph is styled by prepending it with {: .notification .is-danger }.