稀土掘金风格代码块美化 - 集成说明
概述
本实现为 Discuz! 论坛的 Markdown 编辑器插件添加了完全复刻稀土掘金风格的代码块美化功能。
功能特性
已实现功能
- ✅ 顶部栏：深色背景（#1e1e1e），显示折叠按钮 + 语言标签
- ✅ 功能按钮：体验 AI 代码助手、代码解读、复制代码（UI 展示）
- ✅ 代码区域：深色背景，左侧显示行号，行号与代码之间有分隔线
- ✅ 语法高亮：利用现有 highlight.js 实现代码语法高亮
- ✅ 语言识别：自动识别代码语言并显示在顶部栏
- ✅ 复制功能：点击复制代码按钮可复制代码内容到剪贴板
- ✅ 折叠展开：点击折叠按钮可折叠/展开代码区域
- ✅ 整体样式：圆角、内边距、阴影，与掘金视觉效果一致
- ✅ 移动端适配：在小屏幕下自动调整布局，保证可读性
预留功能（仅 UI 展示）
文件结构
zhanmishu_markdown/
├── template/
│ ├── static/
│ │ ├── css/
│ │ │ └── juejin-code.css # 掘金风格代码块样式
│ │ └── js/
│ │ └── juejin-code.js # 代码块增强脚本
│ ├── markdown.htm # PC 端预览模板（已修改）
│ └── touch/
│ └── markdown.htm # 移动端预览模板（已修改）
└── README_JUEJIN_CODE.md # 本说明文档
集成步骤
方式一：自动集成（推荐）
如果您使用的是当前插件环境，文件已经自动集成，无需额外操作。
验证安装：
-
登录论坛，创建一个新帖子
-
使用 Markdown 编辑器输入代码块：
```javascript
console.log('Hello, World!');
-
预览或发布帖子，查看代码块是否显示为掘金风格
方式二：手动集成到其他模板
如果您想在其他模板中也使用掘金风格代码块，请按以下步骤操作：
步骤 1：在模板头部添加 CSS 引用
<!-- 在 <head> 标签内添加 -->
<link rel="stylesheet" href="source/plugin/zhanmishu_markdown/template/static/css/juejin-code.css" />
步骤 2：在模板底部添加 JS 引用
<!-- 在 </body> 标签之前添加 -->
<script src="source/plugin/zhanmishu_markdown/template/static/js/juejin-code.js"></script>
步骤 3：确保 highlight.js 已加载
确保您的页面已经加载了 highlight.js 库：
<script src="source/plugin/zhanmishu_markdown/template/editor/js/highlight.js/highlight.pack.js"></script>
代码块语法支持
支持以下代码块语法：
Markdown 代码块（推荐）
```javascript
function hello() {
console.log('Hello, World!');
}
```
Discuz! 代码标签
[code=javascript]
function hello() {
console.log('Hello, World!');
}
[/code]
支持的语言
支持所有 highlight.js 支持的语言，包括但不限于：
- JavaScript / TypeScript
- Python
- Java
- C / C++ / C#
- Go
- Rust
- PHP
- Ruby
- Swift
- Kotlin
- SQL
- HTML / CSS
- Bash / Shell
- JSON / YAML / XML
- 等等...
自定义配置
修改默认语言
编辑 juejin-code.js 文件，找到配置部分：
var CONFIG = {
defaultLang: 'text', // 修改默认语言
copySuccessTime: 2000, // 复制成功提示显示时间（毫秒）
debounceTime: 100, // 防抖时间
};
修改主题颜色
编辑 juejin-code.css 文件，找到相关颜色定义：
.code-block-extension .code-header {
background-color: #1e1e1e; /* 顶部栏背景色 */
border-bottom: 1px solid #2d2d2d;
}
.code-block-extension .code-content {
background-color: #1e1e1e; /* 代码区域背景色 */
}
移动端适配
样式已针对移动端进行了优化：
- 屏幕宽度小于 768px 时自动调整布局
- 功能按钮文字隐藏，仅显示图标（AI 按钮除外）
- 字体大小和间距自动调整
- 代码可横向滚动查看
兼容性
- Discuz! 版本：X3.4 / X3.5
- 浏览器：现代浏览器（Chrome、Firefox、Safari、Edge 等）
- 移动端：iOS Safari、Android Chrome 等
故障排查
问题 1：代码块样式未生效
可能原因：
解决方法：
- 检查浏览器开发者工具，确认
juejin-code.css 已加载
- 清除浏览器缓存，强制刷新页面（Ctrl+F5）
问题 2：语法高亮未生效
可能原因：
- highlight.js 未加载或加载顺序错误
- 代码块语言 class 不正确
解决方法：
- 确保
highlight.pack.js 在 juejin-code.js 之前加载
- 检查代码块的 class 是否包含
language-xxx 格式
问题 3：复制功能不工作
可能原因：
- 浏览器不支持 Clipboard API
- 页面不在 HTTPS 环境下
解决方法：
- 复制功能已包含降级方案，支持所有主流浏览器
- 如在旧版浏览器使用，确保页面通过 HTTP 或 HTTPS 访问
技术细节
代码结构
code-block-extension
├── code-header # 顶部栏
│ ├── header-left # 左侧区域
│ │ ├── code-fold-btn # 折叠按钮
│ │ └── code-lang # 语言标签
│ └── header-right # 右侧区域
│ ├── ai-btn # AI 助手按钮
│ ├── code-explain-btn # 代码解读按钮
│ └── code-copy-btn # 复制按钮
├── code-content # 代码内容容器
│ ├── copy-toast # 复制成功提示
│ └── code-lines # 代码行容器
│ ├── line-numbers # 行号列
│ └── code-content-wrapper # 代码内容列
│ └── pre > code # 代码元素
核心 API
// 初始化所有代码块
window.CodeBlockExtension.init();
// 初始化单个代码块
window.CodeBlockExtension.initBlock(preElement);
// 获取配置
window.CodeBlockExtension.CONFIG;
更新日志
v1.0.0 - 2026-03-07
- 首次发布
- 实现掘金风格代码块基础样式
- 支持语法高亮、行号显示、代码复制
- 支持折叠/展开功能
- 支持移动端适配
发表
网站开发维护（公益版）
45 人阅读
|
0 人回复
/1 