Creating Content in Markdown for Your Octopress Blog



Adding styles to text

Bold, italic

Adding images

Images are always a good way to explain concepts or to just get attendtion for your writing.

To add an image to your post, you add the following code

[Insert an image in your post]link
<img src="/path/to/image" class="[class names]" title="[width] [height] [title text [alt text]]">

Here is an example with my two cute cats:

More examples

<img src="">
<img src="" class="left" title="Place Kitten #2">
<img src="" class="right" width="150" height="250" title="Place Kitten #3">
<img src="" class="right" width="150" height="250" title="Place Kitten #4 An image of a very cute kitten">

Showing code

Code blocks

You can embed code snippets directly in the markup of the blog posts you write using the codeblock directive.

These are okay but I have not figured out a way to stop Octopress examples from rendering incorrectly (unless there is an Octopress update that fixes this)

[TODO - figure out how to show code snippets that are also liquid calls]

Github Gists

I am used to using Github and Gists for sharing and collaborating around code, so as Octopress can use Gits then I have started using the gist directive.

See the for a few more examples.

Adding Video

You can add embedded videos from YouTube and Vimeo very easily, you just need to know the id of the video which is the last characters of the

For example, there is a great video by Lindsey Stirling at, so to include this video in a post I would use the video id at the end of that web address (after the watch?v=). So I would add the following code to my code

youtub DHdkRvEzW84

You can use either YouTube or Vimeo for your video souce using the following syntax:

youtube video-id vimeo video-id


A beautiful video with amazing music from Lindsey Stirling:

Creative Commons License