How to Use Prism in a Vue Project（代码高亮显示插件）

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

2. 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);

3. 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:
autolinker to make the link in the code works.broken

---

原文: https://www.yasminzy.com/vue/prism.html#steps