在当今数字化的时代代码截图是开发者日常工作中不可或缺的一部分。然而现有的工具大多需要上传数据到云端这不仅可能带来隐私问题还增加了延迟和不稳定性的风险。为了解决这些问题我决定开发一个极简的在线代码截图美化工具——Code Screenshot Beautification Tool。最终效果截图为什么做这个工具随着远程工作和团队协作的普及开发者越来越需要快速、准确地分享代码片段。然而现有的工具通常需要用户上传数据到云端这不仅可能带来隐私问题还增加了延迟和不稳定性的风险。为了提供一个安全、高效、且本地化的解决方案我决定开发这个极简的代码截图美化工具。技术选型在技术选型阶段我选择了以下框架和技术Vite作为构建工具提供快速的冷启动和热模块替换。React用于构建用户界面。Tailwind CSS用于样式设计确保响应式和可定制的界面。Shiki用于语法高亮提高代码阅读体验。html-to-image用于将HTML内容转换为图片。Electron用于构建桌面版应用。核心功能实现拆解1. 代码编辑区与实时预览我们使用了 React 的 useState 和 useEffect 钩子来管理代码编辑区的状态和预览区域的渲染。以下是关键代码片段import { useState, useEffect } from react; import CodeMirror from uiw/react-codemirror; import codemirror/lib/codemirror.css; const Editor () { const [code, setCode] useState(console.log(Hello, World!);); const [preview, setPreview] useState(); useEffect(() { import(html-to-image).then((htoi) { htoi.toPng(document.querySelector(#preview)).then((dataUrl) { setPreview(dataUrl); }); }); }, [code]); return ( div CodeMirror value{code} onChange{(value) setCode(value)} height50vh extensions{[javascript({ jsx: true })]} / img idpreview src{preview} altPreview style{{ display: none }} / /div ); }; export default Editor;2. macOS 风格窗口按钮我们使用了 Tailwind CSS 的样式来实现 macOS 风格的窗口按钮。以下是关键代码片段import { XIcon } from heroicons/react/solid; const WindowButtons () { return ( div classNameflex button classNamepx-2 py-1 bg-gray-200 hover:bg-gray-300 rounded-l □□□ /button button classNamepx-2 py-1 bg-gray-200 hover:bg-gray-300 - - /button button classNamepx-2 py-1 bg-red-500 hover:bg-red-600 rounded-r onClick{() window.close()} XIcon classNamew-4 h-4 text-white / /button /div ); }; export default WindowButtons;3. 三套主题切换我们使用了 Tailwind CSS 的预设类名来实现主题切换。以下是关键代码片段import { useEffect } from react; import classNames from classnames; const themes [light, dark, custom]; const App () { const [theme, setTheme] useState(light); useEffect(() { document.documentElement.className theme; }, [theme]); return ( div className{classNames(theme light ? bg-white text-black : (theme dark ? bg-gray-800 text-white : bg-gradient-to-br from-purple-600 to-pink-600 text-white))} {/* ... */} select onChange{(e) setTheme(e.target.value)} {themes.map((t, index) ( option key{index} value{t} {t} /option ))} /select /div ); }; export default App;4. 纯色/渐变/图片设置我们使用了 CSS 的 background 属性来实现不同类型的背景。以下是关键代码片段.light { background: white; } .dark { background: #121212; } .custom { background: linear-gradient(to right, #ff9a9e, #fad0c4); }import React, { useState } from react; const BackgroundSetter () { const [backgroundType, setBackgroundType] useState(color); const handleBackgroundChange (event) { setBackgroundType(event.target.value); }; return ( select value{backgroundType} onChange{handleBackgroundChange} option valuecolor纯色/option option valuegradient渐变/option option valueimage图片背景/option /select ); }; export default BackgroundSetter;5. 一键导出高清PNG我们使用了 html-to-image 库来实现截图功能。以下是关键代码片段import { useRef } from react; import html2canvas from html2canvas; const ExportButton () { const previewRef useRef(null); const handleExport async () { await html2canvas(previewRef.current).then((canvas) { canvas.toBlob((blob) { saveAs(blob, screenshot.png); }); }); }; return ( button onClick{handleExport}导出高清PNG/button ); }; export default ExportButton;6. 复制代码我们使用了 react-copy-to-clipboard 库来实现复制功能。以下是关键代码片段import { CopyToClipboard } from react-copy-to-clipboard; const CopyButton ({ code }) { return ( CopyToClipboard text{code} button一键复制代码/button /CopyToClipboard ); }; export default CopyButton;部署与开源该项目已部署在 GitHub Pages 上你可以访问https://szxyes77.github.io/Code-screenshot-beautification-tool/ 查看。同时该工具也已发布为 Electron 应用你可以在 GitHub Releases 页面下载。如果你喜欢这个项目请在 GitHub 上 Star 一下https://github.com/szxyes77/Code-screenshot-beautification-tool结语通过本文我们介绍了如何使用 Vite、React、Tailwind CSS 等技术栈构建一个极简的代码截图美化工具。这个项目不仅功能实用而且注重用户隐私和数据安全。如果你对前端开发感兴趣不妨尝试一下这个项目相信你会有不少收获。感谢阅读