使用prismjs实现Jekyll代码语法高亮并显示行号tinymce
作者：程序员11 时间：2023-06-29 人气：337 QQ交流群\邮箱:1003265987@qq.com
使用prismjs实现Jekyll代码语法高亮并显示行号
要展示的内容
prismjs 是一款轻量级可扩展的代码语法高亮库，它的使用非常简单，只需页面中引入 prism.css 和 prism.js 文件就能够轻易的将其整合进项目中使用：
<!DOCTYPE html> <html> <head> ... <link href="prism.css" rel="stylesheet" /> </head> <body> ... <script src="prism.js"></script> </body> </html>
prismjs 的配置是直接官网下载页面进行的，它有其中主题样式，支持目前各种主流的语言，还有几十种插件。为了显示行号，一定要将“Line Numbers”这个插件勾上。
根据官方文档，还需要给 pre 标签的 class 属性添加“line-numbers”值，让其显示行号，给 style 属性添加 “white-space: pre-wrap”值，让其自动换行。由于我在页面中使用了 jQuery，可以直接使用下面的代码实现：
<script type="text/javascript">
$('pre').addClass("line-numbers").css("white-space", "pre-wrap");
</script>参考资料：
链接：https://blog.csdn.net/u013961139/article/details/78853544
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
使用prismjs实现Jekyll代码语法高亮并显示行号tinymce---相关文章
HTML5-热门文章
活跃用户
