highlight增加行号

最新推荐文章于 2024-01-28 17:14:40 发布
最新推荐文章于 2024-01-28 17:14:40 发布
阅读量3.8k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fmuma/article/details/83063538
版权

highlight没有行号支持，发现一个插件完美解决这个问题

https://github.com/wcoder/highlightjs-line-numbers.js/

经过修改CSS，效果很赞呀！（来着前端大佬的指导，终于实现了我想要的样式 :）

在这里插入图片描述

整个样式：

<!DOCTYPE html>
<html>
<head>
	

    <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai-sublime.min.css" rel="stylesheet">

	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.5.0/highlightjs-line-numbers.min.js"></script>



    <style type=
最低0.47元/天 解锁文章
淘气的二进制
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HighTec自带的调试环境下如何显示代码行数
mnkyjy的博客
09-18 814
有时为了方便调试，想查看代码暂停后运行到哪一行，却发现没有行数显示，其实设置很简单。 鼠标右键单击，点击图中圈出来的那个。 勾选Line numbers，点击应用即可。
highlight.js 添加行号
LucienShui
02-10 4037
使用现成的轮子为 highlight.js 添加行号，略作调整。本文地址：blog.lucien.ink/archives/491
工具--docsify详解
热门推荐
李宥的博客
04-29 2万+
docsify详解 一、docsify入门 1、简介 docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。 官网地址：https://docsify.js.org/#/zh-cn/ 2、特性 无需构建，写完文档直接发布 容易使用并且轻量 (压缩后 ~21kB) 智能的全文搜索 提供多套主题 丰富的 API 支持 Emoji
Docsify使用之Markdown语法
ybb_ymm的专栏
12-31 1204
我们自己定义了一个类似于微信支付文档的标题的css，引入width:44px;}这样放在一个common.css中，在index.html引入即可，我们便能正常使用了放在根目录下，引入语句如下：这样我们也能搞出类似于微信支付的api风格文档（看上去是不是和微信支付的api很雷同呢？）：markdown语法还有很多很多,比如支持流程图、数学公式、代码块、有序和无序列表！我们今天先不学些这么多，学习一些简单的、常用的操作。有助于我们学习。欢迎大家关注我的 公 众 号 《coder练习生》
Highlight.js实现显示行号（改造highlightjs-line-number）
JianguoChow的博客
04-06 4932
一、问题描述 看到csdn官方博客在代码块内实现了添加行号的功能，于是百度了一下实现方案，简单的概括一下就是通过正则表达式匹配代码块中换行符替换为<li>以实现添加行号的功能，但是该方法存在多行注释失效的问题，如下图所示，想了好久都没能找到解决的办法 二、解决方案 我通过打开csdn页面，调用浏览器控制台进行搜索发现了csdn使用的添加行号插件的名称，那就是highlightjs-line-numer，但是该插件的语法仍然是老版本的语法，并且代码也存在一些问题，于是直接下载到本地，
JS库 Highlightjs 添加代码行号的实现代码
10-19
然而，Highlightjs 的默认功能并不包括显示代码行号。为了在使用Highlightjs时添加代码行号，我们可以采用自定义的方法来实现这个功能。 首先，我们需要在HTML中引入Highlightjs库和必要的CSS样式。Highlightjs库...
Highlight.js的行号插件可在每个代码块上自动显示行号。-JavaScript开发
05-26
在标题中提到的"Highlight.js的行号插件"是Highlight.js的一个扩展，主要用于在每一个代码块的前面自动添加行号，方便用户阅读和定位代码。 首先，我们要了解如何使用这个行号插件。在JavaScript开发中，引入...
Highlight.js的行号插件-JavaScript开发
05-26
Highlightjs-line-numbers.js Highlight.js行号插件。 演示| 解决方法安装Bower bower安装Highlightjs-line-numbers.js Npm npm安装Highlightjs-line-numbers.js Highlightjs-line-numbers.js Highlight.js行号插件...
highlightjs-line-numbers.js:Highlight.js的行号插件
05-02
Highlight.js行号插件。 | 安装 凉亭 bower install highlightjs-line-numbers.js Npm npm install highlightjs-line-numbers.js 从CDN获取库 < script src =" //cdnjs.cloudflare....
Markdown学习笔记（Markdown写代码没有行号的问题）
夫夫的博客
10-29 4151
Markdown语法 初次学习编写markdown格式的文件，如有不完善的地方恳请大家指正 标题 标题前面加#然后空格 字体 字体（左右各一个星：斜体） 字体（左右各两个星：粗体） 字体（左右各三个星：粗斜体） 引用 有志者，事竟成，破釜沉舟，百万秦关终属楚 苦心人，天不负，卧薪尝胆，三千越甲可吞吴 (>引用内容) 分割线 （三个-：—） 超链接 哔哩哔哩 [这里填链接名字]没有空格(这里填链接地址) 列表 a b 这种列表就是-加空格 表格 insert–> tabl
docsify-highlight:docsify-highlight
03-08
docsify-highlight 从源代码构建 npm install npm run build 用法 基本用法 包含vue.js [removed][removed] 包括js和CSS <link rel="stylesheet" href="dist/docsify-highlight.css"> [removed][removed] 直接使用CDN <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-highlight@latest/docsify-highlight.min.css"> `<script src="https://c
vuehighlightjs一个基于highlightjs的2x代码语法高亮组件
08-09
vue-highlightjs 一个基于highlightjs的2.x代码语法高亮组件
vue结合highlightjs实现代码高亮+行号
qq_44754016的博客
09-29 3508
实现代码高亮+行号设置 1、下载 highlightjs： npm install highlight.js` 2、在main.ts中写 import hljs from 'highlight.js import 'highlight.js/styles/stom-one-dark.css // 自定义指令 app.directive('highlight', function (el) { const blocks = el.querySelectorAll('pre code'); b
highlight.js 渲染行号
言小溪 的博客
03-07 1019
function render(){ let html = hljs.highlight('xxxx', { language: "xxx" }).value; return Array.from(html.match(/(.*?)\n/g) || []) .map( (s, i) => `<div><line>${i}</line>${s}</div>` )
markdown-it和highlight.js的结合渲染代码，并添加自定义行号
樊小书生
12-16 8137
一般写博客都采用md格式，快捷方便，但是写好之后为了方便查看，我们需要将md格式的代码解析。 markdown-it 本示例中采用的是markdown-it来解析md格式的代码。 highlight.js 本示例中采用的是highlight.js来进行代码高亮显示。 但是highlight.js不支持行号，这会导致代码看起来不方便，本示例结合给博客的highlight.js添加行号和行号高亮中的方...
html pre标签增加行号,vue使用highlight.js 添加行号
weixin_39744894的博客
06-16 747
效果图1587719278(1).jpgmain.jsimport hljs from "highlight.js";import "highlight.js/styles/atom-one-dark.css"; // 样式文件Vue.directive("highlight", function(el) {console.log("自定义指令", el);let blocks = el.quer...
Vue3+highlight.js实现代码高亮 + 行号
一步一个坑
02-13 2000
【代码】Vue3+highlight.js实现代码高亮 + 行号。
使用docsify并定制以使它更强大
weixin_30399055的博客
04-18 1761
背景 经常在网上看到一些排版非常漂亮的技术手册，左边有目录栏，右边是Markdown格式的文档，整个配色都十分舒服，就像一本书一样，一看就很让人喜欢。就比如Markdown Preview Enhanced的文档.目前网上我了解的有两种工具可以实现这样的效果，一种叫做docsify，另一种叫做Gitbook。因为MPE文档用的是docsify，而且据docsify自己的宣传，说是 不同于 Git...
在vue2 中使用highlightjs、实现代码高亮、显示代码行数。
最新发布
m0_62147585的博客
01-28 1056
5、最后可以根据下列类样式修改行号的样式。这是在 highlight_line_number highlight.js中 实现的在重新生成元素的过程中添加 class。下载完成后可以放入到 /assets/js/highlight-line-number 中。3、下载highlight-line-number.js、下列文章很清楚的说明理由。2、下载hightlightjs-line-number.js。即可实现随着你代码的更新重新生成行号。在你的页面文件中加入下列代码。main.js 中加入。
vue highlight.js显示行号
10-10
在Vue中使用highlight.js显示行号，你可以按照以下步骤操作： 1. 首先，通过npm安装highlight.js和vue-highlight.js： ``` npm install highlight.js vue-highlight.js ``` 2. 在你的Vue组件中引入highlight.js和vue-highlight.js，并注册该组件： ```javascript import Vue from 'vue'; import VueHighlightJS from 'vue-highlight.js'; import 'highlight.js/styles/default.css'; Vue.use(VueHighlightJS); ``` 3. 在需要显示行号的代码块上使用`v-highlightjs`指令，并设置行号显示的属性： ```html <template> <div> <pre v-highlightjs="{ lineNumber: true }"> <code class="javascript"> // 你的代码 </code> </pre> </div> </template> ``` 现在你的代码块将会显示行号。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值