Syntax highlighting in WordPress

I am using the plugin "Syntax Highlighter Evolved" to color the code samples embedded in my posts.

This one is based, as many others, on the code syntax highlighter developed in java-script by Alex Gorbatchev.

Click to Read More

Here is the list of supported syntaxes [syntax name: tag]:

ActionScript3: as3, actionscript3
Bash/shell: bash, shell
ColdFusion: cf, coldfusion
C#: c-sharp, csharp
C++: cpp, c
CSS: css
Delphi: delphi, pas, pascal
Diff: diff, patch
Erlang: erl, erlang
Groovy: groovy
JavaScript: js, jscript, javascript
Java: java
JavaFX: jfx, javafx
Perl: perl, pl
PHP: php
Plain Text: plain, text
PowerShell: ps, powershell
Python: py, python
Ruby: rails, ror, ruby
Scala: scala
SQL: sql
Visual Basic: vb, vbnet
XML: xml, xhtml, xslt, html, xhtml

The easiest it to use the tags here above as shortcode around your "code", like this: [tag]my code[/tag] where tag can be php, vb, shell, ....

Here is a sample from Alex G.'s website using the tag "php" as a shortcode:

// SyntaxHighlighter makes your code snippets
// beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
 this.length = 0;
 push.apply(this, elems);
 return this;
}

There are various options than can be set using parameters: [tag parameter="value"]my code[/tag]. Those options are listed in the "settings" page of the plugin (See via the WordPress admin dashboard).

The various issues I found are:

  1. Although using the parameter gutter="true", I cannot remove the line numbering but keep the toolbar.
  2. Copy/Paste code from an IDE does not provide a nice output:
    • The indentation is lost,
    • some lines of code become formatted as "paragraphs" and extra blank lines appears therefore
There is however a trick to keep the original formatting of the code when copy/pasting this one.
  1. Copy first your code from the IDE
  2. Next, in your post, select the HTML view
  3. Then, in this view, add your tags [tag][/tag]
  4. Finally, paste your code between those tags and switch back to the Visual view

If you prefer to convert your code into HTML+CSS, the best online tool I found is Pygments (Python Syntax Highlighter) which supports for free much more languages than most others, has a simple interface and display not  advertisement.

Leave a Reply

Your email address will not be published. Required fields are marked *