Setup
Menambah Prettify Syntax Highlighter kepada mana-mana CMS atau laman web adalah sangat mudah. Untuk Blogger anda hanya perlu pergi ke tab Template blog anda, klik butang "Edit HTML" dan menambah skrip di bawah sebelum
</body> tag.<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
Seperti yang anda lihat bahawa projek ini dihoskan di Google Code. Ini adalah auto-loader yang secara automatik akan memuatkan JavaScript API yang diperlukan dan fail CSS dari subfolder SVN. Jadi perkara terakhir yang anda ditinggalkan adalah lagi di mana ia perlu menyerlahkan kod dengan menambah
class="prettyprint" kepada pre dan / atau codetag dalam Blogger Post Editor, paparan HTML. Berikut adalah contoh:$(function() {
alert('I am using Prettify as Syntax Highlighter');
});
Terdapat juga beberapa tema yang ada yang boleh anda panggil dan memuatkan CSS dalam satu URL, di sini adalah satu contoh:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
Hosting sendiri
Nah, tutorial di atas adalah persediaan belum berkuatkuasa yang mudah tetapi bagaimana jika anda mahu hosting Prettify pada pelayan anda sendiri? Blogger tidak membenarkan kita untuk hosting fail secara langsung, jadi jika anda telah mendapat perkhidmatan hosting maka ia baik, jika tidak, anda boleh menggunakan Google Code untuk memuat naik fail Syntax Highlighter.
Muat turun borang fail pada halaman ini , ekstrak menggunakan perisian arkib seperti WinRAR atau 7-Zip dan memuat naik "prettify.css" dan "prettify.js" fail dengan mewujudkan projek . Kini sama seperti di atas menambah fail CSS sebelum dan skrip sebelum tag masing-masing. Untuk melaksanakannya anda perlu menambah prettyPrint(); sebelum menutup tag badan seperti yang ditunjukkan di bawah:
<html>
<head>
{All head contents}
<b:skin><![CDATA[
{Inline CSS}
]]></b:skin>
<link href="https://example.googlecode.com/.../svn/prettify.css" type="text/css" rel="stylesheet" />
{Other JavaScript}
</head>
<body>
{Header, Footer, DIVs}
<script src="https://example.googlecode.com/.../svn/prettify.js"/>
<script>prettyPrintundefined);</script>
</body>
</html><script src="https://example.googlecode.com/.../svn/prettify.js"></script> <script>prettyPrintundefined);</script> </body> </html>
Ia tidak diwajibkan untuk menambah fail CSS luaran tetapi sebaliknya anda boleh menambah inline CSS sebelum ]]>
Cari lebih lanjut mengenai ia pada:
- Getting Started - Official
- FAQ - Official
- Syntax Highlighting to any project - Nettuts
Sumber ~ http://www.simplebloggertutorials.com/
Catat Ulasan Blogger Disqus