Skip to content

Mediawiki with Google Syntax Highlighter

Google Syntax Highlighter เป็น javascript ที่ใช้เพื่อทำการเปลี่ยนข้อความที่เป็น source code ของภาษาต่างๆ ให้อยู่ในรูปแบบที่เข้าใจง่าย เนื่องจากเป็น javascript จึงสามารถนำไปใช้ได้ทุกเวปที่เป็น html โดยไม่จำเป็นว่าจะต้องเป็น wordpress เพียงอย่างเดียว ไม่ว่าจะเป็น mediawiki เป็นต้น

จาก WikiBall

Google Syntax Highlighter เป็น javascript ที่ใช้เพื่อทำการเปลี่ยนข้อความที่เป็น source code ของภาษาต่างๆ ให้อยู่ในรูปแบบที่เข้าใจง่าย ซึ่งมืการใช้งานได้ดังนี้


การติดตั้ง

  • download Google Syntax Highlighter
  • ระเบิดของมาไว้ที่ directory ตามชอบ แต่ต้องสามารถเรียกผ่าน http ได้ด้วย
  • จากนั้นใส่ code ดังต่อไปนี้ใน <head> ซึ่งในที่นี้จะใช็ธีม monoBook ดังนั้นจึงต้องไปแก้ใน skins/MonoBook.php 
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shCore.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushJScript.js"></script>

<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="http://yourweb.com/your-path/google-syntax-highlighter/Scripts/shBrushCpp.js"></script>

และในส่วน footer ดังนี้ 

<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://www.memoball.info/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

เพิ่ม css link จะได้สวยงาม 

<link href="http://www.memoball.info/wp-content/plugins/google-syntax-highlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
  • อย่าลืม Enable some attribute ใน media wiki เพิ่มใน ‘name’ attribute ใน pre ถ้าไม่ได้ทำ จะไม่สามารถกำหนด name ได้


วิธีการใช้งาน

http://code.google.com/p/syntaxhighlighter/wiki/Usage

รับข้อมูลจาก (Reference) :

จาก WikiBall : http://wiki.memoball.info/index.php/การติดตั้ง_Google_Syntax_Highlighter_ใน_wikimedia

<!

Enable some attribute ใน media wiki

จาก WikiBall

เนื่องจาก mediawiki จะทำการแปลงข้อความอัตโนมัติ ในขณะที่ผู้ใช้ทำการส่งข้อความที่เขียนใหม่ขึ้นไปบนเซอร์เวอร์ ดังนั้นข้อความที่ได้จึงแตกต่างกับเวลา ผู้ใช้ทำงานอยู่ในหน้าเขียนข้อความ และปัญหาที่เกิดขึ้นตามมาก็คือ เรื่องของ attribute พิเศษ ของ HTML บางตัวซึ่งมีผลต่อ javascript เช่น name จะไม่แสดงขึ้นมา ทำให้การแสดงผลไม่เป็นไปตามที่เราต้องการ ซึ่งมีวิธีแก้ไขได้คือการ เพิ่ม white list attribute ให้กับ html-tag นั้น โดยเข้าไปแก้ไขที่แฟ้ม includes/Sanitizer.php ใน function setupAttributeWhitlist() แล้วจึงไปแก้ไขใน tag ที่ต้องการ

รับข้อมูลจาก (Reference) :

จาก WikiBall : http://wiki.memoball.info/index.php/Enable_some_attribute_ใน_media_wiki

Posted in Uncategorized.

By memoball
July 9, 2009

No comments

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.