เข้าชม :
750
|
|
SyntaxHighlighter|
ใครพึ่งค้นมาเจอบทความนี้ ขอให้ไปอ่านบทความก่อนหน้านี้ด้วยนะครับ
ตอนที่ 1 http://www.narongrit.net/knowledge-use-CKEditor-to-replace-FCKeditor-chaptor-1.html ตอนที่ 2 http://www.narongrit.net/knowledge-use-CKEditor-to-replace-FCKeditor-chaptor-2.html ก่อนอื่นให้ทำการ download ตัว plugin ไปก่อน ดาวน์โหลดที่ท้ายบทความนี้ ไฟล์แนบที่ 1 นะครับ จริงๆ ในไฟล์ที่ดาวน์โหลดไปจะมีวิธีการติดตั้งอยู่แล้วชื่อไฟล์ readme.txt ดังนี้ ***************** 1. Upload syntaxhighlight folder to ckeditor/plugins/
2. Configured in the ckeditor/config.js :
Add to config.toolbar a value 'syntaxhighlight'
e.g.
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic', 'syntaxhighlight' ]
];
3. Again Configured in the ckeditor/config.js ,
Expand the extra plugin 'syntaxhighlight' such as:
config.extraPlugins='myplugin1,myplugin2,syntaxhighlight';
4. Modify the default language in syntaxhighlight/plugin.js
Just the line:
lang : ['en'],
5. In your page files between
,add these content like these:
OK, That's it!
....ในไฟล์ index.php ที่ path หลักเว็บเลย เพราะจะได้ไม่ต้องมาไล่ใส่ทุกหน้าที่ต้องการใช้*********************** แต่เอาเป็นว่าผมมาขยายความอีกหน่อยละกันครับ ให้ทำตามขั้นตอนดังนี้ 1. แตกไฟล์ที่ได้ จะได้โฟลเดอร์ชื่อ syntaxhighlight ให้เอาใส่ไว้ในโฟลเดอร์ ckeditor/plugin/ นะครับ 2. จากบทความตอนที่แล้ว ตอนที่ 2 ให้ทำการเพิ่มโค้ด นี้เข้าไปตรงส่วนแสดง toolbar ของ ckeditor นั่นก็คือไฟล์ ckeditor/config.js เช่น
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic', 'syntaxhighlight' ]
];
ตรงส่วนที่เพิ่มเข้าไปคือคำว่า 'syntaxhighlight' นั่นเอง ซึ่งจะทำให้ตรง toolbar ของ ckeditor แสดงรูปไอคอนของ syntaxhighlihgt ดังรูปตัวอย่างนี้  3. ทำการเพิ่มโค้ดบอกว่าเราจะใช้ plugin เสริม โดยใส่โค้ดนี้เข้าไปในไฟล์ ckeditor/config.js config.extraPlugins='syntaxhighlight';4. ในส่วนของภาษาสามารถเซ็ตเพิ่มเติมได้ แต่ผมไม่ขอพูดถึงนะครับ 5. ในหน้าที่จะให้แสดง plugin ตัวนี้ ให้ใส่โค้ดข้างล่างนี้เข้าไป อย่างในเว็บผม ผมใส่ไว้ในส่วน จากนี้ก็สามารถใช้งานได้แล้วครับ ยังไงลองไปต่อยอดกันดูอีกที ได้ผลยังไงเอามาอวด มาให้ชมกันบ้างเด้อ เขียนและเรียบเรียงโดย webmaster www.narongrit.net |
|
[ ความเห็นที่ 1]
RE : SyntaxHighlighter โพสต์เมื่อ: วันพฤหัสบดี 3 พฤษภาคม 2555 01:18 น. บางคนอาจไม่ชอบขนาดตัวอักษรที่ทาง SyntaxHighlighter กำหนดมาให้ ซึ่งตรงนี้เราสามารถเข้าไปแก้ไขได้ที่ไฟล์ css ของ SyntaxHighlighter ดังนี้
เปิดไฟล์ shCore.css ที่อยู่ในโฟลเดอร์ styles ของ SyntaxHighlighter
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
text-align: left !important;
float: none !important;
vertical-align: baseline !important;
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
width: auto !important;
line-height: 1.1em !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important; /* For IE8, FF & WebKit */
min-height: auto !important; /* For IE7 */
}
แก้ font-size ตรงบรรทัดที่ 28 นั่นเอง โดยที่จะใช้หน่วย em หรือ px ก็ได้
ซึ่งหน่วย em จะเป็นหน่วยวัดค่าแบบ Relative ที่ใช้กำหนดขนาด font-size แบบสัมพันธ์กัน โดยที่ 1em จะหมายถึงขนาดปกติ , 0.5em หมายถึงลดขนาดลงครึ่งหนึ่งจากปกติ หรือ 2em หมายถึง สองเท่าของขนาดปกติ
*** หากเราใช้ font-size ในหน่วย px แล้ว จะทำให้ IE ไม่สามารถเปลี่ยนขนาด Font จากการเลือก Text Size ของ IE ได้ ***
อ้างอิง
|
|
