Post source code on WordPress.com

[Via]

http://en.support.wordpress.com/code/posting-source-code/

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:

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

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

 your code here
 

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

  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp NEW!
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • matlab (keywords only) NEW!
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • 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.

  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • 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.
  • toolbar (true/false) — If false, the toolbar containing the helpful buttons that appears when you hover over the code will not be shown. Defaults to true.
  • wraplines (true/false) — If true, line line wrapping will be disabled. This will cause a horizontal scrollbar to appear for long lines of code.

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

8
</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>9</code></td>
<td><code>This line is not highlighted.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>This line is highlighted.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>This line is highlighted.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>12</code></td>
<td><code>This line is not highlighted.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>13</code></td>
<td><code>
0001
</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>0002</code></td>
<td><code><</code><code>strong</code><code>>This</</code><code>strong</code><code>> is a short snippit of <</code><code>code</code><code>>code</</code><code>code</code><code>> with padlinenumbers set to 4.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>0003</code></td>
<td><code>
</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>// Line wrapping has been disabled for this example. You will need to scroll to read all of this text. In addition, this example features no line numbering (gutter) and the toolbar hidden by using the "light" parameter.</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>

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.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
05 <title>WordPress.com Code Example</title>
06 </head>
07 <body>
08 <h1>WordPress.com Code Example</h1>
09
10 <p><?php echo 'Hello World!'; ?></p>
11
12 <p>This line is highlighted.</p>
13
14 <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>
15
16 <div class="foobar">
17 This    is  an
18 example of  smart
19 tabs.
20 </div>
21
22 <p><a href="http://wordpress.com/">WordPress.com</a></p>
23 </body>
24 </html>

↑ Table of Contents ↑

Credits

Alex Gorbatchev’s SyntaxHighlighter project was used in the implemention of this feature. If you are a WordPress.org user and would like to use this feature on your self-hosted blog, it is available as a plugin.

Advertisements

Tags:

6 Responses to “Post source code on WordPress.com”

  1. Thats Fine Says:

    Hi,

    I am your mutal friend. My friend told me about you. You have a nice blog. he says you make sites?

    Best Web Designers – $50 Unique Content Sites – http://bestwebdesigners.org

    Is this yours?

    Thanks

  2. Post source code on WordPress.com « Android's Avatar Says:

    […] Post source code on WordPress.com « Android's Avatar Posted in Code | Tags: a-shortcode-you, allow-you, and-even, around-source, Code, for-viewing-, […]

  3. paste code into gmail Says:

    Hmm is anyone else experiencing problems with the pictures on this blog loading?

    I’m trying to figure out if its a problem on my end or
    if it’s the blog. Any feedback would be greatly appreciated.

  4. débarrasser une maison toulouse Says:

    Hello, just wanted to say, I enjoyed this article.
    It was funny. Keep on posting!

  5. manual memory management vs garbage collection Says:

    Thanks , I’ve just been looking for information about
    this topic for ages and yours is the best I have found out till now.
    But, what in regards to the conclusion? Are you certain in regards to the source?

  6. Bogowie zobacz online za darmo 2014 Says:

    I’ve learn several excellent stuff here. Certainly price bookmarking for revisiting.
    I wonder how much attempt you put to make one of these great informative website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: