Highlight Your Code With Prism or Rainbow

 

– When you writing a tutorial, there will be 60% of article which comes with coding means if you are going to give tutorial on How to make a Facebook like header bar then you have to show-off your code on article. So it’s good show your code with highlighting with the colours with the help of Prism or Rainbow.
– First of all, Let’s know about Prism and Rainbow.
Prism: It’s made by Lea Varou. As you all know that she is just awesome Web Developer .
Rainbow: It’s made by craig campbell. He is also a Web Developer.

Rainbow

– The rainbow can be found here.It’s tagline is that Your code is beautiful show it off. This will work with many languages as explained in the link. First select your necessary languages and then download it. In the Production version, Themes haven’t included so you have to download it from github. Then import to your blog/website.
You have to use it with <pre> and <code> code(s).There is a simple example how to setup.
– This will work as a default syntax.

<pre><code data-language="css">
    body {
      padding: 5px 2px;
      border: 1px solid red;
      color: aqua;
      background: brown;
    }
</code></pre>
  • It’s used for default syntax means data-language is differ when you want to use other lang. like markup(html),css etc.
  • <br /> should not work on it.

– Remember that you have added rainbow.min.js and css theme.

Prism

Prism is just awesome. I like it very much.

Prismjs.com, It’s a project by Lea varou.It’s also providing you many themes as Rainbow.
Goto link and click on download and then Just download those files and import to your site/blog and use as like as given in example.

<pre><code class="language-css">

< !-- Your codes goes here -- >

</code></pre>

– In Prism, You should/can not use the html tags means if you want to write <br /> then you have to type &lt;br /&gt;.
You can see that in rainbow that is another attribute and in Prism, The attribute is class.
– So don’t forget that.
– If you are writing a line and if it goes beyond the width of it then it’ll automatically take scroll like as seen in this example.

See the Pen bBpKI by kaushalya (@kman) on CodePen

– You can use both, Rainbow and Prism, But use as per your choice and necessary. Thanks for giving your precious time to read my post. Contact or comment for any queries/question/problem.

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *