Cách định dạng mã nguồn được đăng trên BLOGGER

Cách sử dụng trong bài viết này là sử dụng SyntaxHighlighter , nó là một thư viện nguồn mở viết bằng JavaScript .

Nó thực hiện đặt màu và phông chữ phù hợp với đoạn mã nguồn mà bạn trích dẫn bằng các câu lệnh JavaScript.

Tiếp theo là các bước để cài đặt:

1. Download các file thư viện cho SyntaxHighlighter và đưa lên vào host lưu trữ các file trong thư viện này, bạn có thể upload lên Google Code Page.

2. Đăng nhập vào BLOGGER, vào mục Layout –> Edit HTML. Tiếp theo copy đoạn code sau vào template:

</div></div> <!-- end outer-wrapper -->
<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>

<script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/>

<script class='javascript'>
//<![CDATA[
  function FindTagsByName(container, name, Tag)
  {
      var elements = document.getElementsByTagName(Tag);
      for (var i = 0; i < elements.length; i++)
      {
          if (elements[i].getAttribute("name") == name)
          {
              container.push(elements[i]);
          }
      }
  }
  var elements = [];
  FindTagsByName(elements, "code", "pre");
  FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
 var childNode = elements[i].childNodes[0];
 var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
 elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
 brs = elements[i].getElementsByTagName("br");
 for(var j = 0, brLength = brs.length; j < brLength; j++) {
  var newNode = document.createTextNode("\n");
  elements[i].replaceChild(newNode, brs[0]);
 }
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR HOST]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

</body>
</html>

3. Bây giờ bạn có thể trích dẫn các đoạn code bằng cách thêm thẻ “pre” hoặc “textarea”. Cách sử dụng cụ thể như sau:

... some code here ...

4. Các ngôn ngữ hổ trợ bao gồm:

C++: cpp, c, c++

C#: c#, c-sharp, csharp

CSS: css

Delphi: delphi, pascal

Java: java

Java Script: js, jscript, javascript

PHP: php

Python: pt, python

Ruby: rb, ruby, rails, ror

SQL: sql

VB: vb, vb.net

XML, HTML: xml, html, xhtml, xslt