Angular: Syntax Highlighting with Prism

You want more than <pre> tag? Just add “prism” attribute.

Photo by Malcolm Lightbody on Unsplash

TLDR; compare the difference with prism and without it.

Before vs. After

What makes it different? The difference in code is only to add “prism” attribute and “dark” class, which is optional.

<pre prism class="dark">
  var x = 1;
  var y = 2;
</pre>

Here are the steps needed to use prism component in your app.

1. Install prismjs
2. Add prism theme style to your style.css
3. Add prismjs to your app.module.ts
4. Create prism.component.ts
5. Done

1. Install prismjs

$ npm install prismjs --save-dev

2. Add prism theme style to your style.css

@import "~prismjs/themes/prism-dark.css";

Available theme css;

• prism-coy.css
• prism-dark.css
• prism-funky.css
• prism-solarizedlight.css