How to install Prism

Created

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.

Installation

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

GitHub

Latest:2021-05-19 13:34:42
License:MIT License
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

NPM

Version:1.23.0
Publish Time:2021-01-01 02:46:58
Unpacked Size:1.59 MB
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]
Bower
bower install prismjs

For more information about Prism see https://prismjs.com/.

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');

Related Tags