highlight.js简介

  • 189种语言和94种样式
  • 自动语言检测
  • 多语言代码突出显示
  • 可用于node.js
  • 适用于任何标记
  • 与任何js框架兼容

如何使用

1.选择好自己的代码高亮样式,喜欢哪个颜色就记住它的名称,待会儿引入时就使用这个名称的CSS文件引入样式即可,记住以后点击获取版本

2.选择自己需要的代码类型,但是这里它已经默认给你选择好了,个人博客的话完全都是够用的所以就不需要再去选择其他的了,最后点击页面下的Download按钮进行下载即可

3.下载后得到一个压缩包,压缩包解压之后得到以下文件

4.将下载的文件在HTML文件的head标签当中进行引入

<script src="./highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="./highlight/styles/atom-one-dark.css">
<script>hljs.initHighlightingOnLoad();</script>

剖析以上代码:

第一个引入的JS文件是属于highlight.js的核心文件,也就是你刚选择需要高亮的代码类型

第二个引入的CSS文件是属于highlight.js的高亮样式文件,也就是你刚刚所记住的样式风格文件,样式风格文件有很多种,选择一个自己喜欢的样式引入即可(样式名对应样式文件)

第三个属于highlight.js核心文件当中的回调函数

5.使用highlight.js语法实现代码框(在body标签当中写)

实现的效果:

实现highlight.js代码行号

发现代码块中并没有行号,看着始终缺点儿啥,那就赶紧实现一个行号吧

1.使用jQuery动态添加列表元素

<script>
    $("code").each(function () {
        $(this).html("<ul><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
    });
</script>

2.在内嵌样式中给动态添加的元素添加样式,代码如下

p {
    border: 1px solid #ccc;
}

body {
    margin-bottom: 200px;
}

body pre {
    width: 500px;
    border-radius: 7px;
    padding: 0px;
    margin: 0px;
    box-shadow: 2px 2px 10px black;
}

.hljs {
    border: 0;
    font-family: "Consulas", "Courier New", Courier, mono, serif;
    font-size: 12px;
    background: #333;
    display: block;
    padding: 1px;
    margin: 0;
    width: 100%;
    font-weight: 200;
    color: #333;
    white-space: pre-wrap
}

.hljs ul {
    list-style: decimal;
    margin: 0px 0px 0 30px !important;
    padding: 10px;
}

.hljs ul li {
    border-left: 1px solid rgb(107, 107, 107) !important;
    background: #333;
    padding: 5px;
    margin: 0 auto;
    line-height: 14px;
    word-break: break-all;
    word-wrap: break-word;
    color: white;
}

效果完成:

最后修改:2020 年 08 月 06 日 04 : 04 PM