zoukankan      html  css  js  c++  java
  • 如何使用 highlight.js 高亮代码

    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/

  • 相关阅读:
    线程安全(1)--demo1
    java--构造器与static
    I/O---读取txt文件----demo
    阳光餐厅--oracle---建表---danrong
    定位程序问题出现的原因工具-jstack
    守护线程
    线程的交互:互斥与同步
    正确的停止java中的线程
    使用GSON来生成JSON数据
    使用JSONObject类来生成json格式的数据
  • 原文地址:https://www.cnblogs.com/wx1993/p/8042226.html
Copyright © 2011-2022 走看看