SyntaxHighlighter is, as described on its webpage, a fully functional self-contained code syntax highlighter developed in JavaScript
. It is used to make programming code from various programming languages easier to follow. Installation is pretty straightforward for ordinary web sites but for sites like this one where the users are not allowed to upload files to the server, it can get a little tricky. Here are the options for adding SyntaxHighlighter to your Blogger account:
- Method 1: Using the hosted files from the program's website.
- Pros:
- Easy installation
- Option to use the latest version without manually upgrading
- Cons:
- Does not support secure (https) connection
- Does not load as fast as the other method
- Loads file from an external website, will not work if the hosting service is discontinued
- Installation:
- Go to the "Template" section of your blog:
- Choose the "Edit HTML" option:
- Copy the following text;
and paste it right below the<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><head>tag:
- Next, find the programming language(s) whose code you would like to highlight from the list in this link and note the file name. Add the file name to the indicated place in the following text:
For example, to highlight PHP, it should look like the following:<script src="http://alexgorbatchev.com/pub/sh/current/scripts/File name goes here" type="text/javascript"></script>
Paste this right below the last line starting with the<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script><script>tag that you included in the previous step:Repeat this step for every programming language that you would like to highlight. For scripting languages like PHP and JavaScript, you should also load the XML brush (i.e.
shBrushXml.js). -
Once you add the support for all the programming languages you would like to highlight, copy and paste the following right underneath the last line starting with the
<script>tag:
Click the "Save template" button:<script type="text/javascript"> SyntaxHighlighter.all() </script>
- Go to the "Template" section of your blog:
- Pros:
- Method 2: Using Blogger's HTML/JavaScript gadget
- Pros:
- Supports secure (https) connection
- Loads faster
- No dependence on an external website
- Cons:
- Installation is tricky
- Code must be removed and re-installed every time there is an upgrade
- Installation:
- Go to the "Layout" section of your blog:
- Choose the "Add a Gadget" option located in the extreme bottom:
This gadget will be invisible, so you don't need to worry about messing up the design of your blog.
- On the window that pops up, scroll down and choose the "HTML/JavaScript" option:
- First, type
<script>on the "Content" section. Next, go to http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js, copy all the text on this page and paste it below the<script>tag:
-
Find the programming language(s) whose code you would like to highlight from the list in this link and note the file name. Add the file name to the end of "http://alexgorbatchev.com/pub/sh/current/scripts/" and visit that address. For example, for PHP, this address is "http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js". Copy all the text on that page and paste it below the text that you entered in the previous step:
Repeat this step for every programming language you that you would like to highlight, pasting the text to the bottom of the page. For scripting languages like PHP and JavaScript, you should also load the XML brush (i.e. paste all the text in http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js to the bottom of the page).
-
After loading all the brushes, type
SyntaxHighlighter.all()to the last line and</script>below that. Click "Save" and close the window.
- On the "Layout" page, move the "HTML/JavaScript" gadget you just crated to the very bottom. Click "Save arrangement" afterwards:
- Go to the "Template" section:
- Click on the "Customize" button:
- Go to the "Advanced" section:
- Scroll all the way down on the list that appears and choose the "Add CSS" option:
- Go to http://alexgorbatchev.com/pub/sh/current/styles/shCore.css, copy everything on this page and paste it on the "Add custom CSS" pane. Then, go to http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css, copy everything on this page and paste it below the text that you just added to the "Add custom CSS" pane. Click on "Apply to Blog" button afterwards:
- Go to the "Layout" section of your blog:
These are all the necessary steps to install the program. To actually use this program, first enter the "HTML" mode of Blogger's editor if you are not already using it:
Find the programming language whose code you would like to highlight from this link and note the "Brush alias". Type
<pre class="brush: Brush alias goes here;">. For example, for PHP, it should read<pre class="brush: php;">. You will then enter the code you would like to highlight, but it has to be escaped first. Go to this page and enter your code to the text area labeled "Enter/paste text to HTML Escape:". Copy the generated text in the "Escaped result with HTML entities:" and paste it right below the<pre>tag. After your code, type</pre>. In whole, you should enter something like:<pre class="brush: php;"> <html> <body> <form action="array2.php" method="post"> <?php for ($m = 1; $m <= 10; $m++) { echo "Element $m: <select name=\"e$m\">"; for ($n = 0; $n < 10; $n++) { echo "<option value=\"$n\">$n</option>"; } echo "</select>&nbsp;&nbsp;"; } ?> <input type="submit"> <input type="reset"> </form> </body> </html> </pre>The result will look like:
<html> <body> <form action="array2.php" method="post"> <?php for ($m = 1; $m <= 10; $m++) { echo "Element $m: <select name=\"e$m\">"; for ($n = 0; $n < 10; $n++) { echo "<option value=\"$n\">$n</option>"; } echo "</select> "; } ?> <input type="submit"> <input type="reset"> </form> </body> </html>For scripting languages such as the PHP code above, you would probably like to highlight HTML code in addition to the code of the actual language. To do this, first make sure that the "XML" brush is loaded in the installation steps. Add
html-script: true;between the quotes, right next tobrush: alias. For instance, if we enter<pre class="brush: php; html-script: true;">instead of<pre class="brush: php">; the above code will render as:<html> <body> <form action="array2.php" method="post"> <?php for ($m = 1; $m <= 10; $m++) { echo "Element $m: <select name=\"e$m\">"; for ($n = 0; $n < 10; $n++) { echo "<option value=\"$n\">$n</option>"; } echo "</select> "; } ?> <input type="submit"> <input type="reset"> </form> </body> </html>A final note about this program is that, according to the program's webpage, there actually is a "Blogger mode" which it is claimed to be set to
truefor the program to work with Blogger blogs; however, not only the program works perfectly without the "Blogger mode", you may run into problems if you turn this on (such as<br/>tags that you have in your code causing actual line breaks). If you insist on turning this on, you should addSyntaxHighlighter.config.bloggerMode = true;right aboveSyntaxHighlighter.all();in the installation. - Pros:
No comments :
Post a Comment