Posting Source Code In WordPress Posts

Sometimes you might want to post source code into your WordPress blog and highlight the source code according to the language it is written in.  Although there are many plugins that deal with syntax highlighting we are going to save you a little trouble and get you up and running in no time.

function confirmLink(theLink, theSqlQuery)
{
 // Confirmation is not required in the configuration file
 // or browser is Opera (crappy js implementation)
 if (PMA_messages['strDoYouReally'] == '' || typeof(window.opera) != 'undefined') {
 return true;
 }

 var is_confirmed = confirm(PMA_messages['strDoYouReally'] + ' :\n' + theSqlQuery);
 if (is_confirmed) {
 if ( typeof(theLink.href) != 'undefined' ) {
 theLink.href += '&is_js_confirmed=1';
 } else if ( typeof(theLink.form) != 'undefined' ) {
 theLink.form.action += '?is_js_confirmed=1';
 }
 }

 return is_confirmed;
} // end of the 'confirmLink()' function

So, here is what you have to do get those nicely highlighted source code scripts into WordPress posts, just like the one you see above.

  • First of all you will need to install few plugins for your WordPress
    • SyntaxHighlighter EvolvedThis plugin makes the code look as you see it here!
    • Visual Code Editor – Makes it possible (and trouble free) to post and edit syntax (programming code snippets) in WordPress’s visual editor.
  • Activate these two plugins and you are ready to start posting your first bits of source code.
  • Please make sure that your theme has the wp_footer() function called before the body tag in order for these plugins to work correctly.

Now create a new post and write the following:

[sourcecode language="php"]Insert your code here![/sourcecode]

And between the two tags paste the code you need to be shown right from your editor like Notepad++ for example. You can change the language=”php” to whatever language you need. If the language parameter is not set, it will default to “text” (no syntax highlighting). You can set this to: actionscript3, bash, coldfusion, cpp, csharp, css, delphi, erlang, fsharp, diff, groovy, javascript, java, javafx, matlab (keywords only), objc, perl, php, text, powershell, python, ruby, scala, sql, vb and xml.

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.

You can find our more here!