2

在Vue中使用Highlight.js遇到的坑

 2 years ago
source link: https://blog.guyskk.com/notes/%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8Highlight.js%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在Vue中使用Highlight.js遇到的坑

2016年, 10月1日

在实现 flask-restaction 的自动生成API文档功能时，用到 https://highlightjs.org/ 实现代码高亮。

首先按照文档用的是这个方法：

<script>hljs.initHighlightingOnLoad();</script>

结果是只要切换了路由，代码就没有语法高亮了，因为hljs只在页面加载时进行语法着色。

Google之后找到另一个方法 Vue 中使用 highlight.js 通过自定义Vue指令实现：

Vue.directive('highlightjs', function() {
    let blocks = this.el.querySelectorAll('pre code');
    Array.prototype.forEach.call(blocks, Hljs.highlightBlock);
})

过了几天，发现有个Bug，切换路由后，有些代码高亮的部分内容不会随着数据改变。 最后发现是highlightjs会改变DOM结构，导致Vue无法呈现数据。

解决方法如下，也是自定义Vue指令:

directives: {
    highlight: function(el, binding) {
        if (binding.value) {
            let value = null
            if (typeof(binding.value) === "string") {
                value = binding.value
            } else {
                value = JSON.stringify(binding.value, null, 4)
            }
            el.innerHTML = hljs.highlight("json", value, true).value
        }
    }
}

HTML中用法如下:

<pre v-highlight="value">Show This If No Value</pre>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK