Newton's Principia Mathematica

    @cloud-ui/x-highlight.vue

    0.9.0 • Public • Published

    XHighlight 代码高亮

    三方组件, 块级展示

    本组件对 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 进行处理。

    示例

    基本用法

    在组件上设置langcontent属性。

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

    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

    Install

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

    DownloadsWeekly Downloads

    4

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    548 kB

    Total Files

    21

    Last publish

    Collaborators

    • lip966
    • damowangdexiaogenban
    • lifuquan
    • rainfore
    • zhangxiaoyudaisy