Something More for Research

Explorer of Research #HEMBAD

Posting Source Code in WordPress

Posted by Hemprasad Y. Badgujar on January 9, 2015


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
2
3
4
#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*] **

delete “*”

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.

  • 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. truewill 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 thecollapse parameter.

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

</pre>
<div class="line number1 index0 alt2"><code class="htmlscript plain"><!</code><code class="htmlscript keyword">DOCTYPE</code> <code class="htmlscript plain">html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"></code></div>
<div class="line number2 index1 alt1"><code class="htmlscript plain"><</code><code class="htmlscript keyword">html</code> <code class="htmlscript color1">xmlns</code><code class="htmlscript plain">=</code><code class="htmlscript string">"<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code> <code class="htmlscript color1">xml:lang</code><code class="htmlscript plain">=</code><code class="htmlscript string">"en"</code> <code class="htmlscript color1">lang</code><code class="htmlscript plain">=</code><code class="htmlscript string">"en"</code><code class="htmlscript plain">></code></div>
<div class="line number3 index2 alt2"><code class="htmlscript plain"><</code><code class="htmlscript keyword">head</code><code class="htmlscript plain">></code></div>
<div class="line number4 index3 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">meta</code> <code class="htmlscript color1">http-equiv</code><code class="htmlscript plain">=</code><code class="htmlscript string">"Content-Type"</code> <code class="htmlscript color1">content</code><code class="htmlscript plain">=</code><code class="htmlscript string">"text/html; charset=UTF-8"</code> <code class="htmlscript plain">/></code></div>
<div class="line number5 index4 alt2"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">title</code><code class="htmlscript plain">>WordPress.com Code Example</</code><code class="htmlscript keyword">title</code><code class="htmlscript plain">></code></div>
<div class="line number6 index5 alt1"><code class="htmlscript plain"></</code><code class="htmlscript keyword">head</code><code class="htmlscript plain">></code></div>
<div class="line number7 index6 alt2"><code class="htmlscript plain"><</code><code class="htmlscript keyword">body</code><code class="htmlscript plain">></code></div>
<div class="line number8 index7 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">h1</code><code class="htmlscript plain">>WordPress.com Code Example</</code><code class="htmlscript keyword">h1</code><code class="htmlscript plain">></code></div>
<div class="line number9 index8 alt2"></div>
<div class="line number10 index9 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">p</code><code class="php plain">></code><code class="php script"><?php</code> <code class="php functions">echo</code> <code class="php string">'Hello World!'</code><code class="php plain">; </code><code class="php script">?></code><code class="htmlscript plain"></</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">></code></div>
<div class="line number11 index10 alt2"></div>
<div class="line number12 index11 alt1 highlighted"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">>This line is highlighted.</</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">></code></div>
<div class="line number13 index12 alt2"></div>
<div class="line number14 index13 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">>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.</</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">></code></div>
<div class="line number15 index14 alt2"></div>
<div class="line number16 index15 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">div</code> <code class="htmlscript color1">class</code><code class="htmlscript plain">=</code><code class="htmlscript string">"foobar"</code><code class="htmlscript plain">></code></div>
<div class="line number17 index16 alt2"><code class="htmlscript spaces">        </code><code class="htmlscript plain">This    is  an</code></div>
<div class="line number18 index17 alt1"><code class="htmlscript spaces">        </code><code class="htmlscript plain">example of  smart</code></div>
<div class="line number19 index18 alt2"><code class="htmlscript spaces">        </code><code class="htmlscript plain">tabs.</code></div>
<div class="line number20 index19 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"></</code><code class="htmlscript keyword">div</code><code class="htmlscript plain">></code></div>
<div class="line number21 index20 alt2"></div>
<div class="line number22 index21 alt1"><code class="htmlscript spaces">    </code><code class="htmlscript plain"><</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">><</code><code class="htmlscript keyword">a</code> <code class="htmlscript color1">href</code><code class="htmlscript plain">=</code><code class="htmlscript string">"<a href="http://wordpress.com/">http://wordpress.com/</a>"</code><code class="htmlscript plain">>WordPress.com</</code><code class="htmlscript keyword">a</code><code class="htmlscript plain">></</code><code class="htmlscript keyword">p</code><code class="htmlscript plain">></code></div>
<div class="line number23 index22 alt2"><code class="htmlscript plain"></</code><code class="htmlscript keyword">body</code><code class="htmlscript plain">></code></div>
<div class="line number24 index23 alt1"><code class="htmlscript plain"></</code><code class="htmlscript keyword">html</code><code class="htmlscript plain">></code></div>
<pre>

 

Credits

Advertisements

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

 
Extracts from a Personal Diary

dedicated to the life of a silent girl who eventually learnt to open up

Num3ri v 2.0

I miei numeri - seconda versione

ThuyDX

Just another WordPress.com site

Algunos Intereses de Abraham Zamudio Chauca

Matematica, Linux , Programacion Serial , Programacion Paralela (CPU - GPU) , Cluster de Computadores , Software Cientifico

josephdung

thoughts...

Tech_Raj

A great WordPress.com site

Travel tips

Travel tips

Experience the real life.....!!!

Shurwaat achi honi chahiye ...

Ronzii's Blog

Just your average geek's blog

Karan Jitendra Thakkar

Everything I think. Everything I do. Right here.

VentureBeat

News About Tech, Money and Innovation

Chetan Solanki

Helpful to u, if u need it.....

ScreenCrush

Explorer of Research #HEMBAD

managedCUDA

Explorer of Research #HEMBAD

siddheshsathe

A great WordPress.com site

Ari's

This is My Space so Dont Mess With IT !!

%d bloggers like this: