vue页面展示代码与美化

效果展示

1. 安装prism.js

   npm i prismjs -S
   //prismjs编译器
   npm i babel-plugin-prismjs -D

2. 配置 babel.config.js 文件(vuecli为4.x版本)

 "plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]
  ]

3. 在main.js引入prismjs的样式

  import 'prismjs/themes/prism.css'

4. 在页面使用 prismjs
   引入prismjs
   在mounted中调用Prism.highlightAll()

import Prism from "prismjs";
export default {
  mounted() {
    Prism.highlightAll()
  }
}

template中代码
说明：

• 要展示代码包裹在pre和code标签内
• class=“language-xx” 是规定，xx是要展示代码的语言
• 注意：< 要用 &lt转义，>用&gt 如下代码所示

<template>
  <pre>
    <code class="language-html">
        <!-- <div>hello</div> ---原代码->
        &lt;div&gt;hello&lt;div&gt;
    </code>
  </pre>
</template>

5. 最终效果 大功告成