开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >在博客园平台为代码添加行号显示

在博客园平台为代码添加行号显示

DechinPhy

发布于 2021-05-21 07:07:54

发布于 2021-05-21 07:07:54

73200

代码可运行

举报

文章被收录于专栏：Dechin的专栏Dechin的专栏

运行总次数：0

代码可运行

效果预览

在前面两篇文章中，我们分别为大家介绍了如何在博客园平台的文章添加目录，以及为文章代码添加高亮，在这篇文章中我们介绍下为文章中的代码添加行号显示，具体效果如下所示（效果图的源文章请参考这篇博客）：

插入页脚代码

在设置-页脚HTML代码中插入如下代码：

<link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

版权声明

本文首发链接为：https://cloud.tencent.com/developer/article/1827378

作者ID：DechinPhy

更多原著文章请参考：https://www.cnblogs.com/dechinphy/

参考链接

https://www.cnblogs.com/sxgsxg/p/13529556.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-03-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

腾讯云开发者社区

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

腾讯云开发者社区

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

markdown javascript css html

博客园的markdown模式下的代码高亮功能使用的是highlight.js，没有行号和显示相应编程语言的功能，只好自己将其改造了一下(将这两种功能一并实现了)~

Enjoy233

2019/03/01

3.7K0

第 09 篇：让博客支持 Markdown 语法和代码高亮

html markdown django javascript github

为了让博客文章具有良好的排版，显示更加丰富的格式，我们使用 Markdown 语法来书写博文。Markdown 是一种 HTML 文本标记语言，只要遵循它约定的语法格式，Markdown 的解析工具就能够把 Markdown 文档转换为标准的 HTML 文档，从而使文章呈现更加丰富的格式，例如标题、列表、代码块等等 HTML 元素。由于 Markdown 语法简单直观，不用超过 5 分钟就可以轻松掌握常用的标记语法，因此大家青睐使用 Markdown 书写 HTML 文档。下面让我们的博客也支持使用 Markdown 写作。

HelloGitHub

2021/05/14

6170

volantis主题修改代码高亮样式

hexo默认的代码高亮样式有时候不够好看，而highlightjs可以自己引用很多好看的样式，比如vs样式。但是它却不支持行号，因此有了这篇修改教程。

GOOPHER

2022/03/31

1.5K0

volantis主题修改代码高亮样式

博客园自定义模板_锁屏样式怎么弄自定义

css markdown https java javascript

一直都用博客园写博客，后面自己曾经想自己写一个博客项目，但是因为各种各样的事情最后做了一半就没能继续做下去。但是中间定制markdawn样式的时候接触到的代码高亮插件highlight.js倒是给我留下了很深的影响，今天有时间于是决定利用当初的经验重新diy一下博客园的代码块样式，算是对夭折的博客项目的一个弥补吧。

全栈程序员站长

2022/09/23

4580

博客园自定义模板_锁屏样式怎么弄自定义

基于django的个人博客网站建立（七）

基于django的个人博客网站建立（七）前言这次在原来的基础上添加或修改一些小功能具体内容 1.代码高亮在原来的blog-details.html页面添加下面的代码： <link href="http://cdn.bootcss.com/highlight.js/9.12.0/styles/googlecode.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.

py3study

2020/01/15

7030

基于django的个人博客网站建立（七）

在博客园平台为代码添加高亮

https 网络安全 css html 腾讯云开发者社区

本文首发链接为：https://www.cnblogs.com/dechinphy/p/highlight.html 作者ID：DechinPhy 更多原著文章请参考：https://www.cnblogs.com/dechinphy/

DechinPhy

2021/05/21

5910

想有自己的博客吗？浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)

markdown 腾讯云开发者社区 html javascript 渲染

MarkDown，写作神器，还是有必要掌握一下。写作也是一种很重要的能力，需要长久坚持和锻炼。

杨永贞

2020/08/04

1.1K0

百度编辑器 UEditor 用 highlight.js 库实现代码高亮

编程算法 css https javascript 网络安全

首先到官网去下载这个插件：https://highlightjs.org/download/

Savalone

2020/02/11

2K0

百度编辑器 UEditor 用 highlight.js 库实现代码高亮

轻量级Web代码语法高亮库 highlight.js

code highlight script web 语法

而网上有不少的前端的代码高亮库，例如https://github.com/PrismJS/prism-themes 。针对这个样式我有介绍各种Theme的效果Prism-Themes 代码主题样式效果 (zinyan.com)

zinyan.com

2023/07/13

2.1K0

轻量级Web代码语法高亮库 highlight.js

在Hugo博客中加入代码高亮

云服务器对象存储实时音视频 ICP备案

相信自己搭建博客的人中有一大半都是玩代码的，所以代码高亮可以说是博客的必备功能。本文提供一个在基于Hugo的博客上使用highlight.js的代码高亮方案。

徐建国

2021/08/04

1.7K0

你真的了解博客园的目录么。。

非常感谢这位盆友能发现这个问题，奖励鸡腿，这是那篇博文：要嫁就嫁程序员，因为。。。

Dawnzhang

2018/10/18

8380

Jupyter-Notebook版的博客园美化

https html 微信 cdn

文章汇总：https://www.cnblogs.com/dotnetcrazy/p/9160514.html

逸鹏

2018/06/20

1.1K0

Jupyter-Notebook版的博客园美化

Markdown 语法 Markdown 语法

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

一个会写诗的程序员

2018/08/20

1.6K0

在博客园平台为博客自动化添加目录

https 网络安全腾讯云开发者社区 html

以下示例效果文章的源地址是这篇博客，在完成配置后，在markdown里面的一级标题二级标题等都会在这里的目录中显示，这里仅提供了文章开头目录以及每一个标题中回到顶部的功能，如果需要悬浮窗的目录显示，需要参考其他文章，如这篇博客介绍了小型悬浮窗的效果，但是只能用于二级标题和三级标题的文章。本文的配置方法使用了参考链接1中所给出的方法，效果如下图所示：

DechinPhy

2021/05/21

5650

HTML highlight 代码前端高亮、代码美化

javascript c++css django 编程算法

1. 让 pre 按钮在Django 后台 ckeditor 富文本编辑器中显示出来，ckeditor 的 config.js 文件里添加插件：codesnippet

卓越笔记

2023/02/16

2.9K0

HTML highlight 代码前端高亮、代码美化

OAuth2授权服务器Id Server一键生成配置原理

spring 编程算法开源

OAuth2客户端的配置参数非常多，虽然Id Server通过控制台可视化解决了创建OAuth2客户端的问题。但是如何进一步降低OAuth2的使用难度，把创建的OAuth2客户端转化为配置成为了刚需，从技术角度上感觉也并不是很难实现。

码农小胖哥

2022/05/22

6440

OAuth2授权服务器Id Server一键生成配置原理

让网站速度更更上一层楼,使用instantclick预加载

jquery javascript 渲染 css 网站

InstantClick 是一个 JavaScript 库，可以显着加快您的网站速度，工作原理是预加载你可能点击的链接来欺骗。

王图思睿

2021/06/15

4920

在博客园随笔中插入3D分子模型

https 网络安全 html 网站

博主对前端技术不甚了解，只是想在博客中直接展示一些已有的分子结构，而且需要是可以交互的。而我们了解到通过3Dmol这样的前端工具可以实现，通过在博客园随笔中直接引入3Dmol的js最新脚本，然后在当前页构建一个容器，最后在容器中以字符串的形式填进去分子结构，比如可以填充一个xyz文件所定义的3D分子结构。由于不需要安装什么特定的软件（假设你已经生成好了一系列的分子模型用于展示，否则可以参考前面这篇博客用openbabel去生成一些特定的分子结构），我们直接上前端代码吧。

DechinPhy

2022/11/22

6250

Django添加ckeditor富文本编辑器

javascript django 编程算法 css python

源码 https://github.com/django-ckeditor/django-ckeditor

菲宇

2022/12/21

2.3K0

实现支持Markdown的编辑器的三种方式

http bootstrap markdown

http://toopay.github.io/bootstrap-markdown/

lilugirl

2019/05/26

5730

相关推荐

改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

目录

效果预览

插入页脚代码

版权声明

参考链接

加入讨论

的问答专区 >

穿过生命散发芬芳0

相关课程

一站式学习中心 >

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

AI代码助手快速上手训练营

腾讯云代码助手

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验