Code and Gists in Wordpress

While WordPress.com doesn’t allow you to use potentially harmful code on your blog, it does allow you to post source code for general viewing. Provided that you enclose the source code within a [sourcecode] [/sourcecode] shortcode wrapper, you will be able to preserve the code’s formatting; enable syntax highlighting for the programming language used; and highlight specific lines in the code. For example, for a CSS snippet, do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[sourcecode language="css" highlight="3,4,5,6,7"]

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

[/sourcecode]

Alternatively, wordpress.com permits embedding github.com gists by using the [gist] shortcode. With [gist]2927943[/gist], you’ll achieve:

… which certainly isn’t as pretty as wordpress.com‘s solution. You can make a gist more presentable by way of CSS customizations, but this isn’t possible on wordpress.com. It is also impossible to tell gists to highlight specific lines of code.