markdown代码段添加行号
时间: 2023-07-06 10:42:01 浏览: 242
在Markdown中,如果要在代码段中添加行号,可以使用一些语法扩展来实现。下面介绍两种常用的方法:
1. 使用`<pre>`和`<code>`标签
```html
<pre><code class="language-python">
1. print("Hello, World!")
2. print("This is a code block with line numbers!")
3. for i in range(10):
4. print(i)
</code></pre>
```
上述代码中,`<pre>`和`<code>`标签可以将代码块包裹起来,`class="language-python"`是为了让代码高亮。在代码左侧添加了行号。
2. 使用CSS
```css
pre {
counter-reset: line;
}
pre code:before {
content: counter(line) " ";
counter-increment: line;
color: #999;
display: inline-block;
width: 2em;
}
```
上述CSS代码中,通过使用`counter-reset`和`counter-increment`属性来设置行号,使用`content`属性来添加行号内容,使用`display`和`width`属性来控制行号的显示样式。在Markdown代码块中添加上述CSS代码,即可实现代码段添加行号的效果。
注意,第二种方法需要在Markdown中插入CSS代码,在一些平台上可能无法实现。建议使用第一种方法来添加代码段行号。
阅读全文