Online Tips for Web Developer/Designer

• Tweet
• Share

• Tweet
• Share

Syntax Highlighter is created to ease developer/coder to post code snippets online with ease and have it look pretty like what we see in textmate, dreamweaver, editplus and etc.

Syntax Highlighter are build with Java Script and it doesn’t care what you have on your server. Cross server platform (:p)

The SyntaxHighlighter was created by Alex Gorbatchev. SyntaxHighlighter is licenced under LGPL 3. You can go here to visit this program wiki.
Or you can go here to make a donation to Alex. SyntaxHighlighter is open source. If you are using SyntaxHighlighter 2.0 on your site or including it in your product, please donate.

Within The WordPress plugin directory there’s a bunch that you can download to use, but in this article we are going to use SyntaxHighlighter Evolved. SyntaxHighlighter Evolved is the original author of SyntaxHighlighter-wordpress.
You can track it down in his web page here.

SyntaxHighlighter “Evolved”? Why “Evolved”?

Starting with v2.0.0, this plugin was renamed from “SyntaxHighlighter” to “SyntaxHighlighter Evolved”. This was done to better stand out against the many very poorly named forks of v1.x of this plugin. I am not an author of any of those plugins, they just used my old code as a base for their version. Although I am of course biased, I’d argue this plugin is the best of all of them.

Let’s Begin

1. You can download the latest software here.
   Download from WordPress.org
2. Unzip and Upload SyntaxHighlighter Evolved to wp-content/plugins/codecolorer directory
3. Enable SyntaxHighlighter Evolved
4. Plugin Usage
   Just wrap your code in [language], such as

   code here[/php ] <strong><em>&lt;- remember no spacing within []</em></strong> or [css]code here[/css ]<strong><em>&lt;- remember no spacing within []</em></strong>. For a list of supported languages (all widely used languages are supported), please <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes">click here</a>.
   You can also custom your own theme, please read the author article about setting up your own theme.
   Instructions can be <a href="http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/adding-a-new-theme/" target="_blank">found here</a>.</li>
   	<li><strong>Examples</strong>
   [php]&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
   &lt;title&gt;PHP Code Example&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;h1&gt;PHP Code Example&lt;/h1&gt;
   
   &lt;p&gt;&lt;?php echo 'Hello World!'; ?&gt;&lt;/p&gt;
   
   &lt;p&gt;This line is highlighted.&lt;/p&gt;
   
   &lt;div&gt;
   This    is    an
   example    of    smart
   tabs.
   &lt;/div&gt;
   
   &lt;p&gt;&lt;a href="http://wordpress.org/"&gt;WordPress&lt;/a&gt;&lt;/p&gt;
   &lt;/body&gt;
   &lt;/html&gt;

There are many other parameters and defaults . The shortcodes accept a wide variety of parameters. For details, see the bottom of the plugin’s settings page.