බ්ලොග් එකට Syntax Highlighter එකක් දාගමු

Tweet

අදත් මම කියල දෙන්න යන්නෙ බ්ලොග් එකට පොඩි ගැජට් එකක් දාගන්න හැටි. ගැජට් එකේ නම තමයි SyntaxHighlighter. හැබැයි මේ ගැජට් එකනම් ගොඩක් ප්‍රයෝජනවත් වෙන්නෙ පරිඝණක භාෂා වල එන code කෑලි පලකරන අයට. මේකෙන් වෙන්නෙ ඒ ඒ භාෂාවට අදාල keywords ඉස්මතු කරල පෙන්වන එක. බ්ලොග් එකට Menu Bar එකක් දාගන්න එක ගැන ලියපු සටහනේ තියන code එක බැලුවොත් ඔයාලට තේරෙයි මොකක්ද ගැජට් එක කියල. දැන් බලමු ඒක අපේ බ්ලොග් එකට දාගන්නෙ කොහොමද කියල.

1. මුලින්ම කරන්න තියෙන්නෙ බ්ලොග් එකට log in වෙලා Layout පිටුවට ගිහින් Edit HTML තෝරන එක, එතකොට ඔයාලට පහල තියන රූපෙ වගේ එකක් එයි. මතක ඇතුව ඔයාගෙ template එකේ backup එකක් ගන්න එක ඇඟට ගුණයි, මොකද නැත්නම් තියන ලස්සනත් නැති වෙන්න ඉඩ තියනව.

2. ඊට පස්සෙ ඔයාගෙ template එකේ </head> තියන තැන හොයාගන්න, ඒ වැඩේ කරන්න Ctrl + F ඔබල Find කලාම ලේසියි. දැන් කරන්න තියෙන්නෙ හොයා ගත්තු </head> තියන තැනට උඩින් පහළ තියන code එක paste කරගන්න එක.

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3. Code එකේ 1 සහ 3 වැනි පේළි වල තියන දෙක අනිවාර්යයෙන්ම තියෙන්න ඕන. දෙවෙනි පේළියෙ කරල තියෙන්නෙ style දාන එක. මෙතන්ට ගිහින් බලන්න එක එක ජාතියෙ styles තියනව. කැමති එකක් දාගන්න පුලුවන්, හැබැයි එකයි.

4. Code එකේ 3, 4, 5 සහ 6 වැනි පේළිවලින් කරල තියෙන්නෙ c#, Java, PHP සහ HTML/XML. වලට අදාල JavaScript link කරන එක. ඔක්කොම ඕන නෑ, තමන් ලියන බ්ලොග් එකේ ලියන දේවල් වලට අදාල JavaScript විතරක් එකතු කරගන්න. එකතුකරගන්න පුලුවන් JavaScript මෙතනින් බලාගන්න. ඊට පස්සෙ template එක save කරන්න. දැනට අවුලක් නෑ නේද?

5. අපි දැන් බලමු මේ ගැජට් එක අපි ලියන සටහනක පාවිච්චි කරන්නෙ කොහොමද කියල. ඔයාගෙ සටහනේ කොතනකට හරි code කෑල්ලක් දාගන්න ඕනනම් මේ පහල තියන විදිහට ඒක සටහනට එකතුකරගන්න. මේකෙ brush: html කියල තියන තැනින් තමයි භාෂාව තෝරන්නෙ. මම දැන් html තෝරල තියෙන්නෙ. තෝරන්න පුලුවන් භාෂා මෙතනින් බලාගන්න.

<script type="syntaxhighlighter" class="brush: html; wrap-lines: false;"><![CDATA[
// code එක මෙතනට දාන්න
]]></script>

මෙතනට ගිහින් බලන්න තව එක එක ජාතියෙ වැඩ දාන්න පුලුවන්. එහෙනම් මේ සටහන මෙතනින් ඉවරයි. ඔබට ජය !