使用highlight.js高亮你的代码
程序员文章站
2024-03-26 13:16:23
...
自己写项目的时候,你引入的编辑器对于代码的处理可能不是你想要的效果,或者是代码跟文章混在一起,不能起到很好的让人一眼就定位到代码的位置。这时候你就需要一个代码高亮的插件来让你的代码更富有活力。
我使用的是highlight.js这个插件,这个具体的使用方法在官网上有,这里我只简单的介绍一下怎么引入。
根据官网的doc,只需要三行代码就可以使用了,非常方便,自己写了个小demo测试了一下。还是很有效果的。
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>
直接引cdn的文件就好了。就是下面这个样子,觉得配色不和你胃口的,就去官网参考一下其他配色。
推荐阅读
-
使用highlight.js高亮你的代码
-
python中为其他函数添加额外功能,而不修改源代码的方式-------装饰器的使用讲解及代码示例(类似于java的装饰设计模式)
-
android中的spannable的使用 androidspannable超链接字体高亮下划线
-
IntelliJ IDEA 设置代码提示或自动补全的快捷键 (附IntelliJ IDEA常用快捷键) 博客分类: idea intelliJ IDEAideaidea快捷键idea使用教程
-
Prettify 使用 代码高亮 博客分类: js Prettify使用代码高亮js
-
KVO 的代码简洁使用
-
数据结构:数组详细介绍,你足够了解数组的特性和使用场景吗?
-
CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件
-
Vue基础精讲 —— 规范代码三步走?关于eslint和editorconfig以及precommit的安装和使用
-
使用elementUI的日期时间选择器+下拉菜单+tab切换+table表格完成排行榜的切换及按年月周查询(部分代码)