PUPASOFT BLOG!

สำหรับส่วนนี้จะเป็นการนำเอา plugins syntax highlight มาใช้งานสำหรับคนที่ต้องการเขียนโปรแกรมให้ source code ของเรามีสีดูแล้วน่าสนใจ โดยการใช้งาน javascript เพื่อทำการ highlight ข้อมูล sourcecode ตามภาษาที่เราต้องการ โดย library ที่ผมได้มีการใช้งานได้เคยเขียนไว้ในบล๊อกเรื่อง การใช้งาน Syntax highlighting ซึ่งได้อธิบายการเขียนไว้ละเอียดพอสมควรรวมถึงยังมีภาษาต่างๆที่ support ให้ดูด้วยสามารถดูได้ด้านล่าง แต่เมื่อได้อ่านบล๊อกของหลายคนยังคงไม่มีการนำไปใช้งานเลยคิดว่าอาจจะนำมาใช้งานไม่เป็นจึงเขียนบล๊อกนี้เพื่อแนะแนวทาง

การใช้งาน code highlight

สำหรับในส่วนของ code highlight จะมีอยู่ 2 ส่วนด้วยกัน
1.ส่วนที่มากับตัว wordpress เองซึ่งจะใช้เพียง css ง่ายๆ ในการทำให้ส่วนข้อความนั้นมองเป็น code วิธีการสามารถทำได้โดยการใช้

<code>source</code>

ผลลัพธ์ตามนี้ครับ
source
2.ส่วนของ plugin ที่ได้มีการติดตั้งเพิ่มเติม
โดยในการใช้งานสามารถดูการใช้งานได้ตามที่ การใช้งาน Syntax highlighting
ตัวอย่างผลลัพธ์สวยๆ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="content">
  <div id="upper_nav" class="nav">
    <div>
      <a href="/">Home</a><span>|</span>
      <a href="/util_nav/demo">Demo</a><span>|</span>
      <a href="/util_nav/contact_us">Contact Us</a><span>|</span>
      <a href="/util_nav/about_us">About Us</a>
    </div>
  </div>  
  <div style="clear: both;"></div>
  <div id="header" class="wrapper">
    <a href="/"><%= image_tag "/themes/blue_steel/images/logo.jpg", :alt=>"logo"%></a>
    <div id="header_text">
      <h1>BrowserCMS 3.0</h1>
      <p>
        The newly redesigned BrowserCMS 3.0 is an easy, affordable<br />
        way to control, edit, and organize website content.
      </p>
    </div>
  </div>
  <div style="clear: both;"></div>
  <div id="mid_nav" class="nav wrapper">
    <%= render_menu :from_top => 0, :depth => 1%> 
  </div>

การเพิ่มในส่วนของหน้า editor

สำหรับการดำเนินการในการใช้งานจะต้องมีการเลือกแก้ไขในส่วนของ HTML เท่านั้นไม่สามารถใช้งานในส่วนของ visual mode ได้ ซึ่งการใช้งานทำได้โดย
1. เลือก tab html
2. เพิ่ม source code
3. ให้ source code นั้นคล่อมด้วยการใช้งานที่เราต้องการเช่น
แบบธรรมดา

<code>source code</code>

แบบที่เป็น plugins

<pre lang="html4strict">
source code

Last 5 posts by nolifelover

• Android icons - January 5th, 2010
• 10 Beautify web forms - January 3rd, 2010
• popup แสดงรูปหรือมัลติมีเดียด้วย clearbox3 - December 12th, 2009
• สร้าง graph ด้วย javascript(TufteGraph) - December 8th, 2009
• แสดงหน้าเว็บด้วย font ที่ต้องการ - December 2nd, 2009