Customizing Prism.js

Prism.js is a syntax highlighter for code blocks on webpages. It's what I (and most other developers) use for sharing code blocks online when it's not embedded from a service like GitHub.

Using built-in themes

You can choose one of their built-in or extended themes to get started quickly, or you can go a step further and customize it a bit like I did for my site. Let's start with using the built-in themes:

1: First let's install it via the command line

npm i prismjs

2: Then we'll import it into our index.js file

// es6 syntax
import Prism from 'prismjs';

// es5 syntax
var Prism = require('prismjs');

// your code that you want syntax highlighting on, written as a string
let code = "let testFunction = () => console.log('yo!')";

// the formatted code with syntax highlighting
let html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

3: Now we can customize the theme in our app's scss file. These are my settings in SCSS:

$color_primary: #2d9cdb;
$color_secondary: rebeccapurple;
$color_tertiary: palevioletred;

$font_family_code: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;

code {
  font-size: 14px;
  font-weight: 400;
  font-family: $font_family_code;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #555;
  padding: 10px;
}

pre.language-javascript,
pre.language-jsx,
pre.language-reason,
pre.language-html,
pre.language-css,
pre.language-scss {
  margin: 25px auto 50px auto;
  width: 80vw;
  max-width: 750px;
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;

  code {
    padding: 0;
  }
}

pre.language-css,
pre.language-scss {
  .token.operator,
  .token.entity,
  .token.url {
    color: $color_primary;
  }

  .token.string,
  .token.char,
  .token.attr-value,
  .token.regex,
  .token.variable {
    color: $color_primary;
  }

  .token.boolean,
  .token.number,
  .token.function {
    color: lighten($color_secondary, 15%);
  }

  .token.keyword {
    color: $color_primary;
  }

  .token.comment {
    color: #888;
  }

  .token.selector {
    color: $color_primary;
  }

  .token.punctuation,
  .token.property {
    color: $color_secondary;
  }
}

pre.language-javascript,
pre.language-jsx,
pre.language-reason,
pre.language-html {
  .token.operator,
  .token.entity,
  .token.url {
    color: #333;
  }

  .token.string,
  .token.char,
  .token.attr-value,
  .token.regex,
  .token.variable,
  .token.property {
    color: $color_primary;
  }

  .token.boolean,
  .token.number,
  .token.function {
    color: lighten($color_secondary, 15%);
  }

  .token.keyword {
    color: darken($color_tertiary, 15%);
  }

  .token.comment {
    color: #888;
  }

  .token.punctuation {
    color: #666;
  }
}

Using it in your code

For the styles to apply, you simply have to create a block like this:

Note: here we're using JavaScript, but you can substitute it for another language if you like, such as CSS, HTML, etc. by subsituting the className with the other language, i.e. className="language-css"

// JavaScript example
<pre className="language-javascript">
  <code>// place your code here as a string for syntax highlighting</code>
</pre>

Conclusion

Prism.js is an awesome tool for sharing your code with a much easier to read syntax highlighting like you see when using a text editor like VS Code. It's extremely easy to set up, and extra rewarding when you set up your own color scheme and start using it to share your knowledge - have fun! SL