首页 > 其他分享 >CSS给代码添加行号

CSS给代码添加行号

时间:2024-02-03 20:55:31浏览次数:17  
标签:pre color counter 行号 添加 line border CSS

 

    pre{
        width: 96%;
        margin: auto;
        border-radius: 15px 15px;
        border: 3px solid #000;
        background-color: #445;
        padding-left: 10px;
        color: #fff;
        counter-reset: line; /* 初始化计数器 */
    }
    pre ::before {
        counter-increment: line; /* 计数器增量。默认增量是 1 */
        content: counter(line); /* 设置内容为当前行号 */
        display: inline-block;  /* 让行号水平显示 */
        width: 20px;            /* 调整行号宽度 */
        text-align: left;       /* 右对齐行号 */
        border-right: 1px solid #ddd;
        padding: 0 .5em;
        margin-right: .5em;     /* 调整行号与文本之间的间距 */
        color: #888;            /* 修改行号颜色 999*/
    }
    pre p{display: inline;margin: 0 auto;}
<code style="background-color:#f0f0f0;width:90%;display:inline-block;">  </code>

  

标签:pre,color,counter,行号,添加,line,border,CSS
From: https://www.cnblogs.com/yisuo/p/18005188

相关文章

  • 金蝶云星空业务对象添加网络互控存储在哪些表
    一、【网控操作列表】确定后数据写入 --业务对象的操作列表《网络控制对象》主表SELECT*FROMT_BAS_NETWORKCTRLOBJECTWHEREFMETAOBJECTID='XXXX_AS_AfterOrder';--《网络控制对象》多语言 SELECT*FROMT_BAS_NETWORKCTRLOBJECT_LWHEREfidIN(SELECTFIDFROM......
  • 金蝶云星空业务对象添加网控设置
    一、排查是否已经网控设置二、网控设置    ......
  • Pdfium.Net.Free 一个免费的Pdfium的 .net包装器--添加水印
    项目地址:Pdfium.Net:https://github.com/1000374/Pdfium.NetPdfiumViewer:https://github.com/1000374/PdfiumViewer添加水印函数定义:///<summary>///AddWaterMark///</summary>///<paramname="text"></param>///<paramnam......
  • fastAdmin中手动添加列表的选项卡
    一、效果:点击选项卡筛选符合的数据 二:实现方法:1.index.html里面写上列表: <divclass="panel-heading"> {:build_heading()} <ulclass="navnav-tabs"data-field="type"> <liclass="active"> <ahref=&......
  • Blazor中使用npm、ts、scss、webpack且自动导入到html
    1、新建一个BlazorApp项目2、新建文件夹WebLib,并在终端中打开执行指令npminit-y在WebLib目录下新建tsconfg.json文件{"compilerOptions":{"noImplicitAny":false,"noEmitOnError":true,"removeComments":false,"sourceMa......
  • Teamcenter SOA开发如何添加更改BOM的子件
    1、关键是addOrUpdateChildrenToParentLine方法2、主要执行完addOrUpdateChildrenToParentLine,要对BOMWindow进行保存!voidtest(){ try{ DataManagementServicedmService=DataManagementService.getService(AppXSession.getConnection()); ServiceDataserviceData......
  • css
    波浪<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>波浪</title> </head> <styletype="text/css"> *{ padding:0; margin:0; } .blue{ width:100%; height:......
  • react 点击按钮 div隐藏显示 添加展开收起动画效果
    js代码const[collapse,setCollapse]=useState(false)  const[showBack,setShowBack]=useState(false)  constchangeCollapse=()=>{//获取展开收起目标元素    constheaderDes=document.querySelector('.phone_header_des');  ......
  • 为登录页,添加登录逻辑代码,实现登录
    使用PyQt5(PySide2)+SQLAlchemy做一个登录注册页(四)本文将介绍自己用PyQt5+SQLAlchemy做的一个登录注册页,使用邮箱接收验证码,本文介绍是前后端未分离的实现方式,后续将出一个前后端分离的,你可以将PyQt5改为PySide2以获得更宽松的开源协议本文由于涉及到的代码较多,将会是一......
  • KEIL-c51添加STC库的万能办法
    目前的keil数据库里面没有STC的数据库,每次都要替换,现在教大家一种方法,我试过的最有效的方法,在不改变原有库的情况下添加STC的数据库。1.把下载的文件解压,复制到keil安装文件下的UV4里,例如E:\Keil\UV42.更改keil安装目录下的TOOLS.INI文件,在[uv2]下一行(如果是keil4,就是第二行)添......