Formatting blog posts

Blot converts text files from Markdown. You can use Markdown to make text bold, italicized, create lists, links and more. You can mix Markdown and HTML in the same file.

Bold and italics

Surrounding text with two asterisks makes text bold:

**This text will be bold.**

To create italics, use a single asterix (*) on either side of the text:

*This text will be italic.*

Both * or _ symbols work to make text bold or italic. This way you can combine bold and italic in the same sentence. For example:

**Everyone _must_ listen.**


You can create headings using the octothorpe (#).

# Largest heading
## Subheading
### Section heading


Create a text link by wrapping the linked text in brackets [ ], and then wrapping the link in parenthesis ( ). For example:



Read the full guide to inserting an image into a post.

Here's the basic Markdown to embed an image:

![Image title](https://url.of/the/image.jpg)


Make a bulleted list by preceding list items with a single asterix (*) or a hyphen (-). You need a space between the asterix and the text.

- Round
- Shell
- Projectile

Create a numbered list by preceding list items with a number.

1. Eins
2. Deux
3. Tres


You can specify footnotes using this syntax.[^1] Another line with a different footnote.[^2]

[^1]: And the note goes here.
[^2]: And the second goes here too.


Blot will convert equations set in LaTeX. Wrap your LaTeX in two dollar signs ($) like this:

$$ f(x) = 2x^2 + 2/3 $$

Strike out text

Put a double tilde (~) on either side of the text you want to strikethrough:

~~Strike out mistakes~~


Blot automatically converts plain URLs to Youtube and Vimeo videos into video embeds. To embed a youtube video in your blog post just paste its URL like this:

You can also paste the HTML for a video embed directly into a blog post if you prefer.


Indent code with four spaces:

    var foo = “bar”;

You can also wrap code with three backticks (`). Enable syntax highlighting like this:

var foo = "bar";

You can customize your code's syntax highlighting by modifying the highlight.js CSS file which comes with your blog's template.


I wrote a Markdown extension for Blot which provides basic layout shortcuts. Your blog's template controls how the layout HTML is ultimately styled. Most Blot templates come with a variation on layout.css which provides the following features:

The tag… should make its contents... by applying this CSS class…
{<<} extend into the left margin wide left
{>>} extend into the right margin wide right
{<>} extend into both margins wide
{>} float right inside the page right inside
{<} float left inside the page left inside
{|<} hang in the right margin right margin
{>|} hang in the left margin left margin
{||} sit inside a 1/2 width column two column
{|||} sit inside a 1/3 width column three column
{||||} sit inside a 1/4 width column four column

You can including multiple lines inside the same layout tag by indenting them:

{<<} ## Title which extends into left margin
     Line which also extends into the left margin.

{>>} ## Title which extends into right margin
     Line which also extends into the right margin.