How to install Prism

Created Apr 6, 2021 at 16:05

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.

The core is only 1.5KB minified & gzipped, which can go up to 2KB with the currently available language definitions (CSS, Markup and JS). But many other highlighters are also small, so read on.

You can download the latest version of Prism from the GitHub releases or use a Prism CDN.

You can clone a repository from GitHub.com to your local computer.

Cloning with HTTPS URLs

git clone https://github.com/PrismJS/prism.git

Cloning with SSH URLs

git clone [email protected]:PrismJS/prism.git

Cloning with GitHub CLI

gh repo clone PrismJS/prism

Run the following command to locally install the package and its dependencies with NPM.

Downloading and installing packages locally

npm i prismjs

npm install prismjs

yarn add prismjs

Downloading and installing packages globally

npm i -g prismjs

yarn global add prismjs

Install Specific Version of a Package

npm install [email protected]

yarn add [email protected]

Bower

bower install prismjs

Example

Code 1: - You will need to include the prism.css and prism.js files you downloaded in your page.

<!DOCTYPE html>
<html>
<head>
  <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
  <pre><code class="language-css">p { color: red }</code></pre>
  <code class="language-css">p { color: red }</code>
  <script src="prism.js"></script>
</body>
</html>

Code 2: - Usage with Node

const Prism = require('prismjs');

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

// You can load more languages with the loadLanguages() utility,
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);

// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');