## 簡介
你見過 Twitter 上面的 [這 些](https://twitter.com/dan_abramov/status/890191815567175680) [程式碼](https://twitter.com/reactjs/status/890511993261654017) [圖片](https://twitter.com/notquiteleo/status/873483329345028096) 嗎? 雖然這些程式碼令人印象深刻，但從美觀程度來說還有提升空間。Carbon 能夠輕鬆地將你的原始碼生成漂亮的圖片並分享。還等什麼呢？用這個新發現的美化工具秀給你的 followers 看吧。
## 特色
- **訂製化**：訂製選項包括圖片的語法主題、字體樣式等
- **快速分享**：一鍵生成圖片或網址並分享
- **儲存記錄**：建立帳號來儲存程式碼片段，已分享的程式碼會自動展開至 Twitter 和 Slack
## 使用
####
有幾種不同的方法可以將程式碼輸入到 Carbon：
- 把檔案拖曳到編輯器中
- 在 carbon url 後面加上 GitHub gist id （例如 [`carbon.now.sh/你的_gist_id`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)）
- 直接貼上程式碼！
#### 訂製化
當你把程式碼輸入到 Carbon 後，你可以調整程式碼圖片。訂製選項包括語法主題、背景顏色、視窗主題、padding、陰影、字體等等。
#### 輸出 & 分享
當你調整完圖片樣式後，可以透過以下方式分享。
#### 儲存程式碼片段
分享一個儲存的程式碼片段可以自動在 Twitter 和 Slack 等平台上展開圖片。這種方式可以讓使用者在看圖片的同時，也能夠點開網址取得你的程式碼。
如果你通過 "Tweet" 按鈕分享，Carbon 將自動設置你的圖片為公開訪問。不過如果你想手動分享圖片，可以查看 [如何設置 Twitter 圖片公開訪問](https://help.twitter.com/en/using-twitter/picture-descriptions)。
如果你在文章中添加 Carbon 圖片，注意到圖片中的原始碼對於無障礙技術來說是不可見的，比如無法放大字號或複製。可以考慮新增一個元素展示文本形式的原始碼，比如在圖片下方加一個 [詳細訊息展現元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details)。
#### 安裝 Carbon 桌面客戶端（離線）
如果你使用的是 Google Chrome 或別的支持 PWA 技術的瀏覽器，你可以安裝 Carbon 並離線使用：
1. 訪問 [https://carbon.now.sh](https://carbon.now.sh)
2. 點擊瀏覽器的設置按鈕
3. 點擊 "安裝 Carbon..."
## 社群
瀏覽社群中的這些優秀專案：
##### 編輯器擴充功能
- [IntelliJ IDEA `carbon-now-sh`](https://plugins.jetbrains.com/plugin/10469-carbon-now-sh) - 在 IntelliJ IDEA 中透過右鍵選單輸入選中的程式碼到 Carbon
- [Atom `carbon-now-sh`](https://atom.io/packages/carbon-now-sh) - 在 Atom 中透過 `shift-cmd-A` 快捷鍵輸入當前檔案到 Carbon
- [VS Code `carbon-now-sh`](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh) - 在 VS Code 中透過 `carbon` 命令輸入當前檔案到 Carbon
- [Sublime Text 3 `carbon-now-sh`](https://github.com/molnarmark/carbonSublime) - 在 Sublime Text 3 中透過自訂快捷鍵輸入選中的程式碼到 Carbon
- [Vim `carbon-now-sh`](https://github.com/kristijanhusak/vim-carbon-now-sh) - 在 Vim/Neovim 中透過 `CarbonNowSh()` 函數輸入選中的程式碼到 Carbon
- [Emacs `carbon-now-sh`](https://github.com/veelenga/carbon-now-sh.el) - 在 Emacs 中透過 `carbon-now-sh` 交互函數輸入選中的程式碼到 Carbon
- [Xcode `carbon-now-sh`](https://github.com/StevenMagdy/CarboNow4Xcode) - 在 `carbon.now.sh` 中打開選中的程式碼
- [Xcode `nef`](https://github.com/bow-swift/nef-plugin) - 這個 Xcode 外掛程式能讓你將選中的程式碼一鍵輸出成 Carbon 片段
##### 工具
- [CLI `carbon-now-cli`](https://github.com/mixn/carbon-now-cli) - 用 `carbon-now` 命令在 Carbon 中打開一個檔案或者直接下載它，包含互動式選項、可選高亮等功能
- [CodeExpander](https://codeexpander.com) - 是一個智慧並具有像 TextExpander 特性的 GitHub Gist 客戶端
- [`nef`](https://github.com/bow-swift/nef#-exporting-carbon-code-snippets) - 從 `Xcode Playground` 輸出多個 Carbon 程式碼片段。
##### 工具
- [R `carbonate`](https://yonicd.github.io/carbonate/) - 用 `R` 腳本疊代處理圖片樣式並在 Carbon 中打開或直接下載。
##### 引用
- ["CS 101 - An Introduction to Computational Thinking"](https://itunes.apple.com/us/book/id1435714196) - Sarbo Roy 寫的一本電腦科學書.
## 專案作者
Carbon 專案由 TA 們發起：
- Mike Fix ([@mfix22](https://github.com/mfix22))
- Brian Dennis ([@briandennis](https://github.com/briandennis))
- Jake Dexheimer ([@jakedex](https://github.com/jakedex))
#### License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)
---
## 貢獻程式碼
歡迎 PR！請查看 [貢獻指南](/.github/CONTRIBUTING.md) 了解詳情。
### 贊助商
你的公司在用 Carbon 嗎？考慮一下為此專案的新功能開發、bug 修復等提供贊助。
### 贊助者
喜歡用 Carbon 嗎？考慮一下為此專案的新功能開發或改進提供贊助。
### 感謝
[ ▲ Vercel ](https://vercel.com/) 贊助了 Carbon 的服務託管。
### 所有貢獻者
感謝所有這些優秀的貢獻者們 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
