Tutorials

How to activate Syntax Highlighting for code snippets in posts and pages

To enable Syntax Highlighting for code snippets in posts and pages select “Syntax Highlighting” from the wp-insert menu

Expand the “Syntax Highlighting for Code in Posts & Pages” section

Click “Click to Activate” and the Click “Save Changes”.

Follow the tutorials on http://www.wp-insert.blogolb.net/tutorials/syntax-highlighting/ to know how to add code snippets into posts and pages.

How to add a code snippet to a page with syntax highlighting

You can add a code snippet to a page using the [ code] short-code.

You can either enclose the code snippet between [ code] and [ /code]

OR

Add the code in a custom field and then add the custom field name to the short-code as follows [ code custom='blah'][ /code]

How to prevent wordpress from messing up my code snippets

Everyone of you who has tried to add a code snippet to a wordpress post or page will know how frustrating it is to set it up with wordpress auto formatting the snippet and messing up all the formatting.

Those of you who have experienced this will be interested in the code syntax highlighting feature of  Wp-Insert.

Check these pages to know how to tackle the problem :

http://www.wp-insert.blogolb.net/tutorials/syntax-highlighting/

How to set the language of a code snippet added to a page for proper formatting

Suppose you want to add the following code snippet in PHP into your post.

You can either add it directly into the post which will probably mess up the formatting and reduce the readability ad shown below

<?php

$args = array(
	'post_type' => 'attachment',
	'numberposts' => -1,
	'post_status' => null,
	'post_parent' => $post->ID,
	'exclude' => get_post_thumbnail_id()
	);
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		the_attachment_link($attachment->ID, false);
	}
}

?>

Or you can use a syntax highlighting system which will make the code much more easier to read and understand.

[code language="php" custom="code1"] [/code]

Consider the following few code snippets

Snippet 1

[code language="html" custom="code2"] [/code]

Snippet 2

[code language="php" custom="code1"] [/code]

You will notice that each one of them has syntax highlighting but is formatted differently.

The author of the post will definitely know which language the code snippet is written in.

While adding the code snippet to the post the author can easily set the language so that it is formatted correctly using the language attribute of the short code as shown below

[ code language="php" custom="code1"][ /code]

Make sure you don’t enter the wrong language. Entering the wrong language may cause the code snippet not to show up in certain cases.

How to enable Syntax Highlighting in Theme and Plugin Editors

Recently WordPress introduced Syntax Highlighting in the theme and plugin editors but later removed the support due to browser incompatibilities.
Wp-Insert has been supporting this feature for quite a long time now and here is where we can appreciate the functionality being offered as a plugin.
If we add some experimental or a niche feature into wordpress core it will be a menace for a majority of users out there who will just be troubled by the issues; but if a similar feature is implemented in a plugin particularly as we implement features in Wp-Insert users can just decide not to turn on unwanted features of turn them on only when they want to.

If you have been a long time user of Wp-Insert you would have noticed that we provide most features in the plugin turned off by default. This may be a turn down for newbie users as they might not even find the feature. But as they graduate into an advanced user they will definitely appreciate the approach.

Coming back to the tutorial.

We have decided to use a javascript Syntax highlighter called EditArea as it seemed to be more robust that codepress which we were using until now.

To enable Syntax Highlighting in Theme and Plugin Editors select “Syntax Highlighting” from the wp-insert menu

Expand the “Theme & Plugin Editor Syntax Highlighting” section

Click “Click to Activate” and the Click “Save Changes”.

Now the theme and plugin editor will have built in Syntax highlighting.

The toggle check-box at the bottom can be used to easily switch between the default editor and the new editor.