如何使用 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/
如何使用 highlight.js 高亮代码的更多相关文章
- 【blog】使用highlight.js高亮你的代码
我的代码 <!--代码高亮插件--> <link rel="stylesheet" type="text/css" href="/w ...
- highlight.js 页面 代码高亮
官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...
- 使用highlight.js高亮你的代码
在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何 ...
- 使用highlight.js高亮静态页面的语言代码
显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...
- Ghost本地安装highlight.js使代码高亮
对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...
- 测试使用highlight.js的代码效果
---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(); Response.Write("dt ...
- 一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器
有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...
- 用 highlight.js 为文章中的代码添加语法高亮
来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...
随机推荐
- 利用 html2canvas 做个简单的诗词卡片生成器
html2canvas 简介 html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图.网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现 ...
- 如何在vue-cli webpack中全局引入jquery
1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首 ...
- 一次Oracle宕机切换后产生ORA错误的处理过程
问题背景 机房意外断电后Oracle主服务器启动失败,Oracle备机接管 为了安全,管理员对于数据库做expdp的逻辑备份.但备份时发现AttributeInstance表备份失败,提示ORA-01 ...
- 部署java项目到阿里云服务器(centos7版本)
一.搭建环境 1.搭建java环境(64位) 一.准备压缩包,rpm包或者tar包,将其上传到阿里云对应的文件夹(我用的工具是WinSCP,百度一下就有下载资源) 二.若是rpm包,可以通过 rpm ...
- 学习笔记-echarts自定义背景图片
困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...
- [bzoj2157]旅游 (lct)
这个应该也算裸的模板题吧..主要是边权的问题,对于每条边u->v,我们可以新建一个节点代替他,把边的信息弄到新的点上,就变成u->x->v了... 当然了这样的话要防止u和v这些没用 ...
- hdu_4869(费马小定理+快速幂)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4869 Turn the pokers Time Limit: 2000/1000 MS (Java/O ...
- 如何使用padlepadle 进行意图识别-开篇
前言 意图识别是通过分类的办法将句子或者我们常说的query分到相应的意图种类.举一个简单的例子,我想听周杰伦的歌,这个query的意图便是属于音乐意图,我想听郭德纲的相声便是属于电台意图.做好了意图 ...
- 在Ubuntu虚拟机搭建数据库系统
连接数据库: mysql -uroot -p 输入数据库密码即可登陆. 查看mysql版本信息: mysql> select version(); +---------------------- ...
- .26-浅析webpack源码之事件流make(1)
compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...