How to Use Prism in a Vue Project demo repo

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

👣 Steps

  1. Create a Vue project and install Prism and Vue Prism Component.
npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i prismjs vue-prism-component
  1. Register Prism in src/main.js.
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";
import Prism from "vue-prism-component";
Vue.component("prism", Prism);
  1. Use Prism, e.g. in src/views/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: 6/21/2019, 2:32:45 AM