feat: 添加代码块折行显示按钮

[jianyuewushuang]

feat:添加代码块折行显示按钮

功能效果

• 为每个代码块添加折行显示的按钮
• 该按钮与折叠代码块按钮和复制按钮显示在同一行
• 折行按钮默认透明，和复制、折叠按钮保持一致，当鼠标悬停在代码块上时按钮才会显示
• 只有在代码块实际内容溢出（scrollWidth > clientWidth）时该按钮才会出现
• 点击按钮在整行显示和折行显示之间切换，效果只作用于当前代码块，默认为整行显示
• 未折叠的代码行号不变，折叠后的代码行号为空白

文件修改

1. _config.yml
   在 articles.code_block 下新增开关 wrap_toggle: true（默认开启）
2. source/js/tools/codeBlock.js
   在 initCopyCode() 中添加：
   1. 开关判断
   2. 溢出检测
   3. 条件注入图标 wrap-toggle 按钮
   4. 切换状态
   5. 行号高度同步
   6. 一次性全局 resize 监听
3. source/css/common/codeblock/code-block.styl
   新增 .wrap-toggle-button 样式：
   • 位置 right:80px
   • 初始 opacity 0
   • 和 .copy-button / .fold-button 在同一条 hover 选择器里被激活 opacity 1
4. source/css/common/codeblock/highlight.styl
   新增 .highlight-container.code-wrap-enabled 下 pre / code / .line 的折行 white-space / word-break 规则

已知问题

折叠代码后原来的行号会有轻微偏移，但不影响阅读

预览

1. 未折叠

2. 折叠后

如果有什么问题或需要修改的地方，请告诉我。

The following translation is completed by AI.

feat: Add code‑block word‑wrap toggle button

Feature Behavior

• Add a word‑wrap toggle button for each code block
• The button appears on the same row as the code‑fold button and copy button
• The toggle button is transparent by default, consistent with the copy and fold buttons; it becomes visible only when hovering over the code block
• The button is rendered only when the code‑block content overflows (scrollWidth > clientWidth)
• Click the button to toggle between no‑wrap and word‑wrap modes; the change applies exclusively to the current code block, with no‑wrap as the default state
• Line numbers remain unchanged for unfolded code; line‑number areas show blank content for folded code

File Modifications

1. _config.yml
   Add the switch wrap_toggle: true under articles.code_block (enabled by default)
2. source/js/tools/codeBlock.js
   Add logic inside initCopyCode() for:
   1. Configuration‑switch judgment
   2. Overflow detection
   3. Conditional injection of the wrap‑toggle icon button
   4. State‑switching logic
   5. Line‑number height synchronization
   6. One‑shot global resize event listener
3. source/css/common/codeblock/code‑block.styl
   Add styles for .wrap‑toggle‑button:
   • Position: right: 80px
   • Initial opacity: 0
   • Activated to opacity: 1 within the same hover selector as .copy‑button / .fold‑button
4. source/css/common/codeblock/highlight.styl
   Add white‑space / word‑break wrapping rules for pre / code / .line under .highlight‑container.code‑wrap‑enabled

Known Issues

Slight offset occurs on original line numbers after code folding, though it does not impair readability.

If you have any questions or require modifications, feel free to tell me.