当前位置：首页 > news >正文

Code-box高级用法：自定义CSS样式和图片批量下载实战指南

news 2026/8/1 18:28:35

Code-box高级用法：自定义CSS样式和图片批量下载实战指南

【免费下载链接】code-box本插件可以用于CSDN/知乎/脚本之家/博客园/掘金等网站,一键下载文章html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗.项目地址: https://gitcode.com/gh_mirrors/co/code-box

Code-box是一款功能强大的浏览器插件，专为CSDN、知乎、掘金、脚本之家等主流技术社区设计，能够实现一键下载文章HTML/Markdown文件、无需登录复制代码、去除登录弹窗等核心功能。对于追求极致体验的高级用户来说，code-box的自定义CSS样式和图片批量下载功能更是锦上添花，让内容管理更加高效便捷。

🔧 自定义CSS样式：打造个性化阅读体验

code-box的自定义CSS样式功能允许用户为不同网站注入自定义样式代码，彻底改变页面外观。这个功能通过component/items/cssCode.tsx组件实现，为用户提供了灵活的自定义选项。

如何使用自定义CSS功能

启用CSS自定义开关：在code-box插件面板中，找到目标网站的自定义CSS选项
编写CSS代码：在文本框中输入您想要应用的CSS样式
实时生效：保存后立即在目标网站上看到效果变化

实用CSS样式示例

美化代码块样式：

/* 代码块美化 */ pre, code { background-color: #f6f8fa !important; border-radius: 6px !important; border: 1px solid #e1e4e8 !important; font-family: 'JetBrains Mono', monospace !important; line-height: 1.5 !important; } /* 代码高亮优化 */ .hljs-keyword { color: #d73a49 !important; } .hljs-string { color: #032f62 !important; } .hljs-comment { color: #6a737d !important; }

优化阅读体验：

/* 调整文章字体和间距 */ .article-content { font-family: 'Noto Sans SC', sans-serif !important; font-size: 16px !important; line-height: 1.8 !important; color: #24292e !important; } /* 隐藏广告和干扰元素 */ .ad-container, .recommend-box, .popup-modal { display: none !important; }

暗色模式适配：

/* 暗色模式适配 */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a !important; color: #e6e6e6 !important; } .article-content { background-color: #2d2d2d !important; color: #e6e6e6 !important; } }

📸 图片批量下载：高效管理文章素材

code-box的图片批量下载功能通过component/items/downloadImages.tsx组件实现，能够一键下载页面中的所有图片，并自动打包为ZIP文件。这个功能对于需要保存教程配图、技术文档插图或设计素材的用户来说非常实用。

图片批量下载流程

点击下载按钮：在插件面板中找到"下载所有图片"选项
自动收集图片：插件会自动扫描页面中的所有图片元素
打包下载：所有图片被打包成ZIP文件并下载到本地
进度显示：下载过程中显示实时进度百分比

技术实现原理

图片批量下载功能的核心代码位于utils/downloadAllImg.ts，主要实现步骤包括：

图片获取：使用document.querySelectorAll("img")获取页面所有图片
Canvas处理：通过Canvas将图片转换为PNG格式，确保格式统一
ZIP打包：使用JSZip库将所有图片打包成ZIP文件
文件保存：通过file-saver库将ZIP文件保存到本地

// 核心下载函数 export async function downloadAllImagesAsZip(filename?: string) { const zip = new JSZip() // 创建ZIP文件 const imgFolder = zip.folder("images") // 创建图片文件夹 const images = document.querySelectorAll("img") // 获取所有图片元素 // 处理每张图片 images.forEach((img, index) => { // 下载并添加到ZIP imgFolder.file(`image_${index + 1}.png`, blob) }) // 生成并下载ZIP文件 zip.generateAsync({ type: "blob" }).then((content) => { saveAs(content, `${filename}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.zip`) }) }