使用 highlight.js 高亮网站代码
使用 highlight.js 高亮网站代码
aibati2008 发表于1年前
使用 highlight.js 高亮网站代码
  • 发表于 1年前
  • 阅读 23
  • 收藏 1
  • 点赞 0
  • 评论 0

首先让我们看一下highlight.js 的官方文档示例https://highlightjs.org,里边高亮的样式和语言有很多种,可以根据自己的偏好给代码上色。

具体用法:官方文档highlight用法

用法非常简单:

一、引入 highlight.js 文件

我们需要在页面中同时引入一个 js 文件和一个 css 文件,这里直接使用百度静态资源库提供的 CDN 链接提升加载速度,当然也可以引入本地的。

    <link href="http://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

二、自定义初始化

如果对高亮还有其他需求,这是可以进行初始化代设置

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
共有 人打赏支持
粉丝 12
博文 79
码字总数 60745
×
aibati2008
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: