搜索
简帛阁>技术文章>highlight.js代码高亮脚本的基本用法

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

一、准备

  • highlight.js官网
  • 下载界面
  • 中文文档
  • 代码行数显示插件
  1. 点击 Get version 进行下载

  1. 勾选语言进行下载

  1. 下载好的文件结构

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

  1. 引入 CSS 主题

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

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

  1. 引入 js 文件

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

  1. 初始化

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

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

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

三、效果展示

四、代码行数显示

  1. giett 仓库文件结构

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

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

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

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

hljs.initLineNumbersOnLoad()

  1. 查看效果

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

  1. 修改行数列的样式

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

  1. 效果展示

五、完整代码

点击查看完整代码
<!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>

一、准备highlightjs官网下载界面中文文档代码行数显示插件点击Getversion进行下载勾选语言进行下载下载好文件结构二、引入highlightCSS样式和js文件引入CSS主题里面s
在逛别人博客时候,看见别人代码例子使用了高亮语法,无论是java,js还是php等等语言,都会自动对关键字进行高亮。于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何
在网页使用过程中,经常会用到代码展示。而不同颜色代码,可以让代码看起来更直观,也更美观。找了几个不同插件,觉得highlight插件比较实用,而且用起来炒鸡简单。比如这样:首先,我们先下载一个
网:https://highlightjsorg/下载地址:https://highlightjsorg/download/下载到本地后,新建个页面测试1、在head中加入css和js引用<
通过highlightjs库实现对文章正文HTML中的代码元素自动添加语法高亮,highlightjs官方文档下载highlightjsnpmihighlightjs导入highlightjsimpo
目录背景描述:一、安装依赖:二、在vue3主入口main文件,对highlight进行引入和注册:三、页面使用:四、看下效果展示吧:五、一些优化:1问题2解决方法3处理后效果总结背景描述:在项目开发
在vue项目中,通过highlightjs,如何实现页面中代码高亮?一、安装highlightjsnpminstallhighlightjssave或yarnaddhighlightjs二、封装成vu
主要从两个方面入手了:1高亮显示/换行2复制代码按钮这两方面都有现成插件。代码高亮插件——highlightjs1下载highlightjs文件。https://highlightjsorg/点击
下包npmihighlightjs2页面中引入importhljsfromhighlightjsimporthighlightjs/styles/vs2015css3使用原理对pre>code代码
录效果如下第一步安装highlightjs第二步在mainjs中引入第三步创建组件效果如图:点击显示代码第四步:使用组件第五步实现点击复制代码clipboardjs。本文主要介绍了Vue中使用hig