Enabling syntax highlighting


Posted on 15th June 2011 by Bart McLeod in Web development |WordPress

, , , ,


There is a newer version of the plugin that I wrote about in this post. It’s functionality is available by default to wordpress.com users. The new plugin is called SyntaxHighlighter Evolved.

SyntaxHighlighter Evolved is compatible with Syntax HighLighter for WordPress, my blog uses SyntaxHighlighter Evolved now. Everything in this post also applies to SyntaxHighlighter Evolved.

I would like to know what happens if I enter some php code. Does the syntax get highlighted by default in WordPress? Is it going to be stripped out? Will it be forbidden? Let me just type “echo ‘Hello World!'” and see what happens:

<?php echo ‘Hello World’; ?>

I expect this to show up just as I typed it, nothing special.

Now let me type it into the html editor, and see what I get then:

(You see nothing here, but on the backend, in the editor there is a hidden html comment that contains the php code. On the front-end, without the editor, the comment gets stripped out completely)


It gets commented out like this:

<!–?php echo ‘Hello World in the html editor’; ?–>

I remember there was a setting to allow php, or was that Drupal only? It must have been Drupal, because I can’t find it in WordPress.

In fact, it doesn’t matter. What I am after at the moment is not to have posts executed, I only want syntax highlighting.

I search for syntax highlighting in the plugins repository and I find six pages of plugins for it. One that looks very promising from its’ statistics is ‘Syntax Highlighter for WordPress’. And this is what it does:

function admin_menu() {
    $this->addOptionPage(__('Syntax Highlighter', $this->textdomain_name), array($this, 'option_page'));

It just requires pseudotags around the code snippet. ┬áTo preserve indentation, the pseudotags themselves had to be wrapped in <pre></pre> tags, or you could turn off the visual editor for yourself (this is an option in WordPress). If you use the visual editor without <pre> tags all indentation would simply be lost. In newer versions of Syntax Hightligther, which I am using now, there is no longer a need to insert the <pre></pre> tags, in fact, you MUST NOT put them in yourselves, since this will break your page. The Syntax Highligther will now insert them for you and do it wrong if <pre></pre> tags are already in place. Note that you need to switch to html view to paste the code with the indention into the pseudotag. Be careful not to switch back and forward between HTML and Wysiwyg view, because the that may destroy the indentation again… :-(

		// Create list of brush aliases and map them to their real brushes
		// The key is the language alias
		// The value is the script handle suffix: syntaxhighlighter-brush-ThisBitHere  (your plugin needs to register the script itself)
		$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
			'as3'           => 'as3',
			'actionscript3' => 'as3',
			'bash'          => 'bash',
			'shell'         => 'bash',
			'coldfusion'    => 'coldfusion',
			'cf'            => 'coldfusion',
			'clojure'       => 'clojure',
			'clj'           => 'clojure',
			'cpp'           => 'cpp',
			'c'             => 'cpp',
			'c-sharp'       => 'csharp',
			'csharp'        => 'csharp',
			'css'           => 'css',
			'delphi'        => 'delphi',
			'pas'           => 'delphi',
			'pascal'        => 'delphi',
			'diff'          => 'diff',
			'patch'         => 'diff',
			'erl'           => 'erlang',
			'erlang'        => 'erlang',
			'fsharp'        => 'fsharp',
			'groovy'        => 'groovy',
			'java'          => 'java',
			'jfx'           => 'javafx',
			'javafx'        => 'javafx',
			'js'            => 'jscript',
			'jscript'       => 'jscript',
			'javascript'    => 'jscript',
			'latex'         => 'latex', // Not used as a shortcode
			'tex'           => 'latex',
			'matlab'        => 'matlabkey',
			'objc'          => 'objc',
			'obj-c'         => 'objc',
			'perl'          => 'perl',
			'pl'            => 'perl',
			'php'           => 'php',
			'plain'         => 'plain',
			'text'          => 'plain',
			'ps'            => 'powershell',
			'powershell'    => 'powershell',
			'py'            => 'python',
			'python'        => 'python',
			'r'             => 'r', // Not used as a shortcode
			'splus'         => 'r',
			'rails'         => 'ruby',
			'rb'            => 'ruby',
			'ror'           => 'ruby',
			'ruby'          => 'ruby',
			'scala'         => 'scala',
			'sql'           => 'sql',
			'vb'            => 'vb',
			'vbnet'         => 'vb',
			'xml'           => 'xml',
			'xhtml'         => 'xml',
			'xslt'          => 'xml',
			'html'          => 'xml',
			'xhtml'         => 'xml',
		) );

		// Create a list of shortcodes to use. You can use the filter to add/remove ones.
		// If the language/lang parameter is left out, it's assumed the shortcode name is the language.
		// If that's invalid, then "plain" is used.
		$this->shortcodes = array( 'sourcecode', 'source', 'code' );
		$this->shortcodes = array_merge( $this->shortcodes, array_keys( $this->brushes ) );

		// Remove some shortcodes we don't want while still supporting them as language values
		unset( $this->shortcodes[array_search( 'latex', $this->shortcodes )] ); // Remove "latex" shortcode (it'll collide)
		unset( $this->shortcodes[array_search( 'r', $this->shortcodes )] ); // Remove "r" shortcode (too short)

		$this->shortcodes = (array) apply_filters( 'syntaxhighlighter_shortcodes', $this->shortcodes );

		// Register each shortcode with a placeholder callback so that strip_shortcodes() will work
		// The proper callback and such is done in SyntaxHighlighter::shortcode_hack()
		foreach ( $this->shortcodes as $shortcode )
			add_shortcode( $shortcode, '__return_true' );

		// Create list of themes and their human readable names
		// Plugins can add to this list: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-theme/
		$this->themes = (array) apply_filters( 'syntaxhighlighter_themes', array(
			'default'    => __( 'Default',      'syntaxhighlighter' ),
			'django'     => __( 'Django',       'syntaxhighlighter' ),
			'eclipse'    => __( 'Eclipse',      'syntaxhighlighter' ),
			'emacs'      => __( 'Emacs',        'syntaxhighlighter' ),
			'fadetogrey' => __( 'Fade to Grey', 'syntaxhighlighter' ),
			'midnight'   => __( 'Midnight',     'syntaxhighlighter' ),
			'rdark'      => __( 'RDark',        'syntaxhighlighter' ),
			'none'       => __( '[None]',       'syntaxhighlighter' ),
		) );

		// Other special characters that need to be encoded before going into the database (namely to work around kses)
		$this->specialchars = (array) apply_filters( 'syntaxhighlighter_specialchars', array(
			'\0' => '\0',
		) );
  1. Bart McLeod says:

    You can now put sourcecode in comments.

    // you can now post sourcecode in comments.

    Source code is placed using the pseudotags described above. The long form will also work, so you can use both [php][/php] and [sourcecode language=”php”][/sourcecode].

    Look at the plugin documentation at wordpress.com if you want to learn about options such as a highlighted line of code.

    15th June 2011 at 8:51 am

  2. Abdul Malik Ikhsan says:

    There is a problem with -> to >
    & to &

    15th June 2011 at 9:06 am

  3. Bart McLeod says:

    Thanks for pointing that out! It’s obviously double escaped on this page, maybe a problem with switching in editors or so. I’ll look into it.

    Update: I solved it by pasting in some new sample code (from the new plugin). I could *not* reproduce the double escaping by switching for HTML editor to WYSIWYG and back.

    15th June 2011 at 2:01 pm

Leave a comment

Leave a Reply

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

By submitting this form, you accept the Mollom privacy policy.