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

Author: zemna
Date: April 17, 2021
Share this:

@nuxt/content module automatically wraps codeblocks and applies PrismJS classes.

Add code to your markdown

const http = require('http')
const bodyParser = require('body-parser')

http.createServer((req, res) => {
    bodyParser.parse(req, (error, body) => {

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>

@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:
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 :

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

    <!-- Your post display style -->

import Prism from "~/plugins/prism";

export default {
  mounted() {

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;
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram