Chalk.ist是什么？

Chalk.ist 是一款由Idered打造的開源代碼截圖工具，主要幫助開發(fā)者將代碼生成為美觀的圖片，用戶只需粘貼代碼，選擇主題和樣式，就能快速創(chuàng)建美觀的代碼截圖，支持多種編程語言。適用于博客寫作、ppt 講解、社媒分享等場(chǎng)景。

Chalk.ist特點(diǎn)

• 界面直觀：左側(cè)有主題、字體、背景、格式等大量調(diào)節(jié)參數(shù)面板，各種漸變背景美觀，用戶可自行探索和調(diào)整，能滿足不同用戶對(duì)于代碼展示風(fēng)格的個(gè)性化需求。

• 高度自定義：

• 代碼細(xì)節(jié)調(diào)整：可以根據(jù)喜好調(diào)整代碼的字體、字號(hào)、行距、字距等細(xì)節(jié)，還能選擇不同的代碼高亮樣式，讓代碼更加清晰易讀。

• 窗口樣式定制：支持自定義窗口樣式，包括窗口背景、標(biāo)題欄、窗口陰影等，使截圖更加專業(yè)。

• 多種裝飾選項(xiàng)：支持行裝飾、背景噪聲、背景粒子等多種裝飾選項(xiàng)，提升代碼截圖的視覺效果。

• 主題豐富：包含一系列現(xiàn)成的主題，并且允許用戶創(chuàng)建自己的主題，內(nèi)置多種主題和樣式，可自由選擇最符合自己風(fēng)格的代碼配色。

• 便捷高效：簡(jiǎn)單幾步就能把代碼生成一張精美的圖片，適合任何社交媒體分享，節(jié)省時(shí)間和精力。

• 支持保存預(yù)設(shè)：用戶可以保存當(dāng)前設(shè)置為預(yù)設(shè)，以便以后快速訪問和使用，下次截圖時(shí)能快速應(yīng)用常用風(fēng)格，省時(shí)省力。

• 易于分享：用戶可以將美化后的代碼截圖導(dǎo)出為PNG或SVG格式，并輕松分享到社交媒體或嵌入到博客中。

• 性能優(yōu)越：使用Vue 3構(gòu)建，速度快。

技術(shù)架構(gòu)

• 前端：基于Vue.js，提供了豐富的交互和UI配置選項(xiàng)。

• 后端：主要由Nuxt.js驅(qū)動(dòng)，支持動(dòng)態(tài)路由和服務(wù)端渲染的能力。

• 樣式處理：通過TailwindCSS實(shí)現(xiàn)，靈活高效。此外，項(xiàng)目還提供了一個(gè) /healthcheck 的API端點(diǎn)，可以用來監(jiān)控服務(wù)的健康狀態(tài)。

Chalk.ist使用教程

1. 訪問Chalk.ist網(wǎng)站：訪問https://chalk.ist/ 。

2. 選擇代碼主題：在網(wǎng)站上選擇喜歡的代碼主題，它提供多種預(yù)設(shè)主題和自定義主題，滿足不同用戶的需求。

3. 粘貼代碼：將想要美化的代碼粘貼到編輯器中，可在編輯器中看到代碼的實(shí)時(shí)預(yù)覽效果。

4. 自定義樣式：根據(jù)需要自定義代碼的樣式，包括窗口樣式、背景顏色、字體、行號(hào)顯示等，還能調(diào)整窗口的邊框、陰影、透明度等參數(shù)，使截圖更加美觀。

5. 導(dǎo)出截圖：完成自定義后，點(diǎn)擊“導(dǎo)出”按鈕，將美化后的代碼截圖保存到本地，可選擇導(dǎo)出為PNG或SVG格式。

部署方式

http://chalk.ist/使用Nuxt.js進(jìn)行前后端開發(fā)，支持在Vercel上快速部署，非常方便。如果想在本地運(yùn)行，參考以下步驟來進(jìn)行操作：

1. 克隆項(xiàng)目：在終端中執(zhí)行 git clone https://github.com/Idered/chalk.ist 命令。

2. 安裝依賴：使用 pnpm install 命令安裝項(xiàng)目所需依賴。

3. 啟動(dòng)開發(fā)環(huán)境：運(yùn)行 pnpm run dev 命令，即可在本地啟動(dòng)Chalk.ist。

開源地址：https://github.com/Idered/chalk.ist

相關(guān)資訊：

屏幕截圖美化工具