Octopress

A blogging framework for hackers.

Codeblock

With this plugin you can write blocks of code directly in your posts and optionally add titles and links.

Syntax

{% codeblock [lang:language] [title] [url] [link text] %}
code snippet
{% endcodeblock %}

Basic options

  • [lang:language] - Choose a language for the syntax highlighter. Passing 'plain' disables highlighting. (Supported languages.)
  • [title] - Add a figcaption to your code block.
  • [url] - Download or reference link for your code.
  • [link text] - Text for the link, defaults to 'link'.

Additional options:

These options don't depend on any previous option and order does not matter.

  • start:# - Line numbers begin at # (useful for using snippets to reference longer code).
  • mark:#,#-# - Mark one or more lines of code with the class name "marked". Accepts one number, numbers separated by commas, and number ranges. Example mark:1,5-8 will mark lines 1,5,6,7,8. Note: If you've changed the beginning line number be sure these match rendered line numbers
  • linenos:false - Do not add line numbers to highlighted code.

Examples

1. Here's an example without setting the language.

Awesome code snippet

The source:

{% codeblock %}
Awesome code snippet
{% endcodeblock %}

2. This example uses syntax highlighting.

[rectangle setX: 10 y: 10 width: 20 height: 20];

The source:

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

3. Including a file extension in the title can also trigger highlighting.

Time to be Awesome - awesome.rb
puts "Awesome!" unless lame

The source:

{% codeblock Time to be Awesome - awesome.rb %}
puts "Awesome!" unless lame
{% endcodeblock %}

4. Add an optional URL for downloading or linking to a source.

Javascript Array Syntaxlink
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);

The source:

{% codeblock Javascript Array Syntax lang:js http://j.mp/pPUUmW MDN Documentation %}
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);
{% endcodeblock %}

Other ways to embed code snippets

You might also like to use back tick code blocks, embed code from a file, or embed GitHub gists.