Vue 页面高亮显示代码块

最新推荐文章于 2024-04-26 17:37:33 发布

执波仔丶

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量4.1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

原文链接：https://www.techgrow.cn/posts/5cf75f16.html

版权

vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

前言

Vue 页面可以基于 vue-prism-editor 实现高亮显示代码块，支持 Vue 2.x 和 Vue 3.x。

提示

vue-prism-editor 要求 Vue 的版本高于 2.6.11
若 Vue 的版本为 3.x，则需要使用 vue-prism-editor 的 feature/next 分支代码

安装模块

1	$ npm install vue-prism-editor --save

由于 vue-prism-editor 依赖了 prismjs，所以还需要安装 prismjs

1	$ npm install prismjs --save

Vue 代码

在 Vue 页面中引入 vue-prism-editor 组件，完整的示例代码如下：

<template>
  <prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter" readonly line-numbers></prism-editor>
</template>

<script>
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor'
  import 'vue-prism-editor/dist/prismeditor.min.css'

  // import highlighting library
  import { highlight, languages } from 'prismjs/components/prism-core'
  import 'prismjs/components/prism-clike'
  import 'prismjs/components/prism-javascript'
  import 'prismjs/themes/prism-tomorrow.css'

  export default {
    components: {
      PrismEditor
    },
    data: () => ({
      code: 'console.log("Hello World")'
    }),
    methods: {
      highlighter (code) {
        return highlight(code, languages.js)
      }
    }
  }
</script>

<style>
  /* required class */
  .my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }

  /* not required: */
  .height-300 {
    height: 300px;
  }
</style>

提示