蜗牛 发表于 7 天前

2026-3-7编辑器美化

<h1>稀土掘金风格代码块美化 - 集成说明</h1>
<h2>概述</h2>
<p>本实现为 Discuz! 论坛的 Markdown 编辑器插件添加了完全复刻稀土掘金风格的代码块美化功能。</p>
<h2>功能特性</h2>
<h3>已实现功能</h3>
<ul>
<li>✅ <strong>顶部栏</strong>：深色背景（#1e1e1e），显示折叠按钮 + 语言标签</li>
<li>✅ <strong>功能按钮</strong>：体验 AI 代码助手、代码解读、复制代码（UI 展示）</li>
<li>✅ <strong>代码区域</strong>：深色背景，左侧显示行号，行号与代码之间有分隔线</li>
<li>✅ <strong>语法高亮</strong>：利用现有 highlight.js 实现代码语法高亮</li>
<li>✅ <strong>语言识别</strong>：自动识别代码语言并显示在顶部栏</li>
<li>✅ <strong>复制功能</strong>：点击复制代码按钮可复制代码内容到剪贴板</li>
<li>✅ <strong>折叠展开</strong>：点击折叠按钮可折叠/展开代码区域</li>
<li>✅ <strong>整体样式</strong>：圆角、内边距、阴影，与掘金视觉效果一致</li>
<li>✅ <strong>移动端适配</strong>：在小屏幕下自动调整布局，保证可读性</li>
</ul>
<h3>预留功能（仅 UI 展示）</h3>
<ul>
<li>⏳ 体验 AI 代码助手</li>
<li>⏳ 代码解读</li>
</ul>
<h2>文件结构</h2>
<pre><code class="language-目录">zhanmishu_markdown/
├── template/
│   ├── static/
│   │   ├── css/
│   │   │   └── juejin-code.css          # 掘金风格代码块样式
│   │   └── js/
│   │       └── juejin-code.js         # 代码块增强脚本
│   ├── markdown.htm                      # PC 端预览模板（已修改）
│   └── touch/
│       └── markdown.htm                  # 移动端预览模板（已修改）
└── README_JUEJIN_CODE.md               # 本说明文档
</code></pre>
<h2>集成步骤</h2>
<h3>方式一：自动集成（推荐）</h3>
<p>如果您使用的是当前插件环境，文件已经自动集成，无需额外操作。</p>
<p><strong>验证安装：</strong></p>
<ol>
<li>
<p>登录论坛，创建一个新帖子</p>
</li>
<li>
<p>使用 Markdown 编辑器输入代码块：</p>
<pre><code class="language-markdown">```javascript
console.log('Hello, World!');
</code></pre>
<pre><code>
</code></pre>
</li>
<li>
<p>预览或发布帖子，查看代码块是否显示为掘金风格</p>
</li>
</ol>
<h3>方式二：手动集成到其他模板</h3>
<p>如果您想在其他模板中也使用掘金风格代码块，请按以下步骤操作：</p>
<h4>步骤 1：在模板头部添加 CSS 引用</h4>
<pre><code class="language-html">&lt;!-- 在 &lt;head&gt; 标签内添加 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;source/plugin/zhanmishu_markdown/template/static/css/juejin-code.css&quot; /&gt;
</code></pre>
<h4>步骤 2：在模板底部添加 JS 引用</h4>
<pre><code class="language-html">&lt;!-- 在 &lt;/body&gt; 标签之前添加 --&gt;
&lt;script src=&quot;source/plugin/zhanmishu_markdown/template/static/js/juejin-code.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h4>步骤 3：确保 highlight.js 已加载</h4>
<p>确保您的页面已经加载了 highlight.js 库：</p>
<pre><code class="language-html">&lt;script src=&quot;source/plugin/zhanmishu_markdown/template/editor/js/highlight.js/highlight.pack.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h2>代码块语法支持</h2>
<p>支持以下代码块语法：</p>
<h3>Markdown 代码块（推荐）</h3>
<pre><code class="language-markdown">```javascript
function hello() {
    console.log('Hello, World!');
}
```
</code></pre>
<h3>Discuz! 代码标签</h3>
<pre><code>
function hello() {
    console.log('Hello, World!');
}

</code></pre>
<h2>支持的语言</h2>
<p>支持所有 highlight.js 支持的语言，包括但不限于：</p>
<ul>
<li>JavaScript / TypeScript</li>
<li>Python</li>
<li>Java</li>
<li>C / C++ / C#</li>
<li>Go</li>
<li>Rust</li>
<li>PHP</li>
<li>Ruby</li>
<li>Swift</li>
<li>Kotlin</li>
<li>SQL</li>
<li>HTML / CSS</li>
<li>Bash / Shell</li>
<li>JSON / YAML / XML</li>
<li>等等...</li>
</ul>
<h2>自定义配置</h2>
<h3>修改默认语言</h3>
<p>编辑 <code>juejin-code.js</code> 文件，找到配置部分：</p>
<pre><code class="language-javascript">var CONFIG = {
    defaultLang: 'text',// 修改默认语言
    copySuccessTime: 2000, // 复制成功提示显示时间（毫秒）
    debounceTime: 100,   // 防抖时间
};
</code></pre>
<h3>修改主题颜色</h3>
<p>编辑 <code>juejin-code.css</code> 文件，找到相关颜色定义：</p>
<pre><code class="language-css">.code-block-extension .code-header {
    background-color: #1e1e1e;/* 顶部栏背景色 */
    border-bottom: 1px solid #2d2d2d;
}

.code-block-extension .code-content {
    background-color: #1e1e1e;/* 代码区域背景色 */
}
</code></pre>
<h2>移动端适配</h2>
<p>样式已针对移动端进行了优化：</p>
<ul>
<li>屏幕宽度小于 768px 时自动调整布局</li>
<li>功能按钮文字隐藏，仅显示图标（AI 按钮除外）</li>
<li>字体大小和间距自动调整</li>
<li>代码可横向滚动查看</li>
</ul>
<h2>兼容性</h2>
<ul>
<li><strong>Discuz! 版本</strong>：X3.4 / X3.5</li>
<li><strong>浏览器</strong>：现代浏览器（Chrome、Firefox、Safari、Edge 等）</li>
<li><strong>移动端</strong>：iOS Safari、Android Chrome 等</li>
</ul>
<h2>故障排查</h2>
<h3>问题 1：代码块样式未生效</h3>
<p><strong>可能原因：</strong></p>
<ul>
<li>CSS 文件未正确加载</li>
<li>浏览器缓存了旧样式</li>
</ul>
<p><strong>解决方法：</strong></p>
<ol>
<li>检查浏览器开发者工具，确认 <code>juejin-code.css</code> 已加载</li>
<li>清除浏览器缓存，强制刷新页面（Ctrl+F5）</li>
</ol>
<h3>问题 2：语法高亮未生效</h3>
<p><strong>可能原因：</strong></p>
<ul>
<li>highlight.js 未加载或加载顺序错误</li>
<li>代码块语言 class 不正确</li>
</ul>
<p><strong>解决方法：</strong></p>
<ol>
<li>确保 <code>highlight.pack.js</code> 在 <code>juejin-code.js</code> 之前加载</li>
<li>检查代码块的 class 是否包含 <code>language-xxx</code> 格式</li>
</ol>
<h3>问题 3：复制功能不工作</h3>
<p><strong>可能原因：</strong></p>
<ul>
<li>浏览器不支持 Clipboard API</li>
<li>页面不在 HTTPS 环境下</li>
</ul>
<p><strong>解决方法：</strong></p>
<ul>
<li>复制功能已包含降级方案，支持所有主流浏览器</li>
<li>如在旧版浏览器使用，确保页面通过 HTTP 或 HTTPS 访问</li>
</ul>
<h2>技术细节</h2>
<h3>代码结构</h3>
<pre><code>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 &gt; code         # 代码元素
</code></pre>
<h3>核心 API</h3>
<pre><code class="language-javascript">// 初始化所有代码块
window.CodeBlockExtension.init();

// 初始化单个代码块
window.CodeBlockExtension.initBlock(preElement);

// 获取配置
window.CodeBlockExtension.CONFIG;
</code></pre>
<h2>更新日志</h2>
<h3>v1.0.0 - 2026-03-07</h3>
<ul>
<li>首次发布</li>
<li>实现掘金风格代码块基础样式</li>
<li>支持语法高亮、行号显示、代码复制</li>
<li>支持折叠/展开功能</li>
<li>支持移动端适配</li>
</ul>
页: [1]
查看完整版本: 2026-3-7编辑器美化