How To Add Syntax Highlighter In Your Website

If you always need to share HTML, JavaScript, C, PHP, Python and other such kinds of codes on your blog or website but it always show in a plain single color. But if you view codes in Adobe DreamWeaver or view any webpage source code in your web browser you will see the codes are highlighted with different colors (a.k.a. syntax highlight) which makes easy to read and understands for everyone.

So if you are looking for a way to highlight codes in your blog or website to make it more user-friendly for your readers and visitors, so let me tell you how. If you are on self hosted WordPress then you can simply use a Syntax Highlighter plugin.

Syntax Highlight - An online tool to display formatted source code

But if you have a static website or have a website (or blog) where you don’t have much solution to add highlighted syntax or you very rarely display codes so you can try SyntaxHighlight.In. It is an online tool which lets you highlight 15 different kinds of codes.

All you need to do use copy-past (or drag and drop) your code on their website, select if you want to add collapse (show/hide) option, which code language you have given, which kind theme (looks) you want to give, do you want to show line number, etc.

After giving all the details you will also able to view live demo how it will look, when you feel that it will look great on your blog/website then click on Done! Button and you will get a code which you need to copy-past where you want to display. And you will also need to download and upload a CSS and JavaScript file on your server and link them in that page.