Delivered by GET EMAIL UPDATES FeedBurner
We always respect your privacy and take protecting it seriously.
We won't Spam You

Syntax Highlighting Using Javascript Syntax Highlighter

, 0,
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.

Download PDF
Signup & Get $25 Free
Is this article helpful for you?


  • Connect
Create an free account and start learning & sharing! Sign Up