maintained with Ranger All Contributors MIT License FOSSA Status



## 簡介 你見過 Twitter 上面的 [這些](https://twitter.com/dan_abramov/status/890191815567175680) [程式碼](https://twitter.com/reactjs/status/890511993261654017) [圖片](https://twitter.com/notquiteleo/status/873483329345028096) 嗎? 雖然這些程式碼令人印象深刻,但從美觀程度來說還有提升空間。Carbon 能夠輕鬆地將你的原始碼產生漂亮的圖片並分享。還等什麼呢?用這個新發現的美化工具秀給你的 followers 看吧。

Carbon example

## 特色 - **客製化**:訂製選項包括圖片的語法主題、字體樣式等 - **快速分享**:一鍵產生圖片或網址並分享 - **儲存記錄**:建立帳號來儲存程式碼片段,已分享的程式碼會自動展開至 Twitter 和 Slack ## 使用 #### 匯入 有幾種不同的方法可以將程式碼匯入到 Carbon: - 把檔案拖曳到編輯器中 - 在 carbon url 後面加上 GitHub gist id (例如 [`carbon.now.sh/你的_gist_id`](https://carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8)) - 或是直接貼上程式碼! #### 客製化 當你把程式碼輸入到 Carbon 後,你可以調整程式碼圖片。客製選項包括語法主題、背景顏色、視窗主題、邊距、陰影、字體等等。 #### 匯出 & 分享 當你調整完圖片樣式後,可以透過以下方式分享。 ##### 儲存程式碼片段 這種方式可以透過連結直接將程式碼片段分享到 Twitter 跟 Slack 這類平台。這種方式可以讓使用者在看圖片的同時,也能夠點開網址取得你的程式碼。而且如果你需要更新程式碼的話,直接在同一個網址更新程式碼就可以了! 如何儲存程式碼片段? 1. 先登入 Carbon 2. 照你平常的方式編輯程式碼就可以了,系統會自動儲存程式碼片段 3. 複製瀏覽器上的網址並且分享出去 ##### 嵌入程式碼片段 如果你想要分享程式碼片段在你自己的網站或部落格,這是一個最推薦的方式。讀者可以使用複製按鈕直接複製你的程式碼片段。 你只要透過 `carbon.now.sh/embed/:id` 這個網址,就可以直接讓你的程式碼片段嵌入到網站裡了。 ##### 使用 Tweet 按鈕分享 "Tweet" 按鈕不只會將你的程式碼片段變成圖片分享至 Twitter,也會設定正確的 `alt` 屬性以確保你的圖片是符合無障礙環境,Carbon 將自動將你的圖片讀取權限設定為公開。不過如果你想手動分享圖片,也可以看看 [如何將你的圖片設定成無障礙環境](https://help.twitter.com/en/using-twitter/picture-descriptions)。 ##### 直接下載圖片 Carbon 也支援直接將程式碼片段下載為 PNG 或是 SVG 檔。你可以點選 `Export → Open` 直接在瀏覽器打開你的程式碼片段圖片。你也可以使用 `Copy → Image` 直接將圖片複製到你的剪貼簿裡面。 #### 安裝 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 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcarbon-app%2Fcarbon?ref=badge_large)

--- ## 貢獻程式碼 歡迎 PR!請查看 [貢獻指南](/.github/CONTRIBUTING.md) 了解詳情。 ### 贊助商 你的公司在用 Carbon 嗎?考慮一下為此專案的新功能開發、bug 修復等提供贊助。 [![Fossa](https://assets-global.website-files.com/5f4d9ea2592c16056cb0f7a5/5f4d9ea2592c16d9a2b0f7da_logo-FOSSA-night-blue.svg)](https://fossa.com) ### 贊助者 喜歡用 Carbon 嗎?考慮一下為此專案的新功能開發或改進提供贊助。 ### 感謝 [ ▲ Vercel ](https://vercel.com?utm_source=carbon-app&utm_campaign=oss) 贊助了 Carbon 的服務託管。 ### 所有貢獻者 感謝所有這些優秀的貢獻者們 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

briandennis

💻 📖 🚇 👀

mfix22

💬 💻 🤔

jakedex

💬 💻 🎨 📹

andrewda

💬 💻 🐛 👀

yeskunall

💻 📖 🔧 🐛

stoshfabricius

💻

jkling38

📖

otobrglez

💻

darahak

📖

dom96

💻

elrumordelaluz

💻

cjb

💻

Krzysztof-Cieslak

💻

fernahh

📖

g3r4n

💻

Mat Gadd

🐛 💻

Brad Davies

🐛 💻

Rafael Câmara

💻

Gleb Bahmutov

⚠️ 🔧

Iván Munguía

💻

Dillon Mulroy

💻

Nihad Abbasov

💻

Hugo Torzuoli

📖

Bruno C. Couto

💻

Mark Molnar

💻

Takahiko Inayama

💻

François Martin

💻

Raphael Amorim

💻

Camron Flanders

💻

Eric Adamski

💻

Winner Crespo

💻 🎨

Milos

💻 🔧 📖 🌍

Yashu Mittal

💻

Rachel M. Carmena

📖

Miguel Salazar

📖 🌍

Vyom Jain

📖 🌍

racaljk

🌍

Sean

💻

Izabela Borges

🌍

Shinil M S

🌍

Berke Atac

🌍

LEE YONGJUN

🌍

Matthew Nielsen

💻

Boy

📦

Vetrivel Chinnasamy

🌍

Farzad YZ

💻 🤔

Yannick Loriot

🌍

Joel Hanson

💻

Muhammad Muzzammil

💻

souppower

🚇

Masato Urai (@uraway_)

🌍

Fernando

🌍

Megha Sachdev

💻 ⚠️

Anudeep Reddy

🚇

Munieru

🌍

Adam Lusted

💻

Jose Noriega

🌍

Merlin Fuchs

🌍

Ramy Majouji

💻

Viktor Nemes

💻

Eric Bailey

💻

Nazeefa

🌍

Pratik Butani

📝

Bakti Aditya

💻

Caleb Taylor

💻

Rogério Munhoz

💻

Technoknol

💻

Tymoteusz Makowski

💻

Nisar Hassan Naqvi

🐛

Ilyas Karim

🐛

Nick Fix

🤔

Melanie Sumner

🤔

aluc

💻

B. Mearns

🤔

Peng Jie

💻

Binyamin Aron Green

💻

Michal

🌍

Quinn Blenkinsop

💻

Dwiferdio Seagal Putra

💻

Ashley Woodall Clark

💻

Tim Wienk

🌍

Jeremy Shih

🌍

George McCarron

📖

Erwin Rahayu

🌍 📖

Luca

💻

Andrew Hayes

💻

Bereket Semagn

💻

Lorenzo Lancia

🌍

Guy Adler

🌍

Dan Bamikiya

🤔

kewang

🌍

Rizda Dwi Prasetya

🖋

AbreuY

🌍

>_Rizky.dev

🌍 📖

Abidemi Harry

💻

Marco

🌍

Sam Robbins

📖

alceil

💻

hatsu

💻