Simplify your codes visibility and readability on your blog or site with this simple syntax highlighter which saves both space and is also very easy to add to your codes. All you need is another simple code which converts your code into simple text when wrapped inside it. So let's learn how to add the syntax highlighting feature to your codes.
To begin simple put the below piece of code in your sites head section anywhere between <head> and </head> section. This piece will add highlighting feature to your codes.
Now in order to add this feature to your codes simply put your code in between the <pre> and </pre> tags along with css wrapping to highlight your codes. Make sure if your code inside pre tags has open close feature that is <> eg. <script> then make sure to replace the opening and ending syntaxes with their html text equivalent that is <script> to avoid getting your code being broken as now we are converting everything into html text. So putting all together it should look like this:
Also put the <script>prettyPrint();</script> at the end of the pre tag to initialize your code highlighting. and don't forget to replace your opening(<) and closing (>) syntaxes with < and > respectively and you are all done with highlighting your codes.
That's all folks have fun coding. See you next time! Also in case you wish to change the display of your codes then simply play with the styling of pre tags that is wrapping. Have fun!
Web Trends & SEO
Geniusknight is an Artist, Photographer, social media examiner, website designer and Writer. This blog is dedicated to web trends, SEO and Freelancing. Feel Free to recommend or suggest any articles and off course feel free to ask any doubts in the comment section or the use the contact form.