Prism.js syntax highlighting for code blocks

Oct 30, 2022

Syntax highlighting is done using Prism.js with the default nord theme. You can customise to whichever theme you want from the plenty available prism themes.

HTML Code Block

An example HTML code block.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

JSX Code Block

An example jsx code block.

const Greet = () => {
  const message = `Hello World!`;
  return <div>{message}</div>;
};

CSS Code Block

An example css code block.

.layout {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 4rem;
}

...and many more. Explore all the languages supported by Prism.js.