How to add Syntax highlight to code in your blog posts

title: How to add Syntax highlight to code in your blog posts published: true description: tags: Javascript, codenewbie, blog

//cover_image: direct_url_to_image.jpg

console.log("Hello World🙂")

If you've ever visited websites that highlight their code like it's in a code editor, you must be wondering. How are they doing it?

GitHub, CSS tricks, blogs dedicated to programming and even dev.to can highlight code.

You must be thinking they wrap everything up in <span> tags and give them color classes or something like that.

Wrong ❌

Programmers are lazy. Nobody has that time. There's a simpler approach to doing these things. I'll be introducing you to a library called prism. It is used for this specific purpose.

How does it work

Prism is a syntax highlighting library for web pages. There are others, but I think this one is simple, easy to grasp and easy to get started.

Oh, and css-tricks, reactjs.org and many other websites use prism. So it's definitely not a bad idea to use it. You can read the docs to see how to do it. But you don't need to. I'll just show you how we do it. Learn from experience, not from docs 😆😆😆

It's just a CSS and a js file. Like bootstrap.

First of all, download the files from their website prismjs.com.

Link the CSS in the head

<link rel="stylesheet" href="themes/prism.css">

and Javascript lower in the body

<script src="themes/prism.js">

Congratulations. You can now type in your code and it would be highlighted.

How to Code

So we're ready to write a little JavaScript.

<pre class="language-javascript">
  <code>
    function Hello() {
      console.log("Hello World🙂")
    }
  </code>
</pre>

and it appears like this.

function Hello() {
  console.log("Hello World🙂")
}

See? That wasn't so hard. The <pre> tag is for making whatever you type not to align to the left or right. For example, without the <pre> tag, this code would appear this way

function hello() {
console.log("Hello world🙂")
}

That doesn't look so pretty. So you can say the <pre> tag prevents the default. And now we have our hello() function looking like it was written in a text editor.

Also, don't forget to give it a class of the language you want, in this format.

<pre class="language-css">

<pre class="language-java">

and so on... You can use any language of your choice as far as you've downloaded the js file.

Prism also has color themes. In case you don't want your code to look off, or you want to blend it with the background. It's a beautiful library I must say. Maybe you should check out those docs. *gasps Happy coding.

Follow me on twitter @EnyichiA as I tweet about coding and my life in Nigeria.

You can also follow me here on Dev.to if you liked this article.

Good day.