How Do I Use Prismjs in My blog?

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. - prismjs documentation

How to install it?

There are several ways to install it, if you want to know more about it just navigate to its web page https://prismjs.com and download it.

In my case I used npm to install it

npm install prismjs

How to enable prismjs?

Add the following lines in your js file

import Prism from "prismjs"

Prism.highlightAll()

How to enable a theme?

There are some themes included by default, you could add more if decired, though.

import "prismjs/themes/prism-solarizedlight.css"

How to enable more languages?

PrismJS supports many languages but they are disabled by default, in order to use them you must enable them as shown below.

import "prismjs/components/prism-bash.js"
import "prismjs/components/prism-docker.js"
import "prismjs/components/prism-dot.js"
import "prismjs/components/prism-yaml.js"
import "prismjs/components/prism-ruby.js"

Syntax examples

# Bash
gh pr checkout 100

# Dockerfile
FROM ruby:2.7-alphine

# Ruby
Class Dog
  def self.bark
    puts "Guaw guaw!!!"
  end
end

Dog.bark # Guaw guaw!!!

You can navigate into node_modules and see all the available components.

Conclusion

Pros
Easy to use
Modular

Cons
Tricky, when you don’t know how to enable more components