正文

轻松上手Markdown：编写清晰、美观代码块全攻略

/0 浏览量
0404

Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。在Markdown中，编写代码块是常见的需求，它能帮助你展示代码片段，让文档更具可读性和专业性。下面，我将带你详细了解如何在Markdown中轻松编写清晰、美观的代码块。

1. 基础语法

在Markdown中，编写代码块主要有两种方式：使用反引号（`）和Fenced Code Blocks。

1.1 使用反引号

使用反引号是Markdown中最简单的编写代码块的方法。只需在代码片段前后添加两个反引号即可。

`代码片段`

这种方式适用于短小精悍的代码展示，但它的局限性在于无法指定编程语言。

1.2 Fenced Code Blocks

Fenced Code Blocks允许你指定编程语言，并支持更多的格式化功能。在代码片段前后添加三个反引号，并在第一行反引号后面添加语言标识符。

```python
print("Hello, Markdown!")


这种方式适用于长篇代码和需要指定编程语言的场景。

## 2. 代码块样式

为了使代码块更美观，Markdown提供了多种样式设置。

### 2.1 代码高亮

使用`highlight.js`插件可以为代码块添加高亮效果。在代码块前后添加`<pre><code>`标签，并在`class`属性中指定高亮样式。

```html
<pre><code class="language-python">print("Hello, Markdown!")
</code></pre>

在HTML文件中，你需要引入highlight.js的CSS和JS文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.0/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.0/highlight.min.js"></script>

2.2 代码折叠

使用collapse.js插件可以实现代码折叠功能。在代码块前后添加<details>标签，并在open属性中指定默认展开或折叠。

<details open>
<summary>点击查看Python代码</summary>
<pre><code class="language-python">print("Hello, Markdown!")
</code></pre>
</details>

在HTML文件中，你需要引入collapse.js的CSS和JS文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/collapse-js/dist/collapse.min.css">
<script src="https://cdn.jsdelivr.net/npm/collapse-js/dist/collapse.min.js"></script>

3. 实战演练

下面，我们通过一个示例来展示如何使用Markdown编写一个Python代码块，并添加高亮和折叠效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Markdown代码块示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/collapse-js/dist/collapse.min.css">
    <script src="https://cdn.jsdelivr.net/npm/collapse-js/dist/collapse.min.js"></script>
</head>
<body>
    <details open>
        <summary>点击查看Python代码</summary>
        <pre><code class="language-python">print("Hello, Markdown!")
</code></pre>
    </details>
</body>
</html>

运行上述HTML文件，你将看到一个折叠的Python代码块，点击标题可以展开或折叠代码。

4. 总结

通过本文的介绍，相信你已经掌握了如何在Markdown中轻松编写清晰、美观的代码块。在实际应用中，你可以根据需求选择合适的语法和样式，让你的Markdown文档更具吸引力。

-- 展开阅读全文 --