Syntax Highlighting Using Javascript Syntax Highlighter

Syntax Highlighter is a system that can help you to highlight your codes. Syntax highlighter will highlight your PHP syntax, HTML syntax, MySQL syntax, Javascript syntax, C syntax, C+ syntax and many other languages. If you maintain a tutorial based website like designing or programming then you should provide code with your tutorials. A syntax highlighter highlights your codes. If you use WordPress then you will get a lot of free plugins for highlight codes. But if you use your own script or use raw PHP website then you need to create a syntax highlighter. There are many ways of highlight code but today I will show an easy way to highlighting syntax. I am going to introduce with a syntax highlighter library. It's a Javascript Syntax Highlighter library and it's open source and free also. The name of this library is highlight.js . Download the latest version of syntax highlighter library from here  and install it.

How To Install Javascript Syntax Highlighter

First, download the latest version of Javascript Syntax Highlighter and upload this server or extract the zip file on your computer. Then link up Javascript Highlighter and styles.

<script src="path/highlighter/highlight.pack.js"></script>
<link rel="stylesheet" href="/path/highlighter/styles/default.css">
Don't forget to call <script>hljs.initHighlightingOnLoad();</script> this one load Syntaxt Highlighter.

How To Use Javascript Syntax Highlighter

It's very easy to use this highlighter. If we write any code in post then we use <code> </code> tag for this. Use <pre><code>Your Code</code></pre> for highlight syntax.

Syntax Highlighter latest version has auto language detector system. Language define is not necessary for this. You will get a lot of themes and styles of Syntax Highlighter. Open styles directory here you gel lot styles, use as you like. If you like GitHub style then links up GitHub stylesheet. Change stylesheet <link rel="stylesheet" href="/path/highlighter/styles/default.css"> to <link rel="stylesheet" href="/path/highlighter/styles/github.css">
This is available for 166 languages and you could use 77 themes for styleing.


We hope Javascript Syntax Highlighter help you to solve highlighting code in your post. It's easy to use you can set up easily. Don't late, make your website most eye-catching now by using the simple syntax highlighter library. If you have any question or comment about this Javascript Syntax Highlighter article please don't hesitate to do that, please comment your question in comment section. We always appreciate valuable comments.

Did you like this article? it will be appreciated if you share a coffee or burger with the author

Sent $5 to the author
Sent $10 to the author

Need Assistance?

I'm Sajjad Hossain, working on web application development since 2012. Do you need assistance on your project? or are you stuck with problems? I am available to help you.
If you want to contact with me ping me at -


We use cookies on our website. To find out more about how and why they are used or opt-out, please read our Cookie Policy. By choosing "I Accept", you consent to our use of cookies. Cookie Policy