Hiển thị code trên bloger (2)

Bài viết "Hiển thị code trên bloger (1)" gới thiệu một số kiểu trang trí khung hiển thị đoạn code trên blog nhìn chung có thể nói là đơn giản.

Mình xin gới thiệu một số các thực hiện trang trí khung hiển thị code có thể nói là hơi "dài" và có chút phứt tạp nhưng có thể nói là nó "đẹp" được mình sưu tầm của nhiều bài viết khác nhau.Ví dụ như bài viết trên blog huynh-nhat-ha.blogspot.com, vnblognet.com và một số bài viết khác.

Dạng 3. Tạo nét riêng cho từng đoạn code.Bài viết giới thiệu kiểu trình bày code trong bài viết Blogger với nét riêng biệt cho từng code CSS, Javascript và HTML.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.Đặt đoạn code dưới đây vào trước dòng ]]></b:skin> .

pre {padding-top:20px;} pre code { overflow:auto; background: transparent url(http://img560.imageshack.us/img560/9986/fondocoments2.png) repeat; border: 1px solid rgb(204, 204, 204); color:#7f7f7f; font-size:12px; display:block; max-height:350px; min-height:45px;width:580px; padding:5px; white-space:pre; text-align:left;} code:hover {background-color:#ffffff;} pre.css {background:#FFFFFF url(http://img59.imageshack.us/img59/7421/cssya.png) no-repeat scroll left top;} pre.js {background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RGTqRcuoJJZhX8U4_kZY3zfBO9zunXOBFqGSmXHkK21B5X4XfZ_fpk56yVifQfMp2rQoNVDHKVcLRjmOIiH1IJvMs4LUcsESvMFVx8d0YA80PKhy25UvecMbakF3gl7bfHB1AlrGsxF8/s1600/js.png) no-repeat scroll left top;} pre.html {background:#FFFFFF url(http://img189.imageshack.us/img189/667/htmlh.png) no-repeat scroll left top;}

Chú ý: Trong đoạn code trên, max-height gán chiều cao tối đa cho khung trình bày code, nếu vượt qua mức này thì sẽ tự động hiển thị thanh cuộn scrollbar. Bạn có thể thay đổi chiều rộng khung ở dòng width:580px. Lưu Template.

Bước 2. Mỗi khi viết bài, ở chế độ Edit HTML, khi bạn muốn trình bày code thì định dạng cấu trúc HTML như sau:

Đoạn code css:

Code:

<pre class="css"><code> … Đặt code CSS tại đây nếu cosde CSS … </code></pre>
Đoạn code Javacript:

Code:

<pre class="js"><code> … Đặt code Javascript đã được mã hóa tại đây … </code></pre>
Đoạn code HTML:

Code:
<pre class="html"><code> … Đặt code HTML đã được mã hóa tại đây nếu là code HTML … </code></pre>

Dạng 4.

Làm đẹp code trong bài viết bằng SyntaxHighlighter công cụ này giúp làm đẹp code hơn song điểm yếu của nó là phải sử dụng nhiều file javascript nên tốc độ load trang hơi nặng một chút. Các blogspot chứa nhiều file javascript nặng rồi thì không nên sử dụng công cụ này.

Xem Demo.
Bước 1.Cho toàn bộ đoạn code dưới đây vào trước thẻ ]]></b:skin> trong Template.

<!-- Lam dep code SyntaxHighlighter --> .dp-highlighter{ font-family: "Consolas", "Monaco", "Courier New", Courier, monospace; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding-top: 1px; } .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span{ margin: 0; padding: 0; border: none; } .dp-highlighter a,.dp-highlighter a:hover{ background: none; border: none; padding: 0; margin: 0; } .dp-highlighter .bar padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar{ padding-left: 0px; } .dp-highlighter ol{ list-style: decimal; background-color: #fff; margin: 0px 0px 1px 45px !important; padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{ list-style: none !important; margin-left: 0px !important; } .dp-highlighter ol li,.dp-highlighter .columns div{ list-style: decimal-leading-zero; list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; } .dp-highlighter.nogutter ol li,.dp-highlighter.nogutter .columns div{ border: 0; } .dp-highlighter .columns{ background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; } .dp-highlighter .columns div{ padding-bottom: 5px; } .dp-highlighter ol li.alt{ background-color: #FFF; color: inherit; } .dp-highlighter ol li span{ color: black; background-color: inherit; } .dp-highlighter.collapsed ol{ margin: 0px; } .dp-highlighter.collapsed ol li{ display: none; } .dp-highlighter.printing{ border: none; } .dp-highlighter.printing .tools{ display: none !important; } .dp-highlighter.printing li{ display: list-item !important; } .dp-highlighter .tools{ padding: 3px 8px 3px 10px; font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools{ border-left: 0; } .dp-highlighter.collapsed .tools{ border-bottom: 0; } .dp-highlighter .tools a{ font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover{ color: red; background-color: inherit; text-decoration: underline; } .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; } <!-- Lam dep code SyntaxHighlighter -->

Bước 2.Cho toàn bộ đoạn code dưới đây vào trước thẻ </body> trong Template
<!-- Lam dep code --> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.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://huguogang.googlepages.com/clipboard.swf"; dp.SyntaxHighlighter.HighlightAll("code"); //]]> </script> <!-- Lam dep code -->

Khi bạn muốn đưa một đoạn code vào bài viết thì trước tiên mã hóa chúng sau đó đặt như sau khi viết bài ở chế độ Chỉnh sửa HTML.

<pre name="code" class="js"> Đặt code đã giải mã ở đây… </pre>

Hoặc:

<textarea name="code" class="js"> Đặt code đã giải mã ở đây… </textarea>

Thay thế js bằng các định dạng ngôn ngữ tương ứng như: cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt.

Theo huynh-nhat-ha.blogspot.com