How To Add Google Code SyntaxHighlighter To Your Website
How to setup and use Google's Code SyntaxHighlighter to instantly transform code/scripts/markup (php, html, css, java, etc) into a readable and downloadable example code.
Content
Web Development Tips, Tricks and Ideas • http://technerdia.com/885_syntaxhighlighter.html
Google SyntaxHighlighter instantly transforms code /scripts / markup (php, html, css, java, etc) into a readable and downloadable example code.
Disclaimer: If your Website has an active Syntax Highlighter installed on it, then you must replace old Syntax Highlighter wraps with the style used by the Google SyntaxHighlighter. Otherwise your code examples will break. Keep Current Syntax Highlighter Plugins / Scripts Active Until All Old Examples Have Been Replaced!
Why use the Google SyntaxHighlighter?
Because it's pretty dang good! Of course, having the source code has massive advantages too. The simplest is not loading more brushes than your site may use. And the funnest, is the ability to customize the look to your desires. The SyntaxHighlighter currently Supports: C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, Sql, VB, and XML/HTML markup and code types.
How Does The Google SyntaxHighlighter work?
It uses Javascript to find the HTML Pre tag and parse the 'code' data within it. The Pre tag contains the type of code being displayed, allowing a filter to be called that translates the code or markup to readable text within the browser rather than rendering it with the Webpage markup.
Example Pre Tag:
<pre name="code" class="html">/* html markup here */</pre>
Adding the SyntaxHighlighter to your Wordpress Blog
First, download the SyntaxHighlighter rar file from Google Code. After you unRAR (7zip) the file, open the dp.SyntaxHighlighter directory. Within the directory will be three sub-folders: • Scripts: Core code and brush script files. • Styles: The core CSS file. • Uncompressed: Ignore
Let's Get Started...
The CSS File • Enter the Styles directory, open the SyntaxHighlighter.css file, select all and copy the entire file. • Open your themes style.css file (make a backup), paste the SyntaxHighlighter css data into your themes css file. I put this at the bottom of my css files, below the mobile goodies, sprites, etc. • Save the file and upload it to your Wordpress theme directory. The Core • • • • Go back and into the Scripts directory. Find the shCore.js file and right click the file and rename it to: SyntaxHighlighter.js Open the file in Notepad or Notepad2 (what I use) or Notepad+ Leave the file open....
The Brushes Brushes, is a term (or name) used to identify the highlighter script for a type of code or script being displayed. For example, within the Scripts folder is shBrushCSS.js - This file would be called when displaying a CSS file within the 'pre' tag. Most Websites will use only a few of the Brushes. techNerdia for example uses these brushes: CSS, Javascript, PHP, XML/HTML and SQL. These are the only loaded brushes, the others have been ignored. • Open the brush files that you'll be using on your Website. • Select all and copy the contents of one of the brush files. • Return to the already opened SyntaxHighlighter.js file, scroll to the very bottom (last line) and paste the Brush code in. • Repeat this for each Brush type that you'll be using. • Save the file when done. Uplaod the SyntaxHighlighter.js file to your Website/Server. I uploaded mine to domain.com/js/ Note: The Scripts directory contains a flash file named clipboard.swf. I could not get this feature working, so I've excluded it.
Turning on the SyntaxHighlighter
With the CSS data and SyntaxHighlighter.js files uploaded, it's time to activate the highlighter. ** Do Not Disable Other highlighter Plugins Yet!!! • Open your themes footer.php file, scroll to the bottom and find wp_footer(). • Paste the snip below, above the wp_footer() line and above your Google Analytics code, if it's in the footer. • Adjust the URL to the SyntaxHighlighter.js file, save the file, and upload to your theme or /js directory.
<?php if( is_singular() ){ <script language="javascript" src="http://domain.com/js/SyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script> } ?>
Test the SyntaxHighlighter
Easy enough.... • Go into your Wordpress Admin and CLEAR THE CACHE! • Create a new post, add the snip below to the body of the post, save the post as a draft, and preview it.
<pre name="code" class="html"><b>It's Working!</b></pre>
The class="html" is what tells the script which brush to load. Change it to php, js, css, etc to display different code/markup types. If something isn't working, then a step is missing: Check the URL to the SyntaxHighlighter.js file, check that the Brushes have been added to the bottom of the file. Make sure the CSS data has been uploaded or added to your root css file. Ensure the footer call is above the wp_footer() line. Clear the caches again. Try a different brush. Try a different browser.
Removing What Isn't Used
It's time to find and replace a few things... with SyntaxHighlighter.js file open: • • • • Do a find for: copy to clipboard Remove the words only. Do a find for: print it will be within a label, like: label:'print' Remove the word print only.
The last removal is optional, it's the question-mark that contains the about information. If you remove this, you should give credit some place.... like making a blog post about the SyntaxHighlighter. • To remove, do a find for: label:'?' • Remove the question-mark only. • Save your work, re-upload the file and retest.
Customizing the Look of the SyntaxHighlighter
The Pre tag wrapper for the code has one customization that can be added to it. It's a :collapse feature, which closes the code example until clicked. The first example is a basic html call, the second adds the :collapse call to the class, after the brush name. Example:
<pre name="code" class="html:collapse">/* html markup here */</pre>
Wrap The Pre Within A Class
This isn't mandatory to get the code working, but it does help if for some reason the JavaScript brushes do not load, and it makes the code display. Add a class called 'mycode' around the Pre tag of your code. Example:
<div class="mycode"><pre name="code" class="html">/* the sample */</pre></div>
mycode Class:
.mycode { border-bottom:1px dotted #aaaaaa; color:#006400; font-size:11px; line-height:16px; margin: -5px 0 20px 0; padding:0; }
The Main CSS File
If the visual display of the code does not match design, then open the css file that contains the SyntaxHighlighter CSS data. The main wrapper: .dp-highlighter Adjust the background color, typically this color should be different than your body color of your page, to help the code example stand out. You may also want to add a line-height, larger than 12px and increase the padding a little, this helps with readability. Example:
line-height:22px; padding:10px 0;
Complete:
.dp-highlighter { background:#ffffff; background-color:#ffffff; font-family:"Consolas", "Courier New", Courier, mono, serif; font-size:12px; line-height:22px; margin:18px 0 18px 0 !important; overflow:auto; padding:10px 0; width:99%; }
Rounded corners: Add the CSS below to the .dp-highlighter class.
.dp-highlighter { -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtmlborder-radius: 9px; border-radius: 9px; }
Color Changes: If you've adjusted the background color, you'll probably want to adjust the other color settings. Do a find for the classes below, and adjust the color or background color setting.
.dp-highlighter .dp-highlighter .dp-highlighter .dp-highlighter .dp-highlighter ol /* base number colors */ .columns div /* odd number colors, I think */ .columns /* even numbers */ .tools /* toolbar colors */ .tools a /* link color in toolbar */
The last bit of the CSS information controls the colors of the code within the example. Adjust as needed.
Cleanup And Disable SyntaxHighlighter Plugins
Update old posts to use the new Pre tag wrapper, then disable old Syntax Highlighter Plugins and code. It may seem obvious, but be sure to check your work!!!
Follow techNerdia on Google+ | Follow Chris on Google+
Subscribe to techNerdia's RSS Feed
Copyright 2012 © techNerdia - All Rights Reserved http://techNerdia.com/
Google SyntaxHighlighter instantly transforms code /scripts / markup (php, html, css, java, etc) into a readable and downloadable example code.
Disclaimer: If your Website has an active Syntax Highlighter installed on it, then you must replace old Syntax Highlighter wraps with the style used by the Google SyntaxHighlighter. Otherwise your code examples will break. Keep Current Syntax Highlighter Plugins / Scripts Active Until All Old Examples Have Been Replaced!
Why use the Google SyntaxHighlighter?
Because it's pretty dang good! Of course, having the source code has massive advantages too. The simplest is not loading more brushes than your site may use. And the funnest, is the ability to customize the look to your desires. The SyntaxHighlighter currently Supports: C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, Sql, VB, and XML/HTML markup and code types.
How Does The Google SyntaxHighlighter work?
It uses Javascript to find the HTML Pre tag and parse the 'code' data within it. The Pre tag contains the type of code being displayed, allowing a filter to be called that translates the code or markup to readable text within the browser rather than rendering it with the Webpage markup.
Example Pre Tag:
<pre name="code" class="html">/* html markup here */</pre>
Adding the SyntaxHighlighter to your Wordpress Blog
First, download the SyntaxHighlighter rar file from Google Code. After you unRAR (7zip) the file, open the dp.SyntaxHighlighter directory. Within the directory will be three sub-folders: • Scripts: Core code and brush script files. • Styles: The core CSS file. • Uncompressed: Ignore
Let's Get Started...
The CSS File • Enter the Styles directory, open the SyntaxHighlighter.css file, select all and copy the entire file. • Open your themes style.css file (make a backup), paste the SyntaxHighlighter css data into your themes css file. I put this at the bottom of my css files, below the mobile goodies, sprites, etc. • Save the file and upload it to your Wordpress theme directory. The Core • • • • Go back and into the Scripts directory. Find the shCore.js file and right click the file and rename it to: SyntaxHighlighter.js Open the file in Notepad or Notepad2 (what I use) or Notepad+ Leave the file open....
The Brushes Brushes, is a term (or name) used to identify the highlighter script for a type of code or script being displayed. For example, within the Scripts folder is shBrushCSS.js - This file would be called when displaying a CSS file within the 'pre' tag. Most Websites will use only a few of the Brushes. techNerdia for example uses these brushes: CSS, Javascript, PHP, XML/HTML and SQL. These are the only loaded brushes, the others have been ignored. • Open the brush files that you'll be using on your Website. • Select all and copy the contents of one of the brush files. • Return to the already opened SyntaxHighlighter.js file, scroll to the very bottom (last line) and paste the Brush code in. • Repeat this for each Brush type that you'll be using. • Save the file when done. Uplaod the SyntaxHighlighter.js file to your Website/Server. I uploaded mine to domain.com/js/ Note: The Scripts directory contains a flash file named clipboard.swf. I could not get this feature working, so I've excluded it.
Turning on the SyntaxHighlighter
With the CSS data and SyntaxHighlighter.js files uploaded, it's time to activate the highlighter. ** Do Not Disable Other highlighter Plugins Yet!!! • Open your themes footer.php file, scroll to the bottom and find wp_footer(). • Paste the snip below, above the wp_footer() line and above your Google Analytics code, if it's in the footer. • Adjust the URL to the SyntaxHighlighter.js file, save the file, and upload to your theme or /js directory.
<?php if( is_singular() ){ <script language="javascript" src="http://domain.com/js/SyntaxHighlighter.js"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script> } ?>
Test the SyntaxHighlighter
Easy enough.... • Go into your Wordpress Admin and CLEAR THE CACHE! • Create a new post, add the snip below to the body of the post, save the post as a draft, and preview it.
<pre name="code" class="html"><b>It's Working!</b></pre>
The class="html" is what tells the script which brush to load. Change it to php, js, css, etc to display different code/markup types. If something isn't working, then a step is missing: Check the URL to the SyntaxHighlighter.js file, check that the Brushes have been added to the bottom of the file. Make sure the CSS data has been uploaded or added to your root css file. Ensure the footer call is above the wp_footer() line. Clear the caches again. Try a different brush. Try a different browser.
Removing What Isn't Used
It's time to find and replace a few things... with SyntaxHighlighter.js file open: • • • • Do a find for: copy to clipboard Remove the words only. Do a find for: print it will be within a label, like: label:'print' Remove the word print only.
The last removal is optional, it's the question-mark that contains the about information. If you remove this, you should give credit some place.... like making a blog post about the SyntaxHighlighter. • To remove, do a find for: label:'?' • Remove the question-mark only. • Save your work, re-upload the file and retest.
Customizing the Look of the SyntaxHighlighter
The Pre tag wrapper for the code has one customization that can be added to it. It's a :collapse feature, which closes the code example until clicked. The first example is a basic html call, the second adds the :collapse call to the class, after the brush name. Example:
<pre name="code" class="html:collapse">/* html markup here */</pre>
Wrap The Pre Within A Class
This isn't mandatory to get the code working, but it does help if for some reason the JavaScript brushes do not load, and it makes the code display. Add a class called 'mycode' around the Pre tag of your code. Example:
<div class="mycode"><pre name="code" class="html">/* the sample */</pre></div>
mycode Class:
.mycode { border-bottom:1px dotted #aaaaaa; color:#006400; font-size:11px; line-height:16px; margin: -5px 0 20px 0; padding:0; }
The Main CSS File
If the visual display of the code does not match design, then open the css file that contains the SyntaxHighlighter CSS data. The main wrapper: .dp-highlighter Adjust the background color, typically this color should be different than your body color of your page, to help the code example stand out. You may also want to add a line-height, larger than 12px and increase the padding a little, this helps with readability. Example:
line-height:22px; padding:10px 0;
Complete:
.dp-highlighter { background:#ffffff; background-color:#ffffff; font-family:"Consolas", "Courier New", Courier, mono, serif; font-size:12px; line-height:22px; margin:18px 0 18px 0 !important; overflow:auto; padding:10px 0; width:99%; }
Rounded corners: Add the CSS below to the .dp-highlighter class.
.dp-highlighter { -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtmlborder-radius: 9px; border-radius: 9px; }
Color Changes: If you've adjusted the background color, you'll probably want to adjust the other color settings. Do a find for the classes below, and adjust the color or background color setting.
.dp-highlighter .dp-highlighter .dp-highlighter .dp-highlighter .dp-highlighter ol /* base number colors */ .columns div /* odd number colors, I think */ .columns /* even numbers */ .tools /* toolbar colors */ .tools a /* link color in toolbar */
The last bit of the CSS information controls the colors of the code within the example. Adjust as needed.
Cleanup And Disable SyntaxHighlighter Plugins
Update old posts to use the new Pre tag wrapper, then disable old Syntax Highlighter Plugins and code. It may seem obvious, but be sure to check your work!!!
Follow techNerdia on Google+ | Follow Chris on Google+
Subscribe to techNerdia's RSS Feed
Copyright 2012 © techNerdia - All Rights Reserved http://techNerdia.com/
