Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站

最後更新於 2020 年 07 月 07 日

如果想把一小段程式碼分享到社群網站,透過 GitHub Gist 產生鏈結是個不錯的方式,或是參考我之前介紹的「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,若要轉為精美的圖片,我也推薦過 CarbonCodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具,對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制,接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具,讓你可以做出更適合分享的程式碼圖片。

本文要推薦的「Codeimg.io」是一個專注於將程式碼製作為圖片的線上工具,可以對一段程式碼加入高亮顏色標注效果,依照使用者選擇的社群網站位置製作為特定大小的圖片,舉例來說,Facebook 分享圖片大小為 1200×630、封面圖片 820×312、Twitter 推文適用的 506×253,亦可選擇邊框樣式、配色、佈景主題等等,製作出來的圖片相當專業。

不過把程式碼製作成圖片或許適合閱讀,對於要複製特定內容來說就會有些麻煩,但如果只是想讓社群網站上的人方便瀏覽,相較於直接把程式碼貼上來說轉為圖片、加入高亮效果會更有用。Codeimg 不僅適用於社群網站,也能直接指定圖片長寬,選擇建立成 .jpeg、.png 或 .svg 圖片格式。

網站名稱:Codeimg.io
網站鏈結:https://codeimg.io/

使用教學

STEP 1

開啟 Codeimg.io 後選擇要套用的社群網站模版尺寸,選項上會提示你這個尺寸適用於那個區塊,以及對應的圖片大小,Codeimg.io 提供包括 Facebook、Twitter、Instagram 三種最常用的社群平台,或是透過自訂功能自己輸入圖片長寬。

在下方專案名稱的命名後面可預先選擇要使用的圖片格式,Codeimg.io 亦可製作 .svg 向量圖。

STEP 2

接著把 Codeimg 預設程式碼移除,在第一行將你要轉為圖片的代碼貼上。

Codeimg 會自動對程式碼進行上色,讓其他使用者更容易閱讀,預設情況下是 MacOS 視窗效果帶上深色的高亮效果(順帶一提,如果你想把程式碼放到網頁上,hilite.me 可以對程式碼加上高亮效果而且不需要透過 JavaScript 或 CSS)。

STEP 3

左側有幾個選項,點開後會有更多可以設定的功能,例如視窗外框可調整為 macOS 或 Windows 樣式,外框尺寸、對齊位置、圓角和陰影等等,設定後右邊預覽會即時更新。

STEP 4

如果你對於預設的上色效果不滿意,從 Editor 的「Theme」可選擇各種不同的程式碼上色方式,包括淺色和深色背景,以及不同的高亮標注顏色。若 Codeimg 無法正確判斷你的程式碼類型,從「Language」可手動選擇,並能決定是否要顯示程式碼的行數。

STEP 5

最後,點選右上角的「Download」就能將這張程式碼圖片匯出,保存為預先選擇的圖片格式。

值得一試的三個理由:

  1. 將程式碼轉為帶有視窗效果的圖片,加入高亮效果和行數更適合閱讀
  2. 可依照不同的社群網站、位置製作出最適合的圖片大小
  3. 支援 .jpeg、.png 和 .svg 向量圖格式

 

相關的文章

Marked.cc 將文字轉為精緻圖片輸出,分享社群更吸睛

曾經介紹過不少可以將程式碼轉圖片線上工具,像是 Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目,或是 Codeimg、CodeZen 等等,對於要在社群網站分享程式碼來說轉為圖片會很有用,也免於諸多限制。若要把程式碼傳給其他人使用,可考慮「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」讓程式碼更易於閱讀和使用,於是有人想到:除了程式碼以外,有沒有可以把一般文字轉為圖片且效果更好的工具呢?

Image Resizer 線上將圖片裁切調整為社群平台最佳圖片尺寸

雖然大部分的社群網站或廣告平台都有自動裁切圖片、轉為特定大小的功能,但很可能效果不彰,例如縮圖影響圖片解析度,或是在預覽圖顯示不對的位置,這是很微小的問題卻會影響圖片成效。如果希望在圖片部分有更好的呈現,那在上傳前就必須先圖片設定為建議尺寸,或是自行手動裁切,若你平常會需要經營各種社群網站,我想接下來要介紹的服務你一定會用到。

修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

如果有使用 WordPress 架站的話一定對 Gravatar 不陌生,Gravatar 算得上十年來最流行的大頭貼服務,只要在網站上以 Email 註冊一個帳號,上傳頭像與該信箱地址連結,在支援大頭貼功能的部落格留言後就會顯示你的頭像,而最多人使用的 WordPress 平台就支援 Gravatar(畢竟他們也是同一家公司 Automattic 旗下的項目)。即使現在比較多網站直接使用 Facebook 留言框取代內建的留言功能,依然會在作者介紹的欄位使用 Gravatar 大頭貼。

Tuigram 將 Twitter 推文分享到 IG 限時動態或貼文,內建三種配色風格

我從去年就把 Facebook 帳號刪除(可參考另一篇「教學如果你想告別臉書,這裡有永久刪除 Facebook 帳號教學」),實在是因為生活中要看的訊息太多,不得不減少一些資訊來源,當然我覺得臉書動態並不是那麼重要,也必須花不少時間才能過濾真正需要閱讀的內容,後來我陸續關閉幾個沒有使用的社群帳號,只留下工作會用到的功能,偶爾翻翻推特 Twitter 看到有些很有趣的貼文想分享到 IG 限時動態,但很可惜內建並沒有這樣的分享工具,不過有個免費 App 可以幫你解決這樣的需求。

回應