<-- IE錯誤修正 --> Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2018-01-09
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目

Click the image to open in full size.

如果要在網路上分享程式碼(Source Code),通常你會怎麼做呢?若是自己的網站、部落格那還好解決,通常只要將程式碼貼上,搭配高亮效果(Highlight)就能將代碼上色,加入行數等等,看起來更專業也更好閱讀;假如要分享到社群網站,或者你使用的網誌平台不支援貼上程式碼,就必須借助第三方服務幫忙,我在「5 個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」介紹過類似服務,其中較常使用的是 GitHub Gist。



一小段程式碼要好看、好讀又能吸引注目(好吧,我是說對於看得懂代碼或從事相關工作的朋友),做成圖片或許是不錯的方法,本文要推薦的「Carbon」是一款能將程式碼轉為美麗圖片的免費線上工具,只要將原始碼貼上或直接把檔案拖曳到網站中,就能選擇不同的配色,為程式碼加上外框、陰影,轉為更有質感的圖片。

Click the image to open in full size.

Carbon 內建許多配色,就如同你所熟悉的程式碼編輯器,可以切換更多不一樣的色彩,除此之外還能調整外框、背景顏色、字型、寬度或陰影等細部項目,如果你想要將程式碼製作成看起來非常專業又好看的圖片,記得來試試這個工具,你一定也會喜歡。

網站名稱:Carbon
網站鏈結:https://carbon.now.sh/

使用教學

STEP 1

開啟 Carbon 後,直接將程式碼複製、貼上,取代現有的範例代碼,依照 Carbon 說明,也可直接將原始碼檔案拖曳至網站中。從左上角的第一個選項來選取不同的上色方式。

Click the image to open in full size.

第二個選項是選擇程式語言類型,你可以嘗試不同的類別,上色效果也不同。

Click the image to open in full size.

STEP 2

接著選擇背景顏色,預設情況下會是淺灰色,但也能依照使用者需求來調整色彩,如果你想要透明背景,只要拖曳色彩列下方的橫軸就能更動不透明度。

Click the image to open in full size.

STEP 3

Carbon 大部分外觀選項都在「設定」齒輪圖示中,包括修改視窗外觀、字型、字體大小、顯示行數及間距、陰影等等,選擇後預覽圖會自動更新。

Click the image to open in full size.

STEP 4

最後,點擊右上角「Save Image」就能將預覽畫面轉為圖片輸出。

Click the image to open in full size.

下圖是我從 The Go Programming Language 提供的 Go 範例程式碼再以 Carbon 製作而成,不過因為文章圖片部分有縮小,看起來效果不如原圖那麼理想,直接從 Carbon 匯出的圖片解析度相當不錯,有興趣的朋友可以自己去試試看。

Click the image to open in full size.

看到 Carbon 想到之前介紹的「Avogadr.io 免費化學結構式桌布產生器,可自訂背景顏色」,無論是化學結構式或程式碼其實都可以變得很漂亮,當然這些也是比較少見的免費資源,或許對於某些朋友來說會很有用。

值得一試的三個理由:
  1. 線上將程式碼轉為高品質圖片,加上視窗外框及高亮效果
  2. 可切換各種上色模式、程式語言類型
  3. 亦能修改字型、文字大小、背景顏色等外觀選項
喜歡 Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆

主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 09:56 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2