highlight.js代码高亮脚本的基本用法

一、准备

点击 Get version 进行下载

勾选语言进行下载

下载好的文件结构

二、引入 highlight 的 CSS 样式和 js 文件

引入 CSS 主题

里面的 styles 文件夹中有非常多的样式，在使用时只需要导入想使用主题的样式即可
所有主题 Dome 效果展示

<link rel="stylesheet" href="./style/base16/nova.min.css" />

引入 js 文件

<script src="./js/highlight.min.js"></script>

初始化

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

将代码片段包裹在<pre> <code> 标签中，然后通过 class 类名指定语言

<pre><code class="JacaScript">代码片段</code></pre>

三、效果展示

四、代码行数显示

giett 仓库文件结构

只需要使用 src 中的 highlightjs-line-numbers.js 文件即可

引入代码行数显示的 js 文件

<script src="./js/highlightjs-line-numbers.js"></script>

初始化代码行数显示的插件

hljs.initLineNumbersOnLoad()

查看效果

默认情况下，行数与代码是紧挨着显示的

修改行数列的样式

使用检查元素查看代码类名
给所有带有这个类名的元素添加一个右外边距

效果展示

五、完整代码

点击查看完整代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入主题样式 -->
    <link rel="stylesheet" href="./style/base16/nova.min.css" />
    <!-- 引入代码高亮 JS 文件 -->
    <script src="./js/highlight.min.js"></script>
    <!-- 引入代码行数显示的 js 文件 -->
    <script src="./js/highlightjs-line-numbers.js"></script>
 
    <style>
      td.hljs-ln-line.hljs-ln-numbers {
        padding-right: 15px;
      }
    </style>
  </head>
  <body>
    <pre><code class="JacaScript">
function add(a, b) {
  console.log(a + b)
}
add(1, 2)
    </code></pre>
 
    <script>
      // 初始化
      hljs.initHighlightingOnLoad()
      // 初始化 行数显示的插件
      hljs.initLineNumbersOnLoad()
    </script>
  </body>
</html>

posted @ 2022-09-29 00:33 如是。阅读(1641) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JS | javascript修改元素的style属性

· 宏任务与微任务

· 2024-07-16 代码高亮插件highlight.js安装使用以及排错日志

· highlight.js的简单使用

· 浏览器中代码(html+js)高亮，并显示行数（Vue框架）

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

如是。

highlight.js代码高亮脚本的基本用法

一、准备

二、引入 highlight 的 CSS 样式和 js 文件

三、效果展示

四、代码行数显示

五、完整代码

公告

常用链接

我的标签

随笔分类

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<!-- 引入主题样式 -->
	<link rel="stylesheet" href="./style/base16/nova.min.css" />
	<!-- 引入代码高亮 JS 文件 -->
	<script src="./js/highlight.min.js"></script>
	<!-- 引入代码行数显示的 js 文件 -->
	<script src="./js/highlightjs-line-numbers.js"></script>

	<style>
	td.hljs-ln-line.hljs-ln-numbers {
	padding-right: 15px;
	}
	</style>
	</head>
	<body>
	<pre><code class="JacaScript">
	function add(a, b) {
	console.log(a + b)
	}
	add(1, 2)
	</code></pre>

	<script>
	// 初始化
	hljs.initHighlightingOnLoad()
	// 初始化行数显示的插件
	hljs.initLineNumbersOnLoad()
	</script>
	</body>
	</html>