语法高亮 #

概述 #

语法高亮通过颜色和样式区分代码的不同元素，提高代码可读性。

支持的语言 #

主流编程语言 #

markdown

```javascript
const greeting = 'Hello';
function sayHello(name) {
    return `${greeting}, ${name}!`;
}
```

```typescript
interface User {
    id: number;
    name: string;
}

const user: User = { id: 1, name: 'John' };
```

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"

if __name__ == "__main__":
    print(greet("World"))
```

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

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
```

```rust
fn main() {
    let greeting = "Hello, World!";
    println!("{}", greeting);
}
```

前端技术 #

markdown

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
```

```css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}
```

```jsx
function App() {
    const [count, setCount] = useState(0);
    return (
        <div className="app">
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}
```

```vue
<template>
    <div class="app">
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, Vue!'
        }
    }
}
</script>
```

数据格式 #

markdown

```json
{
    "name": "John",
    "age": 30,
    "skills": ["JavaScript", "Python", "Go"]
}
```

```yaml
name: John
age: 30
skills:
    - JavaScript
    - Python
    - Go
```

```xml
<?xml version="1.0" encoding="UTF-8"?>
<user>
    <name>John</name>
    <age>30</age>
</user>
```

```toml
name = "John"
age = 30
skills = ["JavaScript", "Python", "Go"]
```

Shell 和脚本 #

markdown

```bash
#!/bin/bash
echo "Hello, World!"
for i in {1..5}; do
    echo "Number: $i"
done
```

```powershell
Write-Host "Hello, World!"
Get-Process | Where-Object { $_.CPU -gt 100 }
```

```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
```

数据库查询 #

markdown

```sql
SELECT 
    users.id,
    users.name,
    COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at > '2024-01-01'
GROUP BY users.id
ORDER BY order_count DESC;
```

特殊代码块 #

Diff 显示 #

显示代码差异：

markdown

```diff
- const oldCode = 'removed';
+ const newCode = 'added';
```

渲染效果：

diff

- const oldCode = 'removed';
+ const newCode = 'added';

行号显示 #

部分平台支持：

markdown

```javascript showLineNumbers
function hello() {
    console.log('Hello');
}
```

高亮行 #

部分平台支持：

markdown

```javascript {2}
function hello() {
    console.log('Hello');  // 高亮这行
}
```

高亮效果 #

JavaScript 高亮示例 #

markdown

```javascript
// 注释
const variable = 'string';
const number = 123;
const boolean = true;
const array = [1, 2, 3];
const object = { key: 'value' };

function functionName(param) {
    return param;
}

class ClassName {
    constructor() {
        this.property = 'value';
    }
}

// 模板字符串
const template = `Hello, ${variable}!`;

// 箭头函数
const arrow = (x) => x * 2;

// 异步函数
async function asyncFunction() {
    const result = await fetch('/api');
    return result.json();
}
```

Python 高亮示例 #

markdown

```python
# 注释
variable = 'string'
number = 123
boolean = True
list_data = [1, 2, 3]
dict_data = {'key': 'value'}

def function_name(param):
    return param

class ClassName:
    def __init__(self):
        self.property = 'value'

# 列表推导式
squares = [x**2 for x in range(10)]

# 装饰器
@decorator
def decorated_function():
    pass
```

语言标识别名 #

语言	别名
JavaScript	`js`, `javascript`, `node`
TypeScript	`ts`, `typescript`
Python	`py`, `python`
Shell	`sh`, `shell`, `bash`, `zsh`
JSON	`json`
YAML	`yaml`, `yml`

自定义高亮 #

使用 HTML #

部分场景可以自定义样式：

markdown

<pre><code class="language-javascript" style="background: #1e1e1e; color: #d4d4d4;">
const x = 1;
</code></pre>

使用 CSS 类 #

markdown

<link rel="stylesheet" href="theme.css">
<pre><code class="language-javascript">
const x = 1;
</code></pre>

高亮主题 #

常见的高亮主题：

主题	特点
GitHub	清晰明亮
Monokai	深色经典
One Dark	Atom 风格
Dracula	流行深色
Solarized	护眼配色

最佳实践 #

1. 正确指定语言 #

markdown

好的：
```javascript
const x = 1;

不好的：

text

const x = 1;

text


### 2. 选择合适的语言标识

```markdown
好的：
```jsx
<Component />

不好的：

javascript

<Component />

text


### 3. 保持代码整洁

```markdown
好的：
```javascript
function greet(name) {
    return `Hello, ${name}!`;
}

不好的：

javascript

function greet(name) { return `Hello, ${name}!`; }  // 单行难以阅读

text


## 常见问题

### 问题1：高亮不生效

检查：
- 语言标识是否正确
- 平台是否支持该语言
- 代码块格式是否正确

### 问题2：特殊字符显示问题

````markdown
```html
&lt;div&gt;HTML实体&lt;/div&gt;

text


## 下一步

继续学习 [引用语法](/docs/markdown/blockquotes)！