Formatting Guide

You can format your log posts and comments on this site using basic HTML or Markdown syntax. HTML is more powerful, but Markdown is usually more concise. Here's a guide to common things you might want to do.


Headers

If you type this Markdown:

# Header Text
## Sub-Header Text
### Sub-Sub-Header Text
etc...

You get this:

Header Text

Sub-Header Text

Sub-Sub-Header Text

Emphasis

If you type this Markdown:

**Bold text**

_Italicized text_

**_Bold, italicized text_**

You get this:
Bold text

Italicized text

Bold, italicized text

Lists

If you type this Markdown:

- Oranges
- Mangos
- Pears

1. Pinecones
1. Leaves
1. Wallabies

You get this (the items in the second list are enumerated automatically):
  • Oranges
  • Mangos
  • Pears
  1. Pinecones
  2. Leaves
  3. Wallabies

Blocks

If you type this Markdown:

> This is a quote.
> > Nested quotes work too!

This is `an inline piece of code`.

    Adding 4 spaces in front of text is
    another way of writing a code block.

You get this:

This is a quote.

Nested quotes work too!

This is an inline piece of code.

Adding 4 spaces in front of text is
another way of writing a code block.

If you type this HTML:

<a href="https://devlogs.fun">Yo, check out this cool site</a>

You get this:
Yo, check out this cool site

Warning - don't forget the "http" or "https" in front of your link!

Images

First, you need your image hosted on the web somewhere. I suggest Imgur, which is a free and easy image hosting service. After uploading, copy your image's URL (don't forget the file extension, usually .png or .jpg - see below for animated .gif files).

If you type this:

<img src="http://imgur.com/NB7eXmU.png" />

You get this:

Centering text and images

If you type this HTML:

<p align="center">Centered text</p>

<p align="center"><img src="http://imgur.com/NB7eXmU.png" /></p>

You get this:

Centered text

YouTube, Vimeo and Kickstarter videos


First, find your video's ID (sorry, this step is a little complicated):

  • YouTube: It's the part in the "share" link after "http://youtu.be/" - it will be a mess of text like this: J---aiyznGQ
  • Vimeo: It's the number at the end of the URL, like: 100552392
  • Kickstarter: It's the part in the URL after "https://www.kickstarter.com/projects/" and before any "?" characters, like: 1523379957/oculus-rift-step-into-the-game

If you type this, replacing "youtube" with "vimeo" or "kickstarter", and "J---aiyznGQ" with whatever your video's ID is:

!(youtube:J---aiyznGQ 50% center)

You get this:

The "50%" and "center" parts are optional. 50% is the amount of page width the video will take up, and can be any multiple of 10.

SoundCloud audio tracks


First, find your track's ID (sorry, this step is a little complicated). It's the number in the embed link after "/tracks/," like: 38601057

If you type this:

!(soundcloud:38601057 50% center)

You get this:

The "50%" and "center" parts are optional. 50% is the amount of page width the widget will take up, and can be any multiple of 10.

Animated GIFs via Gfycat


Everybody likes animated GIFs, but they can be big and slow to load. Gfycat is an image-hosting service that converts your .gif into a more modern HTML video file, while still serving the .gif to older browsers. Plus, it's simple and free, so you should use it! After uploading, your .gif's ID is the weird animal in the URL after "http://gfycat.com/", like: CrazyFrequentFlycatcher

If you type this:

!(gfycat:CrazyFrequentFlycatcher 50% center)

You get this:

The "50%" and "center" parts are optional. 50% is the amount of page width the widget will take up, and can be any multiple of 10. If you don't want the GIF to start playing automatically, put "manual" in there after "center".

Allowed HTML


Here is a list of allowed HTML tags (custom CSS styles are not allowed in posts or comments):

a, b, blockquote, code, del, dd, dl, dt, em, h1, h2, h3, i, img, kbd, li, ol, p, pre, s, sup, sub, strong, strike, ul, br, hr, div