当前位置: 首页 > news >正文

仅通过 css 为代码添加行号 | code line number with CSS only

效果图:
在这里插入图片描述

完整代码:


<style>
pre > code{display:block;color:#fff;background:#282c34;/*font-size: 18px;line-height: 22px;border-radius:20px;width:80%;margin:0 auto;height:100%;overflow-y: scroll;*/padding:10px 20px;word-wrap: break-word;white-space: pre-wrap;
}/* code line number
https://webtips.dev/add-line-numbers-to-html-textarea
*/
pre{counter-reset: linenumber;}
pre > code > span::before{content: counter(linenumber, decimal-leading-zero) " ";counter-increment: linenumber;color:#506882;
}
/*
pre > code > span{display: block;}
*/
</style><pre><code>$ cat ./code/w.step2.FigureS22.MAIT_Tex.R
<br>
<span># This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. </span>
<span>library("Seurat")</span>
<span></span>
<span>RhpcBLASctl::omp_set_num_threads(1)</span>
<span>doParallel::registerDoParallel(cores=8)</span>
<span>options(stringsAsFactors=F)</span>
<span></span>
<span>oDir = "./OUT_FigS22"</span>
<span>dir.create(oDir, F, T)</span></code>
</pre>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • vxe-table树形结构使用setCheckboxRow卡顿--已解决
  • 1章1节:认识人工智能的第一节课
  • Bash考古以及 StackOverflow的2024年度技术统计报告
  • 深入浅出 Electron 的BrowserWindow
  • 线性表-单链表-C语言实现
  • 【ESP01开发实例】- ISD1820录音控制
  • JDK17下载安装卸载
  • gdb调试core dump快速入门
  • 异或高斯消元模板(板子整理)
  • 【Leetcode 242 】有效的字母异位词——这也太简单了吧
  • .gitignore不生效的解决方案
  • resource not found with Azure OpenAI service
  • day16-测试自动化之selenium的PO模式
  • # Spring Cloud Alibaba Nacos_配置中心与服务发现(四)
  • 八、MyBatis
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • Centos6.8 使用rpm安装mysql5.7
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • springboot_database项目介绍
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • use Google search engine
  • 闭包--闭包作用之保存(一)
  • 不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo...
  • 测试如何在敏捷团队中工作?
  • 对象引论
  • 力扣(LeetCode)21
  • 每天10道Java面试题,跟我走,offer有!
  • 我的业余项目总结
  • 详解NodeJs流之一
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • # 飞书APP集成平台-数字化落地
  • #DBA杂记1
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (不用互三)AI绘画工具应该如何选择
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转载)Google Chrome调试JS
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .axf 转化 .bin文件 的方法
  • .NET 8 跨平台高性能边缘采集网关
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .net 反编译_.net反编译的相关问题
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .net操作Excel出错解决
  • .NET简谈互操作(五:基础知识之Dynamic平台调用)
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件?
  • .ui文件相关
  • ?php echo ?,?php echo Hello world!;?
  • [④ADRV902x]: Digital Filter Configuration(发射端)
  • [Android] Android ActivityManager
  • [AndroidStudio]_[初级]_[修改虚拟设备镜像文件的存放位置]
  • [AR]Vumark(下一代条形码)