marked的使用---hightlight.js

2021-05-31  本文已影响0人  janezhang

一款写字符串就好而显示在html上的高亮代码段工具
https://www.cnblogs.com/djtao/p/6224399.html

官网
https://highlightjs.org/usage/
修改样式的options:
https://highlightjs.readthedocs.io/en/latest/style-guide.html
vue使用方式:
js:

import hljs from 'highlight.js/lib/core';
// 样式有多种可选
import 'highlight.js/styles/stackoverflow-dark.css';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
Vue.use(hljs.vuePlugin);

vue:

<template>
  <highlightjs language='javascript' :code="codetoHtml" />
</template>
export default {
  methods:{
  codetoHtml() {
      let { apiName, params = null } = this.options

      let withParams = `let params = ${params};
      this.$bridge
      .${apiName}( params )
      .then(res => {
        console.log(res)
      })`
      let noParams = `this.$bridge
      .${apiName}()
      .then(res => {
        console.log(res)
      })`
      return params ? withParams : noParams
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读