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">
<script>hljs.initHighlightingOnLoad();</script>
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.

Conclusion


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.






Search on PHPAns
Subscribe to PHPAns
Join with our 32000+ subscribers and get our latest articles in your email inbox for free.
Delivered by FeedBurner
We always respect your privacy and take protecting it seriously.
Connect Social With PHPAns
Top