✨ 代码块样式优化及行号修复

问题描述

1. 代码块行号到9后自动从0开始，而不是显示为10
2. 行号区域缺少背景色
3. 代码内容ol可能超出pre区域
4. 代码块缺少底部阴影
5. 代码块没有悬停效果
6. 语法高亮需要优化支持多语言
7. 无法在代码内容区域选中代码文本

解决方案

通过CSS计数器实现行号正确递增，添加背景色、阴影和悬停效果，优化语法高亮，并确保代码文本可以正常选中。

具体修改

1. 优化代码块CSS样式

文件位置: assets/css/style.css

• 添加了CSS计数器实现行号正确递增
• 为行号区域添加了渐变背景色，支持亮色和暗色模式
• 确保代码内容不超出pre区域
• 添加了底部阴影效果
• 实现了斜角流动渐变悬停效果
• 优化了多语言语法高亮颜色方案
• 添加了user-select属性确保代码文本可以选中

核心代码：

/* 🎨 代码块样式优化 */
.post-single pre {
    width: 100% !important;
    overflow: auto !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 行号容器样式 */
.post-single pre.prettyprint ol.linenums {
    position: relative;
    background: var(--bs-white);
    border: 1px solid #ebebeb;
    padding: 5px 0;
    box-shadow: inset 33px 0 0 linear-gradient(0deg, #d8d8d8, #ececec), inset 34px 0 0 #ebebeb;
    list-style-type: none;
    counter-reset: line-number;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    overflow: hidden !important;
}

/* 行号样式 */
.post-single pre.prettyprint ol.linenums li:before {
    content: counter(line-number);
    display: inline-block;
    width: 25px;
    text-align: right;
    margin-right: 15px;
    position: absolute;
    left: 0;
    color: #999;
    font-size: 12px;
    padding: 0 5px;
    user-select: none;
}

/* 行号悬停效果 */
.post-single pre.prettyprint ol.linenums:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 0, 255, 0.8) 0,
        rgba(255, 0, 255, 0.8) 30px,
        rgba(4, 0, 255, 0.8) 30px,
        rgba(4, 0, 255, 0.8) 60px,
        rgba(0, 255, 242, 0.8) 60px,
        rgba(0, 255, 242, 0.8) 90px
    );
    background-size: 300% 300%;
    background-position: 0% 0%;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 确保文本可以选中 */
.post-single pre.prettyprint,
.post-single pre.prettyprint * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
}

1. 更新行号初始化逻辑

文件位置: assets/js/boxmoe.js

• 更新了initPrettyPrint()函数，确保CSS计数器正常工作
• 移除了冲突的行号属性，避免与CSS计数器冲突
• 确保每一行都正确应用计数器递增

核心代码：

function initPrettyPrint() {
    const prettyprintElements = document.querySelectorAll('.prettyprint');
    if (prettyprintElements.length && window.prettyPrint) {
        window.prettyPrint();
        
        // 修复行号显示问题：当行号超过9时，从10开始显示而不是从0开始
        setTimeout(() => {
            const codeBlocks = document.querySelectorAll('.prettyprint ol.linenums');
            codeBlocks.forEach((codeBlock) => {
                // 确保代码块使用我们的CSS计数器样式
                codeBlock.style.counterReset = 'line-number';
                codeBlock.style.listStyleType = 'none';
                
                const lines = codeBlock.querySelectorAll('li');
                lines.forEach((line, index) => {
                    // 移除Prettify库生成的value属性，避免与CSS计数器冲突
                    line.removeAttribute('value');
                    // 移除所有内联样式，使用CSS中定义的样式
                    line.removeAttribute('style');
                    // 确保每一行都正确应用计数器递增
                    line.style.counterIncrement = 'line-number';
                    // 为每一行设置正确的class，避免Prettify库的样式影响
                    line.className = `L${index % 10}`;
                });
            });
        }, 200);
    }
}

1. 优化行号修复脚本

文件位置: assets/js/fix-prettify-line-numbers.js

• 调整了行号修复逻辑，确保与CSS计数器方案兼容
• 移除了冲突的value属性和内联样式
• 确保CSS计数器正常工作

核心代码：

// 🎯 修复Prettify代码块行号显示问题
// 问题：行号到9后自动从0开始，而不是显示为10
// 解决方案：确保CSS计数器方案正常工作，移除冲突的行号属性

(function() {
    // 等待页面加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', fixPrettifyLineNumbers);
    } else {
        fixPrettifyLineNumbers();
    }

    function fixPrettifyLineNumbers() {
        // 检查是否存在prettify相关元素
        const prettyprintElements = document.querySelectorAll('.prettyprint.linenums');
        if (prettyprintElements.length === 0) {
            return;
        }

        // 重写PR.prettyPrint函数，确保行号正确生成
        if (window.PR) {
            // 保存原始的prettyPrint函数
            const originalPrettyPrint = window.PR.prettyPrint;
            
            window.PR.prettyPrint = function() {
                // 调用原始函数
                originalPrettyPrint.apply(this, arguments);
                
                // 确保CSS计数器正常工作
                ensureCSSCounterWorks();
            };
        }

        // 立即修复已渲染的行号
        ensureCSSCounterWorks();
    }

    function ensureCSSCounterWorks() {
        // 查找所有带有行号的代码块
        const codeBlocks = document.querySelectorAll('.prettyprint.linenums');
        
        codeBlocks.forEach(function(block) {
            const ol = block.querySelector('ol.linenums');
            if (ol) {
                const lines = ol.querySelectorAll('li');
                
                // 确保CSS计数器正常工作
                ol.style.counterReset = 'line-number';
                ol.style.listStyleType = 'none';
                
                // 修复每个li元素
                lines.forEach(function(line, index) {
                    // 移除冲突的value属性，避免与CSS计数器冲突
                    line.removeAttribute('value');
                    
                    // 移除内联样式，使用CSS中定义的样式
                    line.removeAttribute('style');
                    
                    // 确保行号递增
                    line.style.counterIncrement = 'line-number';
                    
                    // 保持L0-L9的循环样式，用于交替行高亮
                    line.className = `L${index % 10}`;
                });
            }
        });
    }
})();

优化效果

• ✅ 行号从1开始正确递增，不会在9后重置为0
• ✅ 行号区域添加了美观的渐变背景色
• ✅ 代码内容不会超出pre区域，正确包裹显示
• ✅ 代码块添加了底部阴影，增强视觉层次感
• ✅ 实现了斜角流动渐变悬停效果，提升用户体验
• ✅ 优化了多语言语法高亮，支持HTML、CSS、JS、Vue、SCSS、TS、PHP、Go等语言
• ✅ 代码文本可以正常选中，方便复制使用

使用说明

1. 确保主题已加载相关CSS和JavaScript文件
2. 在文章中使用Markdown代码块语法即可
3. 支持语言标识符，如

   、

   html 等

4. 代码块会自动应用优化后的样式

技术要点

• 使用CSS计数器实现行号正确递增
• 采用CSS变量和渐变实现美观的样式
• 支持亮色和暗色模式自适应
• 使用CSS mask实现复杂的悬停效果
• 确保代码文本可以正常选中复制
• 优化了多语言语法高亮颜色方案

参考文件

• h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\css\style.css
• h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\js\boxmoe.js
• h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\js\fix-prettify-line-numbers.js

✨ MD卡片式内容优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/shiroki-md-card.css · wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php · wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php

🔧 修复内容

1. 标签样式优化：

- 修复了文章页面标签样式过大的问题
- 调整了标签的字体大小、内边距和边框圆角
- 确保标签在不同屏幕尺寸下都能正常显示

1. 分类图标居中修复：

- 修复了分类图标不居中在圆角样式内的问题
- 为图标添加了垂直对齐和显示属性
- 确保图标在各种情况下都能保持居中

1. 重复a标签问题修复：

- 修复了卡片链接被重复包裹的问题
- 调整了markdown解析顺序
- 实现了占位符技术，确保卡片内容被正确解析
- 解决了嵌套HTML元素的问题

1. 样式文件分离：

- 将所有md卡片样式从主样式文件移到了单独的文件 shiroki-md-card.css
- 提高了代码的可维护性和可读性
- 避免了样式冲突

1. 避免继承主题a标签样式：

- 新增了避免继承主题a标签悬停背景色的样式
- 确保md卡片的样式不会受到主题样式的影响
- 实现了独立的卡片样式系统

1. 移除!important声明：

- 移除了所有!important声明
- 使用更高的CSS特异性来确保样式生效
- 提高了代码的可维护性

1. 悬停动画优化：

- 将卡片悬停动画改为上移效果
- 增强了悬停时的阴影效果
- 确保动画流畅自然
- 适配浅色和深色模式

1. 头像边框动画修复：

- 取消了悬停时头像边框的动画
- 只保留了头像的缩放和阴影动画
- 确保边框颜色和宽度在悬停时保持不变

1. 勋章样式优化：

- 将勋章背景色从渐变改为纯黄色
- 确保勋章在浅色和深色模式下都能正常显示
- 保持了勋章的其他样式不变

1. 头像边框圆角修复：

- 修复了头像边框从圆角变成四方形的问题
- 确保头像始终保持圆形
- 移除了边框圆角的动画效果
- 适配浅色和深色模式

📋 代码优化要点

1. CSS特异性优化：

- 为所有md卡片相关样式添加了body前缀
- 提高了CSS选择器的特异性
- 确保卡片样式不会被主题样式覆盖

1. Markdown解析优化：

- 调整了markdown解析顺序
- 实现了占位符技术
- 确保卡片内容被正确解析
- 避免了嵌套HTML元素

1. 样式重置优化：

- 重置了卡片链接的所有可能影响样式
- 确保卡片内部元素不受主题样式影响
- 实现了独立的卡片样式系统

1. 动画优化：

- 只过渡必要的属性
- 确保动画流畅自然
- 避免了不必要的动画效果

🎨 样式特点

1. 漫画风格设计：

- 采用圆角、阴影和渐变效果
- 头像圆形设计，带有边框和阴影
- 左上角勋章标签，带有旋转效果
- 整个卡片可点击跳转（新标签打开）

1. 响应式设计：

- 适配不同屏幕尺寸
- 在小屏幕上自动调整为单列布局
- 确保在各种设备上都能正常显示

1. 暗色模式适配：

- 为深色模式下的卡片添加了专门的样式
- 确保卡片在深色模式下也能正常显示
- 保持了与浅色模式一致的设计风格

📖 使用说明

1. 启用MD语法编辑器：

- 后台 → 外观 → 盒子萌主题设置 → 系统优化 → 启用MD语法编辑器

1. 使用卡片语法：

名称：
   头像链接：
   描述：
   链接：
   勋章：
   

1. 发布文章：

- 在编辑器中输入卡片语法，点击发布
- 前端将显示漫画风格的卡片

🔍 代码寻找

• MD卡片样式：wp-content/themes/lolimeow-shiroki/assets/css/shiroki-md-card.css
• 样式加载：wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php
• Markdown解析：wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php

📝 优化效果

• ✅ 标签样式大小适中，显示正常
• ✅ 分类图标居中在圆角样式内
• ✅ 卡片链接不再重复
• ✅ 卡片样式独立，不受主题样式影响
• ✅ 无!important声明，代码可维护性高
• ✅ 悬停时卡片上移，动画流畅自然
• ✅ 头像边框无动画，保持静止状态
• ✅ 勋章背景色为纯黄色
• ✅ 头像始终保持圆形，边框无动画
• ✅ 适配浅色和深色模式

🚀 后续优化方向

1. 进一步优化CSS特异性：

- 继续优化CSS选择器
- 确保样式的精确性
- 提高代码的可维护性

1. 增强响应式设计：

- 进一步优化不同屏幕尺寸下的显示效果
- 确保在各种设备上都能提供良好的用户体验

1. 优化性能：

- 减少CSS和JavaScript的加载大小
- 优化动画性能
- 提高页面加载速度

1. 增强可定制性：

- 提供更多的卡片样式选项
- 支持自定义卡片颜色和动画
- 允许用户根据需要调整卡片样式

📅 更新记录

• 2025-12-21：完成了MD卡片式内容的全面优化
• 2025-12-20：修复了标签样式和分类图标居中问题
• 2025-12-19：将md卡片样式移到了单独的文件
• 2025-12-18：修复了重复a标签和!important声明问题
• 2025-12-17：优化了悬停动画和头像边框动画

📌 总结

1. 独立的样式系统：不会受到主题样式的影响
2. 流畅的动画效果：悬停时卡片上移，增强用户体验
3. 适配浅色和深色模式：在各种主题下都能正常显示
4. 响应式设计：适配不同屏幕尺寸
5. 漫画风格设计：美观、可爱，符合主题风格
6. 可维护的代码：移除了!important声明，使用更高的CSS特异性

这个优化后的MD卡片式内容系统，将为用户提供更好的阅读体验，同时也提高了代码的可维护性和扩展性。

🔧 [ downloadbtn]短代码渲染问题修复

文件位置: wp-content/themes/lolimeow-shiroki/core/module/fun-shortcode.php · wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php · wp-content/themes/lolimeow-shiroki/core/module/fun-article.php

🔍 问题描述

当在文章中使用[ downloadbtn]短代码时，前端渲染会出现多余的>arm64（不支持32）文本，影响页面美观和用户体验。

🔧 修复内容

1. Markdown处理顺序优化：

- 将boxmoe_md_the_content函数的优先级从9调整为12
- 确保Markdown处理器在WordPress短代码处理（默认优先级11）之后执行
- 避免Markdown处理器错误处理短代码内容

1. 添加短代码到no_texturize_shortcodes过滤器：

- 将downloadbtn及其他相关短代码添加到no_texturize_shortcodes过滤器
- 防止WordPress的wptexturize函数错误处理短代码内容
- 确保短代码前后的特殊字符（如>）不会被错误转换为HTML实体

1. 修复boxmoe_external_link_redirect函数：

- 改进了a标签属性提取逻辑
- 使用正则表达式精确匹配a标签的属性部分
- 避免了属性提取过程中产生无效HTML
- 确保外部链接跳转功能正常工作

📋 代码优化要点

1. 优先级调整：

// 原代码
   add_filter('the_content', 'boxmoe_md_the_content', 9);
   
   // 修改为
   add_filter('the_content', 'boxmoe_md_the_content', 12);
   

1. 短代码过滤器添加：

add_filter( 'no_texturize_shortcodes', function( $shortcodes ) {
       $shortcodes[] = 'precode';
       $shortcodes[] = 'downloadbtn';
       $shortcodes[] = 'linksbtn';
       // 其他短代码...
       return $shortcodes;
   });
   

1. 外部链接函数修复：

- 使用精确的正则表达式提取a标签属性
- 正确处理href属性前后的其他属性
- 确保生成的HTML格式正确

🔍 代码寻找

• 短代码定义：wp-content/themes/lolimeow-shiroki/core/module/fun-shortcode.php
• Markdown处理：wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php
• 外部链接处理：wp-content/themes/lolimeow-shiroki/core/module/fun-article.php

✅ 优化效果

• ✅ 修复了[ downloadbtn]短代码渲染时出现的多余文本问题
• ✅ 确保短代码在各种场景下都能正确渲染
• ✅ 保持了Markdown和短代码功能的完整性
• ✅ 修复了外部链接跳转功能
• ✅ 提高了代码的可维护性和稳定性

⏱️ 时间线悬停覆盖色圆角优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/style.css

🔧 修复内容

1. 悬停覆盖色圆角优化：

- 将时间线事件缩略日期的悬停覆盖色从方形改为圆角样式
- 为.timeline-event-thumbnail类添加了border-radius属性
- 设置了20px的圆角半径，使悬停效果更加柔和美观
- 同时添加了浏览器兼容性前缀，确保在各种浏览器中都能正常显示

📋 代码优化要点

1. CSS样式优化：

- 为.timeline-event-thumbnail类添加了border-radius: 20px;
- 添加了浏览器兼容性前缀-moz-border-radius和-webkit-border-radius
- 确保样式在各种浏览器中都能正常生效

🔍 代码寻找

• 时间线样式：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 具体位置：.single-content .timeline-event-thumbnail类定义

✅ 优化效果

• ✅ 时间线悬停覆盖色从方形改为圆角样式
• ✅ 圆角半径为20px，效果柔和美观
• ✅ 支持浏览器兼容性前缀
• ✅ 保持了原有的悬停动画和颜色效果
• ✅ 与现代设计趋势保持一致