blogging

Creating Content in Markdown for Your Octopress Blog

Octopress enables the creation of great looking blog post using simple markdown text. This gives you a no-fuss way of writing your blogs without getting distracted. Here I will cover how to add formatting to you text and embedding code and other useful media into your blog posts.

In my previous blog on Octopress I covered the blogging workflow and the handful of rake commands that help you create and deploy your blog posts consistently.

Adding styles to text

Headings
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
1
<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

1
2
3
4
<img src="http://placekitten.com/890/280">
<img src="http://placekitten.com/320/250" class="left" title="Place Kitten #2">
<img src="http://placekitten.com/300/500" class="right" width="150" height="250" title="Place Kitten #3">
<img src="http://placekitten.com/300/500" 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.
http://octopress.org/docs/plugins/codeblock/

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 http://octopress.org/docs/plugins/gist-tag/ 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 https://www.youtube.com/watch?v=DHdkRvEzW84, 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

youtube DHdkRvEzW84

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

youtube video-id vimeo video-id

Example

A beautiful video with amazing music from Lindsey Stirling:

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket
Creative Commons License