@cloud-ui/x-highlight.vue

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