📝 代码展示与文件下载完全指南
本文演示如何在博客中优雅地展示代码，并提供文件下载功能。
🔧 技术栈与插件
| 层级 |
技术/插件 |
说明 |
| 博客框架 |
Hexo v8.1.1 |
静态博客生成器 |
| 主题 |
Butterfly v5.5.4 |
提供代码高亮、Mac 风格代码块、复制按钮 |
| 代码高亮 |
PrismJS |
主题 darker，支持自动换行与高度限制 |
| 自定义标签 |
download-tag.js |
自研 Hexo Tag 插件，提供 codefile 与 filecard 标签 |
| 样式注入 |
darkmode.css |
自定义下载按钮与卡片样式，支持明暗主题切换 |
1. 基础代码块（自带复制按钮）
Butterfly 主题已经内置了代码复制功能，只需使用 Markdown 标准语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
def fibonacci(n):
"""生成斐波那契数列"""
if n <= 0:
return []
elif n == 1:
return [0]
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
if __name__ == "__main__":
result = fibonacci(10)
print(f"前10个斐波那契数: {result}")
|
鼠标悬停在代码块右上角，会出现复制按钮，点击即可复制全部代码。
2. 带下载按钮的代码块
如果你想让读者可以直接下载 .py 文件，使用自定义的 download 标签：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
def fibonacci(n):
"""生成斐波那契数列"""
if n <= 0:
return []
elif n == 1:
return [0]
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
if __name__ == "__main__":
result = fibonacci(10)
print(f"前10个斐波那契数: {result}")
|
语法说明：
{% codefile "文件名.py" %}
```python
你的代码...
```
{% endcodefile %}
点击上方的下载文件按钮，浏览器会直接下载 fibonacci.py 文件。
3. 文件下载卡片
如果你想提供一个外部文件的下载链接，可以使用 filecard 标签：
🐍
数据分析脚本.py
Python · 12.5 KB
下载
语法说明：
1
| {% raw %}{% filecard "显示文件名" "下载链接" "文件描述/大小" %}{% endraw %}
|
这个卡片会根据文件扩展名自动显示对应的图标（如 🐍 表示 Python）。
4. 更多代码高亮示例
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function debounce(fn, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const handleResize = debounce(() => {
console.log('Window resized!');
}, 300);
window.addEventListener('resize', handleResize);
|
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
class ApiClient {
private baseUrl: string;
constructor(baseUrl: string) {
this.baseUrl = baseUrl;
}
async get<T>(endpoint: string): Promise<ApiResponse<T>> {
const response = await fetch(`${this.baseUrl}${endpoint}`);
return response.json();
}
}
export default ApiClient;
|
Rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| use std::collections::HashMap;
fn count_words(text: &str) -> HashMap<String, u32> {
let mut counts = HashMap::new();
for word in text.split_whitespace() {
let word = word.to_lowercase()
.trim_matches(|c: char| !c.is_alphanumeric())
.to_string();
if !word.is_empty() {
*counts.entry(word).or_insert(0) += 1;
}
}
counts
}
fn main() {
let text = "Hello world hello Rust";
let counts = count_words(text);
for (word, count) in &counts {
println!("{}: {}", word, count);
}
}
|
5. 多种文件类型下载卡片
📦
下载
📎
下载
📕
下载
6. 使用建议
| 场景 |
推荐方式 |
原因 |
| 小段代码示例 |
普通代码块 |
简洁，自带复制功能 |
| 完整可运行脚本 |
codefile 标签 |
读者可直接下载运行 |
| 外部资源/大文件 |
filecard 标签 |
美观，显示文件信息 |
| 多文件打包 |
filecard + ZIP |
方便批量下载 |
7. 配置说明
本次更新已为你完成以下配置：
- 代码高亮主题：切换为
darker 深色主题，更适合技术内容
- Mac 风格代码块：开启圆角和标题栏样式
- 代码自动换行：避免横向滚动条
- 代码高度限制：超过 500px 显示展开按钮
- 下载按钮样式：已注入到
darkmode.css，支持明暗主题切换
无需额外操作，直接按上方语法在文章中使用即可！
