How to add Syntax highlight to code in your blog posts

Amazing Enyichi Agu — Tue, 13 Oct 2020 16:50:40 +0000

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 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">

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.

How to Generate random hex color values in javascript

Amazing Enyichi Agu — Wed, 29 Jul 2020 19:14:35 +0000

Generating random RGB colors in a javascript web app would be very easy to implement.

We would just have a function with no parameters which would generate a random color from 0 - 255. Something like this:

const digit = () => `${Math.round(Math.random() * 255)}`

and now to generate our colors, we make another function to return an array of three random digits

const array = () => {
  let list = [];
  for (let i = 0; i < 3; i++) {
    list.push(digit());
  }
  return list;
}
array()
//-> [155, 13, 9]

We just pushed three random numbers into the list and returned it. We also made array a function so that it dosen't have a definite value like a variable. whenever we call array(), it runs the whole thing over again and produces a different value every time.

Finally, to get a random rgb color:

const color = (r, g, b) => `rgb(${r}, ${g}, ${b})`;
color(...array())

//-> "rgb(142, 112, 11)"

Notice we had to 'spread' the array that would be returned from the function array(). These syntax are from ES6+ javascript. To learn more about it, checkout Codeacademy.

For hex colors though, we need to

Convert the numbers to base 16
Make sure we add 0 to the begining of a hex digit whoose length is not up to two

Why we are doing this is because, for example
11 in base 16 is B
14 is E
15 is F

An rgb(11,14,15) and #bef are not the same thing. The hex equivalent should be #0b0e0f. We need to pad our digits with 0.
So lets modify the array to push hex digits that have been converted to base 16 and padded. Well use padStart method for strings.

const array = () => {
  let list = [];
  for (let i = 0; i < 3; i++) {

    //convert to base 16
    let hex = digit().toString(16)

    //check if length is 2, if not pad with 0
    hex = hex.length < 2 ? hex.padStart(2, 0) : hex;

    //push hex
    list.push(hex);
  }
  return list
}

We also modify the color function to return a value in hex format

const color = (r, g, b) => `#${r}${g}${b}`;

finally, if we run color(...array()) a random hex appears.

color(...array)
//-> #efef22

This is my first blog post. Suggestions are highly welcome

DEV Community: Amazing Enyichi Agu

How to add Syntax highlight to code in your blog posts

How does it work

How to Code

How to Generate random hex color values in javascript