How to use Codeblocks & Syntax Highlighting in @nuxt/content package

Add code to your markdown

```js{1,3-5}[server.js]
const http = require('http')
const bodyParser = require('body-parser')

http.createServer((req, res) => {
    bodyParser.parse(req, (error, body) => {
        res.end(body)
    })
}).listen(3000)
```

After rendering with the nuxt-content component, it should look like this (without the filename yet):

<div class="nuxt-content-highlight">
  <span class="filename">server.js</span>
  <pre class="language-js" data-line="1,3-5"><code>
    ...
  </code>
  </pre>
</div>

@nuxt/content package display above code using PrismJS.

Lets update style.

Change themes

Install prism-themes package

npm install prism-themes --save

Set theme css file to nuxt.config.js

You can see all available css file list in prism-themes GitHub repository.

Add theme configuration to your /nuxt.config.js file.

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-dracula.css'
    }
  }
}

Create custom css file and add to nuxt.config.js

You can add any file name of custom CSS file to your project. In this tutorial, I use 'syntax-highliter.css' file name

Create syntax-highlighter.css file to /assets/css folder

You can styling as you want. You can see the sample from @nuxt/content documentation style file.

Create /assets/css/syntax-highlighter.css file and insert bellow code.

.nuxt-content {
  @apply break-words;

  & .nuxt-content-highlight {
   & > .filename {
      @apply block bg-gray-700 text-gray-100 font-mono text-sm tracking-tight py-2 px-4 -mb-3 rounded-t;
    }
  }
}

Add your css file to nuxt.config.js

Add your custom css file to css section in nuxt.config.js.

// Global CSS: https://go.nuxtjs.dev/config-css
css: [
  '~/assets/css/syntax-highlighter.css'
],

How to use Prism.js plugins

Create prism.js file to /plugins folder

You can see all available plugins by Prism.js website.

Reference : https://matthewblewitt.com/posts/build-a-static-generate-blog-with-nuxt-and-nuxt-content/

I removed css file for theme and toolbar to customize.

Create /plugins/prism.js file and add bellow code.

import Prism from 'prismjs';

// Include the toolbar plugin: (optional)
import "prismjs/plugins/toolbar/prism-toolbar";

// Include the line numbers plugin: (optional)
import "prismjs/plugins/line-numbers/prism-line-numbers";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";

// Include the line highlight plugin: (optional)
import "prismjs/plugins/line-highlight/prism-line-highlight";
import "prismjs/plugins/line-highlight/prism-line-highlight.css";

// Include some other plugins: (optional)
import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard";
import "prismjs/plugins/highlight-keywords/prism-highlight-keywords";
import "prismjs/plugins/show-language/prism-show-language";

// Include additional languages
import "prismjs/components/prism-bash.js";

// Set vue SFC to markdown
Prism.languages.vue = Prism.languages.markup;

export default Prism;

Import plugin and call `Prism.highlightAll();`

ex) /pages/ports/_slug.vue

<template>
  <article>
    <!-- Your post display style -->
  </article>
</template>

<script>
import Prism from "~/plugins/prism";

export default {
  mounted() {
    Prism.highlightAll();
  },
}
</script>

Add more style to your custom style file

ex) /assets/css/syntax-highlighter.css

.nuxt-content {
  @apply break-words;

  & .nuxt-content-highlight {

    & > .filename {
      @apply block bg-gray-700 text-gray-100 font-mono text-sm tracking-tight py-2 px-4 -mb-3 rounded-t;
    }

    .code-toolbar {
      @apply relative;

      .toolbar {
        @apply absolute top-3 right-4 opacity-75 space-x-2;

        .toolbar-item {
          @apply inline-block;
        }

        a {
          @apply cursor-pointer;
        }

        a, button, span {
          @apply text-gray-300 hover:text-gray-100 text-sm px-2 bg-gray-600 shadow-sm rounded-full leading-tight;
        }
      }
    }
  }
}