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>