การใส่ Syntax Highligh ให้กับโคด(Code Highligh)

การใส่ Code Highligh คือการใส่ Highligh ให้กับโคดเพื่อที่เราจะสามารถอ่านโคดได้ง่าย ดังตัวอย่าง เช่น

init: function(options) {
// Setting up original options with default options
Object.extend(this._options, this.options);
this.setOptions(options);

//Create the overlay
this.MBoverlay = new Element("div", { id: "MB_overlay", opacity: "0" });

//Create DOm for the window
this.MBwindow = new Element("div", {id: "MB_window", style: "display: none"}).update(
this.MBframe = new Element("div", {id: "MB_frame"}).update(
this.MBheader = new Element("div", {id: "MB_header"}).update(
this.MBcaption = new Element("div", {id: "MB_caption"})
)
)
);
this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("" + this.options.closeValue + "");
this.MBheader.insert({'bottom':this.MBclose});

this.MBcontent = new Element("div", {id: "MB_content"}).update(
this.MBloading = new Element("div", {id: "MB_loading"}).update(this.options.loadingString)
);
this.MBframe.insert({'bottom':this.MBcontent});

// Inserting into DOM. If parameter set and form element have been found will inject into it. Otherwise will inject into body as topmost element.
// Be sure to set padding and marging to null via CSS for both body and (in case of asp.net) form elements.
var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body);
injectToEl.insert({'top':this.MBwindow});
injectToEl.insert({'top':this.MBoverlay});

// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing
this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

//Adding event observers
this.hideObserver = this._hide.bindAsEventListener(this);
this.kbdObserver = this._kbdHandler.bindAsEventListener(this);
this._initObservers();

this.initialized = true; // Mark as initialized
}

ซึ่งลักษณะของโคดดังตัวอย่างเราก็สามารถทำได้ครับ งั้นเรามาเริ่มกันเลยนะครับ ให้ไปที่เว็บนี้เลยครับ

From Programming Hunter

จากนั้นให้เราคลิกตามวงกลมสีแดงเลยครับ เมื่อทำการคลิกแล้วจะปรากฏกล่องข้อความดังรูป

From Programming Hunter

ในขั้นตอนนี้ให้ทำการคลิก OK เมื่อคลิกแล้วตัวเว็บเบราเซอร์จะเปิดหน้าใหม่ดังนี้

From Programming Hunter

ให้ทำการคลิกที่ปุ่มที่ชื่อว่า Add to Blogger จากนั้นเราจะพบหนี้นี้ครับ

From Programming Hunter

ให้คลิกที่ปุ่ม เพิ่มเครื่องมือ ครับ เสร็จแล้วครับ
วิธีการใช้งาน

ให้พิมพ์ลักษณะนี้ครับก่อนที่จะใส่โคด

 //Code here

หากเราต้องการเขียนภาษาอื่นๆก็เปลี่ยนตรง class="" เป็นอย่างอื่นเช่น java, c-charp,php เป็นต้น

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.