วันจันทร์ที่ 9 มีนาคม พ.ศ. 2558

การทำ code syntax hight light บน Blog หรือเว็บ

เมื่อคืนนั่งลองหา css ที่ทำเกี่ยวกับ code syntax hight light บน blog เห็นมีอยู่หลายตัวแต่ลองแล้วชอบใจก็มี Prettyfy ที่อยู่ใน https://code.google.com/p/google-code-prettify/wiki/GettingStarted วิธีการใช้งานก็ง่ายๆ


<html>
<head>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>;
</head>
<body>
.
.
<pre class="prettyprint">
.
.
</pre>
.
.
</body>
</html>

ทั้งยังสามารถเปลียน skin ได้หลายแบบตามนี้

Default
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">

 Desert
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert">


Sunburst
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst">

Sons-Of-Obsidian
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=suns-ofobsidian">

Doxy
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=doxy">


การกำหนดสีของ syntax
 เราสามารถเปลี่ยนสี hight light ตามภาษาที่เขียนได้เปลี่ยนได้หลายภาษาโดยใน class "prettyprint" ของ tag pre ให้เพิ่ม lang-xxx ภาษาเข้าไป โดยlist ของภาษาที่สนับสนุนตามนี้เลย 
<pre class="prettyprint lang-css">
.
.
</pre>

การใส่เลขบรรทัด
<pre class="prettyprint linenums">
.
.
</pre>

เขียนโดย ที่
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)