prismjs代码高亮插件的使用教程

@一棵菜菜  April 20, 2018

1、prismjs代码高亮插件:
简介:一个 JavaScript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库,使用现代化的 Web 标准构建。
参考文档:
(1)http://prismjs.com/
(2)中文:http://c7sky.com/syntax-highlighting-with-prismjs.html

2、教程:

(1)引入prism.css和prism.js。
(2)在html中使用

<pre><code class="language-css">p { color: red }</code></pre>

即可预览出CSS代码高亮的效果。
(3)若需要以其他语言的形式高亮,秩序配置class "language-"即可,如language-JavaScript.

3、若渲染无效或失败,可以尝试下面的办法Prism.highlightElement():
参考:https://stackoverflow.com/questions/22742899/using-prismjs-in-angular-app

                    if (this.basic_config.custom_heardname) {
                    // 渲染代码高亮
                    let thisobj = this;
                    this.$timeout(function () {
                        let codeDom = $('code')[0];
                        codeDom.textContent = thisobj.basic_config.custom_heardname;
                        Prism.highlightElement(codeDom);
                    }, 50);
                }

添加新评论