如何在網頁中插入美觀的程式碼？以「jQuery Syntax Highlighter」為例教學:－線上遊戲排行榜2013/2014,進擊的巨人線上看,candy crush saga外掛,正妹寫真三圍

Blogtrottr

海芋小站

提供實用軟體教學，介紹有趣網站及資訊，豐富電腦人生

Find Unique T-shirts

Explore the most popular t-shirts on Cafepress. Discover great designs celebrating anything you can think of.

From our sponsors

如何在網頁中插入美觀的程式碼？以「jQuery Syntax Highlighter」為例教學

Dec 19th 2013, 17:09, by 張海芋

愈來愈多人在自己的部落格分享程式，但是分享程式時，都希望程式能夠自動上色，讓使用者更好懂。海芋之前教過「使用 SyntaxHighlighter 插入美觀的程式碼」，但那篇文章要匯入的東西太多，反而讓人望之怯步，不過在一翻搜尋後，海芋終於找到另一個插入程式碼的教學，同樣是以「Syntax Highlighter」為基底，但是是用 JQuery 的方式載入，而且有自動偵測語法的功能，我想對於一般人來說是比較友善的。

首先，先在要插入美觀程式碼的網頁中，插入以下的程式碼。

<!-- Include jQuery (Syntax Highlighter Requirement) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Include jQuery Syntax Highlighter -->
<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
<!-- Initialise jQuery Syntax Highlighter -->
<script type="text/javascript">$.SyntaxHighlighter.init();</script>

之後，將要在網站顯示的程式碼，用下列的語法包起來就可以啦！

要顯示的的程式碼…

至於程式碼的上色問題，則是會由 JQuery 的程式去自動偵測程式語言語法，並且依該語法上色，偵測的結果還蠻準的唷！

資料來源：http://balupton.github.io/jquery-syntaxhighlighter/demo/#using

覺得這篇文章實用嗎？請按讚來分享給更多好朋友知道唷！

喜歡本站的文章嗎？歡迎透過以下方式追蹤本站

版權說明

本文章發佈於海芋小站，內容僅歡迎「部份」引用，引用時請註明出處及原文連結，謝謝。
若圖像無法顯示，可能因流量太大，敬請重新整理或透過留言與我回報，也歡迎「訂閱」本站文章喔，感恩!!

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions