Octopress

A blogging framework for hackers.

Plugins

There are other plugins for octopress, but here's an overview of the ones you'll be likely to use while blogging. This is mainly a description and demo, so be sure to follow the links beneath each section for examples and documentation.

Excerpts

When writing a post, you can add an HTML comment <!--more--> to split the post for an excerpt. Only the first section of the post, before the comment, will show up on the blog index.

HTML5 Video Tag

This plugin makes it easy to insert mp4 encoded HTML5 videos in a post. Octopress ships with javascripts which detect mp4 video support (using Modernizr) and automatically offer a flash player fallback.

Examples & documentation »

Image Tag

This plugin makes it easy to insert images in a post, with optional class names, alt and title attributes.

Examples & documentation »

Block quote

Give a man a fish, he'll have food for a day. Teach a man to fish, and he'll always come to you with his fishing problems.

Examples & documentation »

Pull quote

Octopress offers a CSS only technique for pull quotes, based on the technique by Maykel Loomans.

When writing longform posts, I find it helpful to include pull quotes to help readers easily identify the topics covered in each section. Some prefer to break things up with lots of headings, and while this seems to be a trend it doesn't work so well for long form prose. It is important to note that pull quotes are merely visual in presentation and should not appear twice in the text. That is why it a CSS only technique for styling pull quotes is preferable. Octopress includes a handy pull quote plugin to make this easy for you.

Examples & documentation »

Code Blocks

Write blocks of code directly in your posts and optionally add titles and links.

Javascript Array Syntax (array.js)link
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);

Examples & documentation »

Gist Tag

Easily embed gists in your posts or pages.

{% gist 996818 %}

Examples & documentation »

Include Code

Import files on your filesystem into any blog post as embedded code snippets with syntax highlighting and a download link.

Testing include_code (test.js)view raw
/**
sample javascript from xui
*/
var undefined,
xui,
window = this,
string = new String('string'),
document = window.document,
simpleExpr = /^#?([\w-]+)$/,
idExpr = /^#/,
tagExpr = /<([\w:]+)/,
slice = function (e) { return [].slice.call(e, 0); };
try { var a = slice(document.documentElement.childNodes)[0].nodeType; }
catch(e){ slice = function (e) { var ret=[]; for (var i=0; e[i]; i++)
ret.push(e[i]); return ret; }; }
window.x$ = window.xui = xui = function(q, context) {
return new xui.fn.find(q, context);
};

Examples & documentation »

Render Partial

Import files on your file system into any blog post or page. For example, to embed this page in another post I'd use the following code.

{% render_partial docs/blogging/plugins/index.markdown %}

Examples & documentation »

Puts

Puts is a Liquid block which outputs its contents to your terminal with Ruby's puts command. This really handy when you're working on a Liquid tag or a Jekyll plugin and you want to to be able to peek behind the curtain at what Liquid sees.

{% for post in site.posts reverse %}
{% puts %}Title: {{ post.title }}{% endputs %}
{% endfor %}

Examples & documentation »

Also see the Octopress Plugin index for the full list of Octopress plugins.