Javascript is required
ยท
5 min read

How to Create a Custom Code Block With Nuxt Content v2

How to Create a Custom Code Block With Nuxt Content v2 Image

Code blocks are essential for blogs about software development. In this article, I want to show you how can define a custom code block component in Nuxt Content v2 with the following features:

  • Custom styling for code blocks inside Markdown files
  • Show language name (if available)
  • Show file name (if available)
  • Show a "Copy Code" button

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it's possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let's start a new Nuxt Content project with:

bash
npx nuxi init nuxt-custom-code-blocks -t content

Then we need to install the dependencies in the nuxt-custom-code-blocks folder:

bash
yarn install

Now we can start the Nuxt content app in development mode:

bash
yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the application we create in this article:

Custom Prose Component

Prose represents the HTML tags output from the Markdown syntax in Nuxt Content. Nuxt Content provides a Vue component for each HTML tag like links, title levels, etc.

It's possible to override these Vue components, which is precisely what we'll do to create a custom code block component.

To customize a Prose component, we have to perform these steps:

  • Check out the original component sources.
  • Use the same props.
  • Name it the same in our components/content/ directory.

In our example, we want to override ProseCode, which is Nuxt Content's default Vue component to render code blocks in Markdown files.

This component accepts the following props:

  • code: the provided code as a string
  • language: the provided language name
  • filename: the provided filename
  • highlights: a list of highlighted line numbers

Let's take a look at how we can set these values in a Markdown file:

1```js [src/index.js] {1, 2-3}
2  const a = 4;
3  const b = a + 3;
4  const c  = a * b;
5  ```

In the above example:

  • js is the value passed to the language prop
  • src/index.js is the value passed to the filename prop
  • [1, 2, 3] is the value passed to the highlights prop

To override the component, we create ProseCode.vue in the components/content directory and use the exact same props that are defined in the default component:

1<template>
2  <slot />
3</template>
4
5<script setup lang="ts">
6const props = withDefaults(
7  defineProps<{
8    code?: string
9    language?: string | null
10    filename?: string | null
11    highlights?: Array<number>
12  }>(),
13  { code: '', language: null, filename: null, highlights: [] }
14)
15</script>

Now we can customize this component however we want.

Style Container

First, we want to style the container that includes the code. Therefore, we wrap the <slot /> in a div and style it:

1<template>
2  <div class="container">
3    <slot />
4  </div>
5</template>
6
7<style scoped>
8.container {
9  background: #1e1e1e;
10  position: relative;
11  margin-top: 1rem;
12  margin-bottom: 1rem;
13  overflow: hidden;
14  border-radius: 0.5rem;
15}
16</style>

Let's take a look at our custom code block:

Styled Code Block Container

Show Language

Next, we want to show the name of the language on the top right, if it is available.

1<template>
2  <div class="container">
3    <span v-if="languageText" :style="{ background: languageBackground, color: languageColor }" class="language-text">
4      {{ languageText }}
5    </span>
6    <slot />
7  </div>
8</template>
9
10<script setup lang="ts">
11const props = withDefaults(
12  defineProps<{
13    code?: string
14    language?: string | null
15    filename?: string | null
16    highlights?: Array<number>
17  }>(),
18  { code: '', language: null, filename: null, highlights: [] }
19)
20
21const languageMap: Record<string, { text: string; color: string; background: string }> = {
22  vue: {
23    text: 'vue',
24    background: '#42b883',
25    color: 'white',
26  },
27  js: {
28    text: 'js',
29    background: '#f7df1e',
30    color: 'black',
31  },
32}
33
34const languageText =