How Do I Use Prismjs in My blog?

by Juan Vásquez, 30 May 2022
daily, bridgetownrb

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


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

Dog.bark # Guaw guaw!!!

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


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