<-- IE錯誤修正 --> hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS - 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-11
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS

Click the image to open in full size.(Copyright: simpson33 / 123RF Stock Photo)前幾天剛介紹過「Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目」,Carbon 是相當有趣的程式碼運用,除了提升擷圖質感、讓原始碼更易於閱讀,最大用途是當你要分享程式碼到社群網站,做成圖片效果會更為理想。圖片的缺點是無法直接複製,還是必須附上純文字內容,但不是每個平台都支援顯示原始碼,而且也可能因為編輯器或安全問題導致程式碼無法完整顯示。



如果想在網站或部落格展示一段程式碼,通常必須借助於 Highlight JavaScript 或 CSS 樣式表才能達到理想效果,不想花太多時間折騰的朋友可以把原始碼丟到 GitHub Gist 之類的第三方服務,若你堅持想把程式碼放到網頁中,本文推薦的服務你一定會滿意。

接下來要介紹的hilite.me」是一款很實用的免費線上工具,可以為程式碼上色,同時轉為一般網站都能正常顯示的 HTML 格式,無論是嵌入部落格文章、電子郵件或任何網站應該都可以被支援。hilite.me 使用方法也很簡單,將原始碼複製、貼上後選擇程式語言類別、要上色的色彩調色盤,按下轉換就能夠線上預覽輸出。

以下是透過 hilite.me 轉換產生的範例:



1 2 3 4 5 6 7 8 910111213141516171819package mainimport "fmt"// fib returns a function that returns// successive Fibonacci numbers.func fib() func() int { a, b := 0, 1 return func() int { a, b = b, a+b return a }}func main() { f := fib() // Function calls are evaluated left-to-right. fmt.Println(f(), f(), f(), f(), f())}


hilite.me 已將邊框、行數(可設定是否顯示)及加入色彩效果的程式碼都轉為 HTML 格式呈現,因此在閱讀上就如同熟悉的程式碼編輯器,更棒的是不用加入任何 JavaScript 或 CSS 樣式表文件,只要把轉換後的 HTML 程式碼直接貼上就能顯示。

網站名稱:hilite.me
網站鏈結:http://hilite.me/

使用教學

STEP 1

開啟 hilite.me 網站後將轉換的程式碼貼到「Source Code」欄位,記得把預設的範例程式碼刪掉,最主要的是我們要獲取轉換後的「HTML」內容,這可用在其他網站或部落格顯示加入色彩效果的程式碼,而下方有個預覽功能,可以看到顯示出來的效果。

Click the image to open in full size.

STEP 2

貼上程式碼後,從「Language」選擇該原始碼的程式語言類型,這會影響到上色,記得手動選擇,因為 hilite.me 不會自動偵測。

Click the image to open in full size.

接著從「Style」來選取配色效果,這裡要注意的是選擇後必須按下「Highlight!」按鈕才會在底下看到預覽。預設情況下是不會顯示行數的,如果需要這功能記得勾選旁邊的「Line Numbers」選項(一樣是以 HTML 寫成的語法)。

Click the image to open in full size.

STEP 3

最後,點選「Highlight!」就會將你貼上的程式碼加入色彩效果,下方預覽區就是顯示出來的樣式,沒問題的話複製「HTML」程式碼,把它帶回自己的網站、部落格就能夠使用啦!但要記得如果你使用所見即所得編輯器,可能得先切換到原始碼模式。

Click the image to open in full size.

下圖是以 hilite.me 加入行數顯示的範例效果,如果試著以滑鼠選取程式碼,不會複製到旁邊的行數,是非常棒的設計!對於要在網站內展示程式碼來說 hilite.me 確實是個很好的選擇,而且還不用額外載入 JavaScript 或 CSS,各個平台應該都能正常顯示。

Click the image to open in full size.

值得一試的三個理由:
  1. 將原始碼轉為 HTML 格式,可用於網站或部落格
  2. 加上各種配色效果,也能修改細部 CSS 樣式
  3. 可加入行數顯示
喜歡 hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS 嗎?歡迎將免費資源網路社群加入書籤,以 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 開啟



所有時間均為 +9。現在的時間是 04:39 PM
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