While WordPress.com doesn’t allow you to use potentially dangerous code on your blog, there is a way to post source code for viewing. We have created a shortcode you can wrap around source code that preserves its formatting and even provides syntax highlighting for certain languages, like so:

#button {
font-weight: bold;
border: 2px solid #fff;
}

To accomplish the above, just wrap your code in these tags:

[code language="css"]
your code here
[/code]

The language (or lang) parameter controls how the code is syntax highlighted. The following languages are supported:

actionscript3

bash

clojure

coldfusion

cpp

csharp

css

delphi

erlang

fsharp

diff

groovy

html

javascript

java

javafx

matlab (keywords only)

objc

perl

php

text

powershell

python

r

ruby

scala

sql

vb

xml

If the language parameter is not set, it will default to “text” (no syntax highlighting).

Code in between the source code tags will automatically be encoded for display, you don’t need to worry about HTML entities or anything.

Configuration Parameters

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.

firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.

gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.

highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.

htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.

light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.

padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.

title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.

Here’s some examples of the above parameters in action:

This line is not highlighted.
This line is highlighted.
This line is highlighted.
This line is not highlighted.

<strong>This</strong> is a short snippit of <code>code</code> with padlinenumbers set to 4.

And here’s a larger code block to see it all in action. It is set to the PHP language with “htmlscript” enabled and line number 12 highlighted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WordPress.com Code Example</title>
</head>
<body>
<h1>WordPress.com Code Example</h1>
<p><?php echo 'Hello World!'; ?></p>
<p>This line is highlighted.</p>
<p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>
<div class="foobar">
This is an
example of smart
tabs.
</div>
<p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

Still confused?

Help us improve:

We're always looking to improve our documentation. If this page didn't answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!