Michael Thiessen

Prose Components in Nuxt 3

Invalid Date

With Nuxt Content 2 we can customize how Markdown gets rendered in our Nuxt 3 apps by creating our own custom Prose components.

We do get code highlighting built-in through Shiki, but I already have a custom theme for Prism.

So I needed to create a custom ProseCode component that used PrismJS to render the code blocks from my Markdown:

<template>

  <pre :class="`language-${language}`"

  ><code v-html="highlighted"></code></pre>

</template>
import Prism from 'prismjs';



const { code = '', language = null, filename = null, highlights = [] } = defineProps<{

  code?: string;

  language?: string | null;

  filename?: string | null;

  highlights?: Array<number>;

}>();



const highlighted = language

  ? Prism.highlight(

      code,

      Prism.languages[language],

      language

    )

  : code;

When we place this component in ~components/content and name it ProseCode, Nuxt Content knows to use it when rendering code blocks from Markdown.

We get a few props, and then use PrismJS to highlight it. This is all done on the server too, so our code is already highlighted before it hits the client.

Note: the formatting inside of the pre tag looks weird because it will preserve any formatting, including newlines. Moving the code element to the next line and indenting would cause the code rendered to the page to also have an extra newline and a few spaces in front of it.

You can create custom Prose components for most elements.

Related Articles