Syntax colors (lowlight)

@plutocms/syntax-lowlight is an add-on layer. It works with every backend (the Git CMS or Supabase), on a server and on a static site. It colors the code blocks of your posts with lowlight, the grammars of highlight.js.

• On the server: the public API sends the code already colored. A page needs no JavaScript for it, and a static build colors the code when it builds.
• About 35 languages, with their short names: ts, sh, yml, py. A block in another language, or with no language, stays plain.
• The preview of the post editor shows the same colors.

Without a highlighter, Pluto shows code blocks plain. The editor of the admin has its own colors either way.

Install

npm install @plutocms/syntax-lowlight

Add it next to the backend layer of your app. It needs @plutocms/core 0.68.0 or newer.

export default defineNuxtConfig({
  extends: ['@plutocms/core', '@plutocms/syntax-lowlight'],
})

Add the theme

The colors are a stylesheet that you import. Add it to the CSS of your site, after Tailwind if the site has it:

@import '@plutocms/syntax-lowlight/theme.css';

The theme colors the code in the post body (.pluto-prose). It is light by default, and dark when the page has the dark class (the color mode of Nuxt UI).

To change the colors, set the variables:

.pluto-prose {
  --pluto-code-keyword: #d73a49;
  --pluto-code-string: #032f62;
  --pluto-code-number: #005cc5;
  --pluto-code-function: #6f42c1;
  --pluto-code-type: #22863a;
  --pluto-code-property: #e36209;
  --pluto-code-comment: #6a737d;
}

You can also skip the theme, and use any highlight.js theme: the code has the hljs-* classes.

Use it with other highlighters

A site can have more than one highlighter. See Code highlighting.