" ผมเริ่มต้นการเขียน blog บทความนี้ก็เป็นบมความแรกๆของการเขียน blog ขึ้นมาเลยครับ อืมรู้สึกว่าเขียนไม่ค่อยจะเป็น ใช้คำไม่ค่อยจะถูกยังงัยไม่รู้อะ (copy เนี้อหาของคนอื่นซะจนเคนตัวครับ 555 เนี่ยละครับเด็กไทย เลยคิดไม่ค่อยเป็น) จะพยายามเขียนให้ได้วันละเรื่องให้ได้ครับ ขอบคุณทุกคนที่เข้ามาเยียมชมใน blog ของผมนะครับ "ผมเคยเห็นโค้ดที่แสดง โค้ดของโปรแกรม รู้สึกว่ามันมีประโยชน์เวลาที่เราจะเอาcode ที่มีแสดงไว้ในบล็อกของผมเอง เผื่อว่าวันใดที่เราต้องการเอาCode มาใช้ภายหลังครับ วันนี้ผมลองเข้าไปใน blogger ทางด้าน IT มีการแสดง sourcecode ที่blog เลยสนใจที่จะลองใช้งานดูเผื่อว่าให้blogger นี้สามารถแสดง code ได้ โดยใช้ plugin SyntaxHighlighter โดยเจ้าตัว SyntaxHighlighter มีประโยชน์มากในการแสดงผลของcode programing ที่ต้องการจะแสดงไว้บน webserver หรือ ถ้ามีใช้งานเว็บ blogger ไว้ก็สามารถใช้งานได้โดยตรง
สามารถ Download Systaxhighlighter ได้จากที่เว็บไซต์
Site:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
Configuration Steps:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
Brush Aliases:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
Configuration Steps:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
Brush Aliases:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
แต่รู้สึกว่าถ้าเราโหลด v.ใหม่มาใช้อะครับ เวลาจะcopy code ที่โชว์อยู่มันจะไม่ขึ้นให้copy โหลดไปอะครับ แล้วแต่เว็บที่เคยเห็นมันมีให้ก็อบได้อะดิทำงัยดีวะ ก็เสียใช้เวลาคนหาวิธีการทำมาจนได้
ขั้นตอนการใช้งานมีขั้นตอนดังนี้
- Login เข้าไปในเว็บblogerของเราเองแล้ว
- ไปที่ Blogger Dashboard --> Design --> Edit HTML เพื่อทำการแก้ไขหน้า template ของblog ให้สามารถแสดง SyntaxHighlighter ได้ทุกเพจ
- แก้ไข Template ในส่วนที่อยู่ใน tag <head>...</head> เพื่อประกาศไว้ใช้ทุกเพจของเว็บโดยเพิ่ม code เข้าไป
- เมื่อต้องการแสดง code โดยใช้ SyntaxHighlighter ให้ขึ้นตั้นด้วยคำสั่ง <pre> แล้วตามด้วยcode ที่ต้องการแสดง แล้วปิดด้วย </pre> ในtag pre ระบุ ภาษาของ code ที่ต้องการแสดงไว้ด้วย <pre class="brush: c#">เพื่อให้ SyntaxHighlighter แสดงผลได้ถูกต้อง
<pre class="brush: BRUSH-NAME"> Paste Your Code Here </pre>
Ex. C#
using System;
public class HelloWorld
{
public static void Main(string[] args) {
Console.Write("Hello World!");
}
}
- code ที่อยุ่ใน tag <pre></pre>จะต้อง Encoded string เพื่อแก้ปัญหาcode ที่แสดงเป็นภาษาต่างดาว
สามารถแปลงเป็นencode ได้จากเว็บไซต์ http://www.string-functions.com/htmlencode.aspx
SyntaxHighlighter รองรับภาษา
| Language | Aliases |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
No comments:
Post a Comment