highlight的用法

在vue中的用法

1. 安装 ：

npm install highlight.js

2. 引入：

import hljs from 'highlight.js';

3. 在vue中注册插件

Vue.use(hljs.vuePlugin);

4. 使用

<div id="app">
    <!-- bind to a data property named `code` -->
    <!-- 变量code -->
    <highlightjs autodetect :code="code" />
    <!-- 变量code为后端返回的数据经过处理之后的 -->
	<highlightjs autodetect :code="yaml" />
 </div>
 <script>
  import {
  	lookYaml,
	} from "@/api/mysql/cluster.js";
  export default {
    data (){
		return {
			code : 'var b = 7;',
			yaml : {}
		}
	}，
	methods : {
		async looksYaml(row){
        let namespace = row.namespace;
        let name = row.metaName;
        const params = {
          namespace,
          name
        };
        const res = await lookYaml(params);
        // 这是处理yaml数据的用法
        let yamlText =  (function () {
          "use strict";
          var YAML = require('json2yaml'), yamlText;
            yamlText = YAML.stringify(res.content);
            return yamlText
        }());
        this.yaml = yamlText;
        console.log(this.yaml);
        this.dialogFormVisible = true;
      },
	}
 }
 </script>

5. 效果