如何在markdown代码段中添加行号
时间: 2024-03-14 20:48:01 浏览: 205
在 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 代码,在一些平台上可能无法实现。建议使用第一种方法来添加代码段行号。
阅读全文