XHighlight 代码高亮

• 安装配置
  • 安装
  • 引入
  • 打包配置
• 示例
  • 基本用法
• API
  • Props/Attrs
  • Events
  • Methods

三方组件, 块级展示

本组件对 highlight.js 进行了封装，方便代码高亮展示。

安装配置

安装

npm i --save @cloud-ui/x-highlight.vue

引入

直接注册

import XHighlight from '@cloud-ui/x-highlight.vue';

Vue.component('x-highlight', XHighlight);

或者使用 vusion-utils 安装（常用于同时安装多个组件）

import { install } from 'vusion-utils';
import XHighlight from '@cloud-ui/x-highlight.vue';

install(Vue, { XHighlight });

打包配置

由于 highlight.js 包较大，可以添加在 Webpack 的配置里 externals 中。

或者用 dll 进行处理。

示例

基本用法

在组件上设置lang和content属性。

为了控制打包大小，我们没有引入全量包。使用时还需按照下面的方式，自行引入语言包和样式包。

import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
import 'highlight.js/styles/tomorrow.css';

更多语言和样式可以查看源码中的语言目录，样式目录。

下面是一段 javascript 的例子。

<template>
<x-highlight lang="javascript" :content="content"></x-highlight>
</template>

<script>
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

export default {
    data() {
        return {
            content: `
const flat = {};
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
    const flatten = memo.concat(item);
    flat[index] = flatten;
    return flatten;
});
            `,
        };
    },
};
</script>

下面是一段 html 的例子，html 的语言包名称是 xml。

<template>
<x-highlight lang="html" :content="content"></x-highlight>
</template>

<script>
import hljs from 'highlight.js/lib/highlight';
import xml from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('xml', xml);

export default {
    data() {
        return {
            content: `
<div class="app">
    <button>Button</button>
</div>
            `,
        };
    },
};
</script>

API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | content | string | | '' | 原始代码内容 | | lang | string | | '' | 语言 | | auto | boolean | | false | 是否自动探测代码中的语言 | | preRender | Function<content: string, lang: string> | | 'this.defaultPreRender' | 渲染前对代码的处理函数 | | postRender | Function<result: string> | | 'this.defaultPostRender' | 渲染后对结果的处理函数 |

Events

@before-render

渲染前触发

| Param | Type | Description | | ----- | ---- | ----------- | | $event.content | string | 原始代码内容 | | $event.lang | string | 语言 | | $event.result | string | 渲染后的结果 | | $event.preventDefault | Function | 阻止渲染流程 | | senderVM | XHighlight | 发送事件实例 |

@render

渲染后触发

| Param | Type | Description | | ----- | ---- | ----------- | | $event.content | string | 原始代码内容 | | $event.lang | string | 语言 | | $event.result | string | 渲染后的结果 | | senderVM | XHighlight | 发送事件实例 |

Methods

render()

渲染代码。初始化时和content属性改变时会自动调用。

| Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |