about uscontact

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

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

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

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

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu