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 .