highlight.js 代码高亮模块快速上手
|字数总计:406|阅读时长:2分钟|评论数:|阅读量:
对hightlight.js的使用给出一些实例代码和方向。官网:https://highlightjs.org/
CDN:https://unpkg.com/browse/@highlightjs/cdn-assets@10.5.0/
快速上手:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>highlightjs</title> <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@10.5.0/styles/vs2015.min.css"> <script src="//unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js"></script> </head>
<body> <pre> <code> #include <stdio.h> int main() { printf("Hello, World! \n"); return 0; } </code> </pre> </body> <script> document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block); }); }); </script>
</html>
|
这样会渲染code标签内的代码,其中”<>”需要进行转义。
代码会自动识别语言,也可以手动指定,例如:
1 2 3
| <code class="language-html"> your code here…… </code>
|
类也可以以language-或前缀lang-+语言名。
如果想使用纯文本或禁止高亮,则写”plaintext”与”nohighlight“。
添加行号需要额外插件或自行更改源码:https://github.com/wcoder/highlightjs-line-numbers.js
需要自动格式化,原生并未支持,可以调用js-beautify: https://www.npmjs.com/package/js-beautify
对于前端上应用可以先引用:https://cdn.rawgit.com/beautify-web/js-beautify/v1.13.4/js/lib/beautify.js
再使用js_beautify(js_source_text);即可。
更多用法(如vue下、node下)见官网:https://highlightjs.org/usage/