highlight 是一款简单易用的 web 代码高亮插件，可以自动检测编程语言并高亮，兼容各种框架，可以说是十分强大了。下面就简单介绍一下如何使用这款插件。

两种使用方式：

1. 手动选择主题，官网下载highlight 库文件，并在页面中分别引用 js 和 css 文件。

2. 使用 cdn 链接。

为了简单方便，这里使用第二种方法。

cdn 地址：http://www.bootcdn.cn

highlight cdn: https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js

highlight 高亮主题cdn：http://www.bootcdn.cn/highlight.js/ （具体主题可以在页面中输入关键字搜索）

来，上代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet">

  <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

  <script >hljs.initHighlightingOnLoad();</script>

</head>

<body>

  <pre>

  <code class="javascript">

     // 这里是需要高亮的代码

      import React, { Component } from 'react'

      class ErrorBoundary extends Component {

        state = {

          error: null,

          errorInfo: null,

        }

        componentDidCatch (error, errorInfo) {

          this.setState({

            error,

            errorInfo,

            hasError: true,

          })

        }

        render() {

          if (this.state.errorInfo) {

            return (

              <details>

                <summary>Something went wrong.</summary>

                <p>{ JSON.stringify(this.state.errorInfo) }</p>

              </details>

            )

          }

          return this.props.children

        }

      }

      export default ErrorBoundary

  </code>

  </pre>

</body>

</html>

【分析】

首先在页面中引入 highlight 库文件和想要的主题 css 文件，并在下方添加代码：

<script >hljs.initHighlightingOnLoad();</script>

在需要高亮的代码外部使用 <pre><code> Your code ... </code></pre > 标签包裹，highlight 会自动检测代码语言类型，并执行高亮操作，如果识别失败，可以在code 中手动添加语言类型的类名

<code class="javascript">...</code>

在浏览器中测试效果如下：

尝试手动更换类名修改语言类型为css，刷新页面，查看高亮效果如下：

那么简单的使用方法就是这样了。更多使用方法可以参考官网：

highlight 官网：https://highlightjs.org

How to use Highlight: https://highlightjs.org/usage/

highlight 主题一览：https://highlightjs.org/static/demo/

如何使用 highlight.js 高亮代码的更多相关文章

  1. 【blog】使用highlight.js高亮你的代码

    我的代码 <!--代码高亮插件--> <link rel="stylesheet" type="text/css" href="/w ...

  2. highlight.js 页面 代码高亮

    官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...

  3. 使用highlight.js高亮你的代码

    在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何 ...

  4. 使用highlight.js高亮静态页面的语言代码

    显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...

  5. Ghost本地安装highlight.js使代码高亮

    对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...

  6. 测试使用highlight.js的代码效果

    ---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(); Response.Write("dt ...

  7. 一键生成通用高亮代码块到剪贴板，快捷粘贴兼容 TT/WX/BJ 编辑器

    有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...

  8. 给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

    经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...

  9. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

随机推荐

  1. JavaScript作用域，内部函数比参数优先级高

      var x=0; f(); console.log(x); var f=function(){ x=1; } f(); console.log(x); function f(){ x=2; } f ...

  2. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  3. deeplearning.ai 改善深层神经网络 week2 优化算法 听课笔记

    这一周的主题是优化算法. 1.  Mini-batch: 上一门课讨论的向量化的目的是去掉for循环加速优化计算,X = [x(1) x(2) x(3) ... x(m)],X的每一个列向量x(i)是 ...

  4. JavaSE（六）包装类、基本类型和字符串之间的转换、==和equals的区别

    一.包装类 Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足, 在设计类时为每个基本数据类型设计了一个对应的类进行代表,这 ...

  5. bzoj 3295: [Cqoi2011]动态逆序对（树套树 or CDQ分治）

    Description 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计 ...

  6. [bzoj1369] [Baltic2003]Gem

    结论题...一棵树里用到的颜色数不超过logn.. f[i][j]表示以i为根的子树里,i的颜色是j的方案数. g[i][j]表示max{f[i][k]},(k!=j #include<cstd ...

  7. SSH私用私钥登陆

    1.导入私钥,将私钥文件放到当前登陆用户目录下的.ssh目录下 2.指定私钥登陆,ssh -i .ssh/ssh_rsa  root@target.com 如果出现了下面这种情况 这是因为私钥文件权限 ...

  8. [国嵌攻略][161][USB总线介绍]

    USB发展史 USB(universal serial bus),通用串行总线,是一种外部总线标准.用于规范电脑与外部设备的连接和通讯.USB是在1994年底由英特尔.康柏.IBM.Microsoft ...

  9. iOS学习——键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发 ...

  10. dedecms后台怎么添加发布软件？织梦后台软件内容管理

    使用织梦cms有很多的功能,其中有一个是在dedecms后台添加发布软件,然后在前台大家可以直接下载软件,在织梦cms后台怎么添加发布软件呢?下面是织梦软件内容管理的主要操作步骤. 使用织梦cms有很 ...