DEV Community

loading...

How to add Syntax highlight to code in your blog posts

enyichiaagu profile image Enyichi A. Agu Updated on ・2 min read
console.log("Hello World🙂")
Enter fullscreen mode Exit fullscreen mode

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 https://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 https://prismjs.com.

Link the CSS in the head

<link rel="stylesheet" href="themes/prism.css">
Enter fullscreen mode Exit fullscreen mode

and Javascript lower in the body

<script src="themes/prism.js">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

and it appears like this.

function Hello() {
  console.log("Hello World🙂")
}
Enter fullscreen mode Exit fullscreen mode

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🙂")
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
<pre class="language-java">
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide