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 PrismJS. For more information, visit https://prismjs.com.

I installed it using npm:

npm install prismjs

How to Enable PrismJS?

Add the following lines to your JavaScript file:

import Prism from "prismjs"

Prism.highlightAll()

How to Enable a Theme?

There are some themes included by default, and you can add more if desired:

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

How to Enable More Languages?

PrismJS supports many languages, but they are disabled by default. To use them, 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-alpine

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

Dog.bark

You can navigate into node_modules to see all available components.

Conclusion

Pros

• Easy to use
• Modular

Cons

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