从0到1：极简代码截图工具的开发与实践

在当今数字化的时代，代码截图是开发者日常工作中不可或缺的一部分。然而，现有的工具大多需要上传数据到云端，这不仅可能带来隐私问题，还增加了延迟和不稳定性的风险。为了解决这些问题，我决定开发一个极简的在线代码截图美化工具——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)} height="50vh" extensions={[javascript({ jsx: true })]} /> <img id="preview" src={preview} alt="Preview" style={{ display: 'none' }} /> </div> ); }; export default Editor;

2. macOS 风格窗口按钮

我们使用了 Tailwind CSS 的样式来实现 macOS 风格的窗口按钮。以下是关键代码片段：

import { XIcon } from '@heroicons/react/solid'; const WindowButtons = () => { return ( <div className="flex"> <button className="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded-l"> □□□ </button> <button className="px-2 py-1 bg-gray-200 hover:bg-gray-300"> - - </button> <button className="px-2 py-1 bg-red-500 hover:bg-red-600 rounded-r" onClick={() => window.close()}> <XIcon className="w-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 value="color">纯色</option> <option value="gradient">渐变</option> <option value="image">图片背景</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 等技术栈构建一个极简的代码截图美化工具。这个项目不仅功能实用，而且注重用户隐私和数据安全。如果你对前端开发感兴趣，不妨尝试一下这个项目，相信你会有不少收获。

感谢阅读！