Introduction Documentation Philosophy Updates Contact

References and guides

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.

You can create your own metadata and access it in your blog’s template.

Here is the full list of Blot’s native metadata:

Metadata properties Example
Draft /sample-post
Page /blog/sample-post
Menu /2017/sample-post
Permalink /2017/10/3/sample-post
URL Alias of the Permalink property
Draft: no
Page: no
Menu: no
Permalink: apple
Url: apple
Date: 1/2/2020
Tags: Fruit, Pears
Thumbnail: _apple.png
Title: Apple
Summary: Summary

# Apple

This is the summary.

Draft ‘Yes’ Page ‘Yes’ Menu: ‘Yes’ or ‘No’ Permalink: Url: Date: Tags: Thumbnail: Summary: Title:

You can create a page elsewhere in your blog’s folder by adding Page: yes to the file’s metadata. If you’d like to create a page that isn’t on your blog’s menu, add Menu: no as well.

Blot tries to create a thumbnail from the largest image in a blog post.

You can specify a different thumbnail in the metadata at the top of a file. You can use a URL or a path to a file inside Blot’s folder:

Thumbnail: /_Photos/Apple.jpg

Videos

You can also paste the HTML for a video embed directly into a blog post. Blot also 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:

https://www.youtube.com/watch?v=nkJA6SYwa94

Footnotes

You can specify footnotes using this syntax:

A line with a footnote.[^1] Another line.[^2]

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

Layout

I wrote a Markdown extension for Blot which provides basic layout shortcuts. The features are as follows:

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:

{<<} ## Subtitle which extends into left margin
     A paragraph which will also extend into the left margin.

{>>} ## Subtitle which extends into right margin
     A paragraph which will also extend into the right margin.

Your blog’s template controls how the layout HTML is styled. Most Blot templates come with a variation on layout.css which provides the above features as described.

Bold and Italic

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

*This text will be italic.*
This text will be italic.

Surrounding text with two asterisks makes text bold:

**This text will be bold.**
This text will be bold.

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.**
Everyone must listen.

/[Post] Review.txt | will become a post tagged ‘Post’ /[Review]/[Pear] Fruit.txt | Will become a post tagged ‘Review’, ‘Apple’ and ’Pear. /02.12.2017 Fruit.txt /2017/02/12 Fruit.txt | Will all become posts published on December 2nd, 2017 at midnight

Strikethrough

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

~~Strike out mistakes~~
Strike out mistakes

Lists

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
  • Round
  • Shell
  • Projectile

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

1. Eins
2. Deux
3. Tres
  1. Eins
  2. Deux
  3. Tres

Headings

# Largest heading
## Subheading
### Section heading

Mathematics

Blot will convert equations set in LaTeX. Check out this useful guide. To use this, wrap your LaTeX in two dollar signs (${{x}}$) like this:

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

Images

Here’s what the markdown looks like, note the ‘!’ before the tag.

![alt text](http://example.com/image-url.jpg "Title")

Yes, first create a public folder, e.g. ’_images’, put the image inside then embed the image like this:

![Image title](/_images/image.jpg)

Let’s say your blog has this folder structure:

Blot
 ├─ Posts
 |    ├─ _apple.png
 |    └─ fruit.txt
 └─ _Assets
      └─ peach.png

These images all resolve correctly in fruit.txt:

![Apple](_apple.png)
![Apple](/posts/_apple.png)
![Peach](../_assets/peach.png)

Notice that Blot resolves relative and absolute paths based on your folder structure. File paths are case-insenitive.

Code snippets

Indent code with four spaces:

var foo = “bar”;

You can also wrap code.snippets with three backticks `{{x}}. This is useful for inserting code snippets inside a paragraph.

If you have enabled the syntax highlighting app, Blot will process the snippet using highlight.js. Every Blot template comes with its own syntax highlighting theme. If you are designing a custom blog template and want to use syntax highlighting, please add a theme to your blog’s CSS file.

Token Output
Month M 1 2 … 11 12
Mo 1st 2nd … 11th 12th
MM 01 02 … 11 12
MMM Jan Feb … Nov Dec
MMMM January February … November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 … 30 31
Do 1st 2nd … 30th 31st
DD 01 02 … 30 31
Day of Year DDD 1 2 … 364 365
DDDo 1st 2nd … 364th 365th
DDDD 001 002 … 364 365
Day of Week d 0 1 … 5 6
do 0th 1st … 5th 6th
dd Su Mo … Fr Sa
ddd Sun Mon … Fri Sat
dddd Sunday Monday … Friday Saturday
Day of Week (Locale) e 0 1 … 5 6
Day of Week (ISO) E 1 2 … 6 7
Week of Year w 1 2 … 52 53
wo 1st 2nd … 52nd 53rd
ww 01 02 … 52 53
Week of Year (ISO) W 1 2 … 52 53
Wo 1st 2nd … 52nd 53rd
WW 01 02 … 52 53
Year YY 70 71 … 29 30
YYYY 1970 1971 … 2029 2030
Y 1970 1971 … 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Week Year gg 70 71 … 29 30
gggg 1970 1971 … 2029 2030
Week Year (ISO) GG 70 71 … 29 30
GGGG 1970 1971 … 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 … 22 23
HH 00 01 … 22 23
h 1 2 … 11 12
hh 01 02 … 11 12
k 1 2 … 23 24
kk 01 02 … 23 24
Minute m 0 1 … 58 59
mm 00 01 … 58 59
Second s 0 1 … 58 59
ss 00 01 … 58 59
Fractional Second S 0 1 … 8 9
SS 00 01 … 98 99
SSS 000 001 … 998 999
SSSS … SSSSSSSSS 000[0..] 001[0..] … 998[0..] 999[0..]
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

How to add sharing links to my template

For example, let’s say you wanted to create a contact page for your site. First you’d create a folder called ‘Pages’, then you’d put a file inside containing the page’s content, just like you would for a blog post.

How to embed an image in a blog post