📝 代码展示与文件下载完全指南

本文演示如何在博客中优雅地展示代码，并提供文件下载功能。

🔧 技术栈与插件

| 层级
| 技术/插件
| 说明

| 博客框架
| 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
# 这是一个示例 Python 脚本
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 标签：

fibonacci.py

下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 这是一个示例 Python 脚本
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}")

语法说明：

1
2
3
4
5
&#123;% codefile "文件名.py" %}
&#96;&#96;&#96;python
你的代码...
&#96;&#96;&#96;
&#123;% endcodefile %}

点击上方的下载文件按钮，浏览器会直接下载 fibonacci.py 文件。

3. 文件下载卡片

如果你想提供一个外部文件的下载链接，可以使用 filecard 标签：

[

🐍

数据分析脚本.py

Python · 12.5 KB

下载

](https://example.com/scripts/data_analysis.py)

语法说明：

1
&#123;% raw %}&#123;% filecard "显示文件名" "下载链接" "文件描述/大小" %}&#123;% endraw %}

这个卡片会根据文件扩展名自动显示对应的图标（如 🐍 表示 Python）。

4. 更多代码高亮示例### JavaScript

utils.js

下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 防抖函数
* @param {Function} fn - 要执行的函数
* @param {number} delay - 延迟时间（毫秒）
*/
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(&#x27;Window resized!&#x27;);
}, 300);

window.addEventListener(&#x27;resize&#x27;, handleResize);

TypeScript

api-client.ts

下载文件

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

main.rs

下载文件

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. 多种文件类型下载卡片

[

📦

项目源码.zip

ZIP · 2.3 MB

下载

](https://example.com/download/project.zip)

[

📎

设计稿.fig

Figma · 15.8 MB

下载

](https://example.com/download/design.fig)

[

📕

论文.pdf

PDF · 856 KB

下载

](https://example.com/download/paper.pdf)

6. 使用建议

| 场景
| 推荐方式
| 原因

| 小段代码示例
| 普通代码块
| 简洁，自带复制功能

| 完整可运行脚本
| codefile 标签
| 读者可直接下载运行

| 外部资源/大文件
| filecard 标签
| 美观，显示文件信息

| 多文件打包
| filecard + ZIP
| 方便批量下载

7. 配置说明

本次更新已为你完成以下配置：

  • 代码高亮主题：切换为 darker 深色主题，更适合技术内容

  • Mac 风格代码块：开启圆角和标题栏样式

  • 代码自动换行：避免横向滚动条

  • 代码高度限制：超过 500px 显示展开按钮

  • 下载按钮样式：已注入到 darkmode.css，支持明暗主题切换

无需额外操作，直接按上方语法在文章中使用即可！