代码与语法高亮

在 Markdown 中，代码块是一种非常重要的元素，特别是对于技术文档和编程教程。Markdown 支持代码块和语法高亮功能，让你的代码更加清晰易读。

代码块语法

基本代码块

使用三个反引号 ` 包围代码块：

function hello() { console.log('Hello, world!'); }

显示效果：

function hello() {
  console.log('Hello, world!');
}

带语言指定的代码块

在三个反引号后指定编程语言，可以启用语法高亮：

```javascript
function hello() {
  console.log('Hello, world!');
}

def hello():
    print('Hello, world!')

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

显示效果：

```javascript
function hello() {
  console.log('Hello, world!');
}

def hello():
    print('Hello, world!')

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

语言指定

Markdown 支持多种编程语言的语法高亮，常见的语言包括：

• javascript / js
• python / py
• java
• c / cpp / csharp
• html
• css
• php
• ruby / rb
• go
• rust
• sql
• markdown / md
• json
• yaml / yml
• xml
• bash / sh

不同的 Markdown 渲染器支持的语言可能有所不同，具体请参考你使用的编辑器或平台的文档。

行号显示

有些 Markdown 编辑器和平台支持在代码块中显示行号，这对于较长的代码示例非常有用。

在 VS Code 中显示行号

在 VS Code 中，可以通过安装插件如 "Markdown Preview Enhanced" 来支持行号显示。

在 GitHub 中显示行号

GitHub Flavored Markdown 支持行号显示，你可以在代码块中使用 ```` ```language` 语法，行号会自动显示。

自定义行号显示

如果你使用的编辑器支持自定义 CSS，可以通过添加以下 CSS 来实现行号显示：

pre code {
  counter-reset: line;
}

pre code span.line {
  counter-increment: line;
}

pre code span.line::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  padding-right: 0.5em;
  margin-right: 0.5em;
  border-right: 1px solid #ccc;
  text-align: right;
  color: #999;
  font-size: 0.8em;
}

代码高亮主题

不同的 Markdown 编辑器和平台使用不同的代码高亮主题，你可以根据自己的喜好选择合适的主题。

在 VS Code 中更改主题

1. 打开 VS Code 设置
2. 搜索 "markdown preview theme"
3. 选择你喜欢的主题

在 GitHub 中

GitHub 使用自己的代码高亮主题，目前无法自定义。

在 Typora 中

1. 打开 Typora 设置
2. 选择 "外观" -> "主题"
3. 选择你喜欢的主题

代码块中的特殊字符

在代码块中，所有的 Markdown 语法都会被忽略，你可以直接输入任何字符，包括反引号、星号等特殊字符。

这是一个代码块，包含 * 星号、** 双星号、` 反引号等特殊字符，它们不会被解析为 Markdown 语法。

显示效果：

这是一个代码块，包含 * 星号、** 双星号、` 反引号等特殊字符，它们不会被解析为 Markdown 语法。

内联代码

除了代码块，Markdown 还支持内联代码，使用单个反引号 ` 包围：

这是一段内联代码 `const x = 10;` 的示例。

显示效果：这是一段内联代码 const x = 10; 的示例。

小结

代码与语法高亮是 Markdown 中非常重要的功能，特别是对于技术文档和编程教程。通过使用代码块和语法高亮，你可以使代码更加清晰易读，提高文档的专业性和可读性。

在接下来的章节中，我们将介绍高级链接技巧、图片处理等更多 Markdown 中级技巧。