vue中实现代码高亮,格式化

话不多说先上图

前一段时间写过一个关于js实现代码高亮的文章 https://mp.csdn.net/postedit/85159364

先在把他整合到vue中

首先先下载highlight.js文件  npm install highlight.js

在main.js中引入文件

//代码高亮文件引入
import hljs from 'highlight.js'
//样式文件,这里我选的是sublime样式,文件里面还有其他样式可供选择
import 'highlight.js/styles/monokai-sublime.css' 

在main.js中然后自定义指令

Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})

位置如图

最后在组件中使用,同样还是要放在pre标签下的code标签里面

<template>
    <div v-highlight> <!-- 使用指令 -->
        <pre>
            <code class="css"><!-- 声明什么类型的代码 -->
                [CSS]
                {
                    width:'100px'
                }
            </code>
            <code class="javascript">
                [javascript]
                var a = 123;
                var b = document.getElementById('tr')
            </code>
            <code class="html">
                [HTML]
                &lt;div&gt;&lt;/div&gt;<!-- html代码需要转义 -->
            </code>
        </pre>
    </div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    mounted:function(){

    },
    methods:{

    }
}
</script>

就这么简单,搞定

【右上角点个赞,谢谢】

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值