使用 highlight.js 高亮代码

npm webpack 方式使用

    //  导入            
    import hljs from 'highlight.js/lib/highlight';
    import 'highlight.js/styles/default.css';
    import javascript from 'highlight.js/lib/languages/javascript';

    // 生成
    hljs.registerLanguage('javascript', javascript);
    hljs.highlightBlock( dom );    

html 引入方式

// 默认css
<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/default.min.css" rel="stylesheet">
// 主题模式
// github 风格
<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/github.min.css" rel="stylesheet">
// google 风格
<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/googlecode.min.css" rel="stylesheet">

// js 代码库
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>

// 使用方式
<script>
    (function( document ){
        hljs.initHighlightingOnLoad()
        // 监听dom载入  获取dom 添加高亮
        document.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
        });
    })( document )
</script>