Markdown 代码

在 Markdown 中,插入行内代码和代码块是很常见的需求。Markdown 提供了简单的语法,可以让我们很方便地插入代码。

Markdown 插入行内代码

在 Markdown 中,我们可以使用反引号(`)包裹来显示行内代码。所谓的 “行内代码”,指的是在段落内部的一句代码。

语法:

`代码内容`

说明:

需要清楚的是,行内代码往往是一句代码。如果你的代码是多行代码,则应该使用后面介绍的代码块语法。

注意: 如果行内代码本身包含了反引号,则需要使用 “\(反斜杠)” 进行转义。具体参考:Markdown 转义字符

示例 1:行内代码

`Python` 中,我们可以使用 `print()` 函数来输出内容。

渲染效果如下图所示。

Markdown插入行内代码

生成 HTML 代码如下。

<p><code>Python</code> 中,我们可以使用 <code>print()</code> 函数来输出内容。</p>

分析:

从结果可以看出,“Markdown 单行代码” 最终会转换成 HTML 中的 code 标签。

Markdown 插入 “代码块”

在 Markdown 中,我们可以使用三反引号(```)包裹来显示代码块。所谓的 “代码块”,可以是需要单独显示的一行代码,也可以是多行代码。

语法:

```语言
​代码内容
​```

说明:

代码块需要使用三反引号包裹起来。其中第 1 行的三反引号后面建议指定代码的 “编程语言”(虽然不指定也可以,但渲染之后并不会高亮代码),此时 Markdown 编辑器通常会根据指定的语言进行语法高亮显示。然后第 2 行开始才是代码块内容。

示例 2:代码块

```python
​def hello():
​    print("欢迎来到绿叶网")
​hello()
```

渲染效果如下图所示。

Markdown插入代码块

生成 HTML 代码如下。

<pre>
    <div class="hljs">
        <code class="lang-python">
<span class="hljs-keyword">def</span> <span class="hljs-title function_">hello</span>():
    <span class="hljs-built_in">print</span>(<span class="hljs-string">&quot;欢迎来到绿叶网&quot;</span>)
hello()
        </code>
    </div>
</pre>

分析:

“Markdown 多行代码” 最终会转换成 HTML 中的 pre 标签。为什么代码会高亮呢?其实是借助了 highlight.js 库来实现的。了解这一点,对于自定义样式是非常有用的。

提示: 不同的 Markdown 编辑器,渲染出来的 HTML 结构会有所不同。

上一篇: Markdown 引用

下一篇: Markdown 链接

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号