How to make your code more beautiful on WordPress

How to make your code more beautiful on WordPress

 

Because I have started using it only few days ago, I have to make a small article about it. If you are using TinyMCE on WordPress, you should already have more functionality for the code rendering in an article. But if you want to have beautiful colors and perfectly readable code there is a small jquery plugin for that.

/////////////////////////////////////////////////////////////////

                          highlightjs

/////////////////////////////////////////////////////////////////

This small jquery code will automatically color 162 languages with 74 styles available.
So let's see how to use it !
You just have to add this code in your theme header:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/railscasts.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

And you can replace railscasts.min.css with another style available on the highlightjs website. Currently I'm using gist-github style.

To use highlightjs in your article, just add :

<pre><code> 
Your code
</code></pre>

So let's add some code to our articles !