41 KiB
簡介
你見過 Twitter 上面的 這些 程式碼 圖片 嗎? 雖然這些程式碼令人印象深刻,但從美觀程度來說還有提升空間。Carbon 能夠輕鬆地將你的原始碼產生漂亮的圖片並分享。還等什麼呢?用這個新發現的美化工具秀給你的 followers 看吧。
特色
- 客製化:訂製選項包括圖片的語法主題、字體樣式等
- 快速分享:一鍵產生圖片或網址並分享
- 儲存記錄:建立帳號來儲存程式碼片段,已分享的程式碼會自動展開至 Twitter 和 Slack
使用
匯入
有幾種不同的方法可以將程式碼匯入到 Carbon:
- 把檔案拖曳到編輯器中
- 在 carbon url 後面加上 GitHub gist id (例如
carbon.now.sh/你的_gist_id
) - 或是直接貼上程式碼!
客製化
當你把程式碼輸入到 Carbon 後,你可以調整程式碼圖片。客製選項包括語法主題、背景顏色、視窗主題、邊距、陰影、字體等等。
匯出 & 分享
當你調整完圖片樣式後,可以透過以下方式分享。
儲存程式碼片段
這種方式可以透過連結直接將程式碼片段分享到 Twitter 跟 Slack 這類平台。這種方式可以讓使用者在看圖片的同時,也能夠點開網址取得你的程式碼。而且如果你需要更新程式碼的話,直接在同一個網址更新程式碼就可以了!
如何儲存程式碼片段?
- 先登入 Carbon
- 照你平常的方式編輯程式碼就可以了,系統會自動儲存程式碼片段
- 複製瀏覽器上的網址並且分享出去
嵌入程式碼片段
如果你想要分享程式碼片段在你自己的網站或部落格,這是一個最推薦的方式。讀者可以使用複製按鈕直接複製你的程式碼片段。
你只要透過 carbon.now.sh/embed/:id
這個網址,就可以直接讓你的程式碼片段嵌入到網站裡了。
使用 Tweet 按鈕分享
"Tweet" 按鈕不只會將你的程式碼片段變成圖片分享至 Twitter,也會設定正確的 alt
屬性以確保你的圖片是符合無障礙環境,Carbon 將自動將你的圖片讀取權限設定為公開。不過如果你想手動分享圖片,也可以看看 如何將你的圖片設定成無障礙環境。
直接下載圖片
Carbon 也支援直接將程式碼片段下載為 PNG 或是 SVG 檔。你可以點選 Export → Open
直接在瀏覽器打開你的程式碼片段圖片。你也可以使用 Copy → Image
直接將圖片複製到你的剪貼簿裡面。
安裝 Carbon 桌面客戶端(離線)
如果你使用的是 Google Chrome 或別的支持 PWA 技術的瀏覽器,你可以安裝 Carbon 並離線使用:
- 訪問 https://carbon.now.sh
- 點擊瀏覽器的設置按鈕
- 點擊 "安裝 Carbon..."
社群
瀏覽社群中的這些優秀專案:
編輯器擴充功能
- IntelliJ IDEA
carbon-now-sh
- 在 IntelliJ IDEA 中透過右鍵選單輸入選中的程式碼到 Carbon - Atom
carbon-now-sh
- 在 Atom 中透過shift-cmd-A
快捷鍵輸入當前檔案到 Carbon - VS Code
carbon-now-sh
- 在 VS Code 中透過carbon
命令輸入當前檔案到 Carbon - Sublime Text 3
carbon-now-sh
- 在 Sublime Text 3 中透過自訂快捷鍵輸入選中的程式碼到 Carbon - Vim
carbon-now-sh
- 在 Vim/Neovim 中透過CarbonNowSh()
函數輸入選中的程式碼到 Carbon - Emacs
carbon-now-sh
- 在 Emacs 中透過carbon-now-sh
交互函數輸入選中的程式碼到 Carbon - Xcode
carbon-now-sh
- 在carbon.now.sh
中打開選中的程式碼 - Xcode
nef
- 這個 Xcode 外掛程式能讓你將選中的程式碼一鍵輸出成 Carbon 片段
工具
- CLI
carbon-now-cli
- 用carbon-now
命令在 Carbon 中打開一個檔案或者直接下載它,包含互動式選項、可選高亮等功能 - CodeExpander - 是一個智慧並具有像 TextExpander 特性的 GitHub Gist 客戶端
nef
- 從Xcode Playground
輸出多個 Carbon 程式碼片段。
工具
- R
carbonate
- 用R
腳本疊代處理圖片樣式並在 Carbon 中打開或直接下載。
引用
- "CS 101 - An Introduction to Computational Thinking" - Sarbo Roy 寫的一本電腦科學書.
專案作者
Carbon 專案由 TA 們發起:
- Mike Fix (@mfix22)
- Brian Dennis (@briandennis)
- Jake Dexheimer (@jakedex)
License
貢獻程式碼
歡迎 PR!請查看 貢獻指南 了解詳情。
贊助商
你的公司在用 Carbon 嗎?考慮一下為此專案的新功能開發、bug 修復等提供贊助。
贊助者
喜歡用 Carbon 嗎?考慮一下為此專案的新功能開發或改進提供贊助。
感謝
▲ Vercel 贊助了 Carbon 的服務託管。
所有貢獻者
感謝所有這些優秀的貢獻者們 (emoji key):