前端页面Markdown文档代码块高亮及显示行号

Markdown

关于 Markdown 自身和使用的语法，不需要额外多说。建议使用 Markdown 编辑器，开启预览模式，所见即所得。

Markdown 文档内容涉及代码块的，让代码块显示高亮和行号：

• highlightj.js 代码高亮
• highlightjs-line-numbers.js 代码行号

highlightj.js 优势：

• 支持189种语言和拥有95种款式
• 自动语言检测
• 多语言代码高亮显示
• 可用于 node.js
• 与任何标记一起使用
• 兼容任何js框架

使用方法

高亮

highlight.js 官网：https://highlightjs.org ，文件地址：https://www.bootcdn.cn/highlight.js/ ，往下拉可以看到对应语言的 CSS 文件。

1. 在需要渲染的页面引入样式文件

    <link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
   

2. 引入 JS 文件并添加调用命令

    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
    <script>//;
        hljs.initHighlightingOnLoad();
    </script>
   

3. 引入代码语言CSS样式文件

    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/java.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/xml.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/yaml.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/properties.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/sql.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/ini.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/javascript.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/json.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/lua.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/shell.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.0.0/languages/profile.min.js"></script>
   

代码行号

1. 添加行号插件

    <script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
    <script>//;
        hljs.initLineNumbersOnLoad();
    </script>
   

相关参考

1. 前端：给你的Markdown文章添加代码高亮及行号