How to Use Prism in a Nuxt Project demo repo

Prism is a lightweight, robust, elegant syntax highlighting library.

👣 Steps

  1. Create a Nuxt project and install Prism and Vue Prism Component.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i prismjs vue-prism-component
  1. Create Prism plugin in plugins/prism.js.
import Vue from "vue";
import Prism from "vue-prism-component";

import "prismjs";

import "prismjs/themes/prism-funky.css";

import "prismjs/components/prism-scss.min";

import "prismjs/plugins/autolinker/prism-autolinker.min";
import "prismjs/plugins/autolinker/prism-autolinker.css";

Vue.component("prism", Prism);
  1. Register the plugin in nuxt.config.js.
export default {
  plugins: [{ src: "@/plugins/prism", ssr: false }]
};
  1. Use Prism, e.g. in pages/prism.vue.
<template>
  <div>
    <h1>Prism Demo</h1>

    <h2>HTML</h2>
    <prism>{{ html }}</prism>

    <h2>JavaScript</h2>
    <!-- prettier-ignore -->
    <prism language="js">const me = {
  name: "Yasmin ZY",
  country: "Indonesia"
}</prism>

    <h2>SCSS</h2>
    <!-- prettier-ignore -->
    <prism language="scss">.grid {
  display: grid;
  @media (min-width: 576px) {
    grid-template-columns: 1fr 1fr;
  }
}</prism>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: `<article>
  <h1 class="title">How to Use Prism in a Vue/Nuxt Project</h1>
  <p>Go to https://www.yasminzy.com/tutorial/prism.html</p>
</article>`
    };
  }
};
</script>

<style lang="scss" scoped>
pre:not(:last-of-type) {
  margin-bottom: 2rem;
}
</style>

📖 Explanation

  • Highlight code with prism component.
  • Specify the language in the language attribute. It is markup by default.
  • Available themes:
    • prism-coy
    • prism-dark
    • prism-funky
    • prism-okaidia
    • prism-solarizedlight
    • prism-tomorrow
    • prism-twilight
    • prism
  • Prims supports Markup, CSS, JavaScript, and C-like by default. Other component, e.g. SCSS need to be imported.
  • Plugin used:
Last updated: 7/3/2019, 1:39:42 AM