ตัวอย่างโค้ด : การใช้งาน Syntaxhighlighter

updated: 601008 / 620707 / 671012

เว็บเพจหน้านี้
- มีขนาดของกล่อง syntaxhighlighter ที่ไม่เปลี่ยนตามขนาดของอุปกรณ์ ทั้ง 6 ตัวอย่าง เพราะในแฟ้ม .html นี้ได้กำหนด class syntaxhighlighter ไว้ที่ 400px ถ้าเปลี่ยนในแต่ละ pre สามารถทำได้ โดยใช้ class syntaxhighlighter และกำหนด style แบบ inline
- การกำหนดขนาดแบบ responsive ที่เป็น dynamic ใน rsp62.css จึงไม่มีผล ดูตัวอย่างการประกาศ m_still ในตัวอย่างที่ 6 ที่ถูกแทนด้วย 400px เสมอ มีแนวคิดที่สนับสนุนข้อดีของ static ว่า แต่ละกล่อง ในแต่ละส่วน อาจมีขนาดแตกต่างกันไป ตามการออกแบบที่เป็นการเฉพาะ จึงไม่กำหนดให้เปลี่ยนแปลงไปตามอุปกรณ์แบบ responsive แต่จะ config ให้กับแต่ละกล่อง source code แบบ static
#ตัวอย่าง style กล่องนี้ คือ "background-color:#ffffdd;border:10px solid black;padding:20px;

1. Fix at 400px; by style config

<style>
.syntaxhighlighter { width: 400px !important; border: 1px solid #808080 !important; }
.w450 { width: 450px !important; }
</style>

2. Fix at 425px; by inline on div
ต้องเรียก class มาใน div ด้วย เพื่อ inherit มิเช่นนั้นจะเป็นตาม style config ในข้อ 1

<div class="syntaxhighlighter" style="width:425px !important;">
<pre class="brush: js" >
.syntaxhighlighter { width: 400px !important; border: 1px solid #808080 !important; }
.w450 { width: 450px !important; }
</pre>
</div>

3. no effect by class="w450"
การเรียก class="w450" ไม่มีผล เพราะมีการประกาศ syntaxhighligher แทน ในแฟ้มนี้ไปแล้ว
หากใช้ class อื่น และทำงานแบบ responsive ต้องประกาศใน rsp62.css มีตัวอย่างใน /web2

<div class="w450">
<pre class="brush: js" >
.syntaxhighlighter { width: 400px !important; }
.w450 { width: 450px !important; }
</pre>
</div>

4. how to use hightlight and use 100% (728px;)

<div class="syntaxhighlighter" style="width: 100% !important;">
<pre class="brush: js;highlight: [1, 5, 9, 13]">
function one() 
{
	return "this is output from one";
}
function two()
{
	return "this is output from two";
}
function three()
{
	return "this is output from three";
}
function four()
{
	return "this is output from four";
}
</pre>
</div>

5. sample of class and id width 100% style

#header {background:yellow;font-size:20px;} 
.title-text {color:red;} 
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px} 
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}

body 1

<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>

6. test m_still body 2
ใช้ class=m_still แต่ไม่มีผล เพราะกำหนด class syntaxhighlighter ในแฟ้มนี้
ถ้าประกาศในแฟ้มนี้ การประกาศใน rsp62.css จะไม่มีผล ดูตัวอย่างที่ใช้งานจริงใน /web2

<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>