作為一個經常發推文並在公共場合進行建置的人,我經常需要展示我的部分或部分程式碼片段。我一直以來的做法是複製程式碼,然後使用 ray.so 或 Polacode 之類的工具。

對於不了解的人來說,Polacode 是一個用於建立程式碼截圖的 Visual Studio Code 擴充功能。我很喜歡這個工具,但它有一些 bug,而且由於維護者不再活躍,這些 bug 仍然存在。所以我決定自己建造一個。

SnippetShot 是什麼?

SnippetShot是一款免費的 VS Code 擴展程序,可讓您在幾秒鐘內將程式碼轉換為簡潔、可共享的圖像。複製程式碼,開啟 SnippetShot,即可匯出帶有樣式的 PNG 文件,無需離開編輯器。就是這麼簡單。

SnippetShot 是 Polacode 的更新版本,因此如果您是 Polacode 的粉絲,那麼這個工具適合您。

使用 snippetshot 截取的程式碼截圖

特徵

  • 可自訂背景。選擇任意顏色以配合您的風格或品牌。

  • 行號切換。根據需要顯示或隱藏行號。

  • 在您的螢幕截圖中新增自訂字幕或文字。

  • Twitter/X 分享。立即複製您的圖像並分享。

工作原理

  1. 若要安裝擴充程序,請按一下編輯器左側欄上的擴充功能圖示以開啟市場,然後搜尋SnippetShot

  2. 安裝後,打開命令面板。在 Windows 上,使用Ctrl+P 。在 Mac 上,使用Cmd+Shift+P

  3. 打開任何包含程式碼的檔案。選擇程式碼,它將出現在編輯器右側面板中,其中 SnippetShot 已開啟。

  4. 從那裡,您可以更改背景顏色、切換行號並加入您的姓名。

  5. 按一下「儲存」「分享到 Twitter」

{% 嵌入 https://youtu.be/6EhfJ6yKfPA %}

SnippetShot 還支援漸變背景,以實現更靈活的樣式。

注意:還有另一個名稱相似的工具,但我的是一個純 VS Code 擴充。

點擊此處下載擴充功能。我剛剛在Product Hunt上發布了它。如果您覺得它有用,請在那裡點贊,並在GitHub上點個星。


原文出處:https://dev.to/bridget_amana/introducing-snippetshot-a-vs-code-extension-for-clean-code-screenshots-8dm


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝10   💬6   ❤️11
454
🥈
我愛JS
📝1   💬5   ❤️4
88
🥉
AppleLily
📝1   💬4   ❤️1
47
#4
💬2  
6
#5
💬1  
5
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次