If you want to publish source codes as part of your content, you should consider highlighting the source codes in the content, not just for beautification, it helps the reader to see something familiar. In this post I am going to present a way of highlighting source codes in content which is applicable in all platforms. This easy way to highlight source codes in contents would only requires JS and CSS support.
So if you are a blogger who writes on computer programming and publish source codes in your blog post or if you just want to publish some source codes in your website, then what you can do to stand-out the code from other text is
- Use <code /> tags
- Use <pre /> tags
Cool. It will look like codes but not look like as it looks like in your favorite code editor, with different colors for constants, variables, functions, strings etc. along with line numbers.
So, what you want to do is to highlight source codes and make them appearing like in a code editor, which is just not for colors, but for more readability too.
How to easily highlight source codes?
Here you go.
SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.SyntaxHighlighter is currently used by Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks and others.
Already using SyntaxHighlighter? Then you should know how to optimize the loading speed.
Read More: How to Optimize syntax highlighter loading speed?
Great. How to use SyntaxHighlighter?
The official website for SyntaxHighlighter already have many ways described on implementing SyntaxHighlighter in your website including widgets for popular CMS like wordpress etc.
However, the basic way is as follows
You have to include the core CSS and JS file for SyntaxHighlighter initially along with a CSS file for a SyntaxHighlighter theme you would like to use. The default theme is pretty cool though, you can find all the themes here. Include these 3 files in your <head /> section.
Then include the JS files for the brushes you want to use (also in the <head />). For example, I want to use PHP, JS and HTML brushes. You can find a list of available brushes here.
Thus following code is what I need to setup SyntaxHighlighter.
<!-- Include CORE javascript file --> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script> <!-- Include the CORE css file --> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /> <!-- Include a theme file --> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <!-- Include the javascript files for each of the brushes you want to use --> <script type="text/javascript" src="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/javascript.html"></script> <script type="text/javascript" src="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/php.html"></script> <script type="text/javascript" src="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/xml.html"></script>
Then in the BODY section you write your source code in <PRE /> tags. You have to escape your source code before you can use them in the <pre /> tags. Such as < to < and > to > etc. You can use this online tool here to escape your code before inserting them in the <pre /> tags.
<?php
echo 'Hey there, code highlighting is awesome.';
function putSomeHTMLToo(){
return '<strong>What kind of code is this?</strong>';
}
echo putSomeHTMLToo();
Okay, now at the bottom of your page, call the initiator function for SyntaxHighlighter to do the magic.
<script type="text/javascript"> SyntaxHighlighter.all() </script>
That’s it. You are done.
Wait? Is it optimized?
I guess no. Why? Because,
- I might not be publishing source codes in each of my post or page, then why loading all these scripts in each and every page?
- I might be publishing source codes of many languages and platforms (PHP, C, C++, JS, HTML etc.), that means more scripts for brushes. But may be I am publishing source code of only one language in a page, but still loading all of the brush scripts!
Okay, do not freak out. There is a cool optimized way to load SyntaxHighlighter and it’s brushes.
I recommend you to visit the official website of SyntaxHighlighter to explore more about themes, scripts, implementation guide or integration to CMS etc.
Like and Share this post if it just helped you out. Thanks.