2011-07-22 17:49:01 -04:00
---
layout: page
title: "Codeblock"
date: 2011-07-22 09:13
sidebar: false
footer: false
---
2011-07-22 18:36:49 -04:00
With this plugin you can write blocks of code directly in your posts and optionally add titles and links.
2011-07-22 17:49:01 -04:00
2012-06-03 01:24:03 -04:00
## Syntax
2011-07-22 17:49:01 -04:00
2012-06-03 01:24:03 -04:00
{{ "{% codeblock [lang:language] [title] [url] [link text] [start:#] [mark:#,#-#] [linenos:false]" }} %}
2011-09-08 00:31:08 -04:00
code snippet
{{ "{% endcodeblock" }} %}
2011-07-22 17:49:01 -04:00
2012-06-03 01:24:03 -04:00
### Basic options
2011-07-22 17:49:01 -04:00
2012-12-20 14:51:47 -05:00
- `[lang:language]` - Choose a language for the syntax highlighter. Passing 'plain' disables highlighting. ([Supported languages](http://pygments.org/docs/lexers/).)
2012-06-03 01:24:03 -04:00
- `[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'.
{% render_partial docs/plugins/_partials/options.markdown %}
## Examples
**1.** Here's an example without setting the language.
2011-07-22 17:49:01 -04:00
{% codeblock %}
Awesome code snippet
{% endcodeblock %}
2012-06-03 01:24:03 -04:00
*The source:*
2011-07-22 17:49:01 -04:00
2012-06-03 01:24:03 -04:00
{{ "{% codeblock" }} %}
Awesome code snippet
{{ "{% endcodeblock" }} %}
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
**2.** This example uses syntax highlighting.
2011-08-21 16:20:10 -04:00
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
2012-06-03 01:24:03 -04:00
*The source:*
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
{% raw %}{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}{% endraw %}
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
**3.** Including a file extension in the title can also trigger highlighting.
2011-07-22 17:49:01 -04:00
{% codeblock Time to be Awesome - awesome.rb %}
puts "Awesome!" unless lame
{% endcodeblock %}
2012-06-03 01:24:03 -04:00
*The source:*
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
{{ "{% codeblock Time to be Awesome - awesome.rb" }} %}
puts "Awesome!" unless lame
2011-07-22 17:49:01 -04:00
{{ "{% endcodeblock" }} %}
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
**4.** Add an optional URL for downloading or linking to a 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 %}
2011-08-21 16:20:10 -04:00
2012-06-03 01:24:03 -04:00
*The source:*
2011-08-21 16:20:10 -04:00
{% raw %}{% 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 %}{% endraw %}
2012-06-03 01:24:03 -04:00
**5.** This example uses a custom starting line number and marks lines 52 and 54 through 55.
2011-07-22 17:49:01 -04:00
2012-06-03 01:24:03 -04:00
{% codeblock lang:coffeescript Coffeescript Tricks start:51 mark:51,54-55 %}
# Given an alphabet:
alphabet = 'abcdefghijklmnopqrstuvwxyz'
2012-05-27 03:04:45 -04:00
2012-06-03 01:24:03 -04:00
# Iterate over part of the alphabet:
console.log letter for letter in alphabet[4..8]
{% endcodeblock %}
2012-05-27 03:04:45 -04:00
2012-06-03 01:24:03 -04:00
*The source:*
2012-05-27 03:04:45 -04:00
2012-06-03 01:24:03 -04:00
{% raw %}{% codeblock Coffeescript Tricks lang:coffeescript start:51 mark:51,54-55 %}
2012-05-27 03:04:45 -04:00
# Given an alphabet:
alphabet = 'abcdefghijklmnopqrstuvwxyz'
# Iterate over part of the alphabet:
console.log letter for letter in alphabet[4..8]
{% endcodeblock %}{% endraw %}
2012-06-03 01:24:03 -04:00
### Other ways to embed code snippets
2012-05-27 03:04:45 -04:00
2012-06-03 01:24:03 -04:00
You might also like to [use back tick code blocks ](/docs/plugins/backtick-codeblock ), [embed code from a file ](/docs/plugins/include-code ), or [embed GitHub gists ](/docs/plugins/gist-tag ).