Thêm 1 số mẫu trình bày code đẹp cho blog.

Trước đây thủ thuật blogger đã đưa ra một số mẫu trình bày code khá đẹp và hôm nay mình cũng muốn đóng góp thêm 1 số mẫu trình bày code khác khá bắt mắt.

Xem Demo

Bắt đầu vào vấn đề chính đây.

Chèn đoạn code bạn chọn vào trước thẻ ]]></b:skin>
Mẫu 1

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #a52676;
border:none;
background:#de45a6;
background: -moz-linear-gradient(top, #e54aac, #f374c5 95%, #d3469f);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e54aac), color-stop(.9, #f374c5), to(#d3469f));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5')"; /* IE8 only */
box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-webkit-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-moz-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
}

Mẫu 2

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
background: #E6E6E6;
background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d0d0d0;
border-bottom:1px solid #b5b5b5;
color:#5e5e5e;
text-shadow: 1px 1px 1px #FFF}

Mẫu 3

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color:#FFF;
text-shadow: 0 1px 1px #0f739d;
background: #40addb;
background: -moz-linear-gradient(top, #d1edfa, #73cef5 5%, #49acd6);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1edfa), color-stop(0.03, #73cef5), to(#49acd6));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6')"; /* IE8 only */
border-bottom:1px solid #2581a8;}

Mẫu 4

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #0d3474;
border:none;
background: #3675da;
background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}

Save Template lại.
Sau này mỗi lần trình bài code thì bạn đặt đoạn code vào như dạng sau:

<div class="code">
Nội dung đoạn code
</div>

More about →

Tạo nét riêng khi trình bày code CSS, Javascript và HTML

Nếu blogspot của bạn giới thiệu về thủ thuật blog hay thiết kế web thì sẽ thường xuyên trình bày code trong bài viết.. Những code có cường độ trình bày nhiều nhất là CSS, Javascript và HTML. Tạo nét riêng khi trình bày những code này là một cách tạo sự khác biệt cho blog của bạn.

Bài viết này 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ạn hãy thực hiện theo các bước sau đây.

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/AVvXsEgFyLFfJBxilHbFoBq2dLnNaOMCiTYSQcoRG7Q592FCNWmT56dRWFuta_3VQtDZ7QNNCL2nBwtXMfuulMHmBSp2aEQ9e8rbNxx8WxYgK2-vWv6gzaM0EJA2VD3BYZxpHFkAvtyGQsXSVJb6/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:

<pre class="css"><code>
… Đặt code CSS tại đây …
</code></pre>

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

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

More about →

Làm đẹp code trong bài viết bằng SyntaxHighlighter

Nếu bạn muốn đặt một số đoạn mã HTML, JavaScript hay các ngôn ngữ lập trình khác trong bài viết Blogger theo một cách có thể làm nổi bật code và hiển thị số thứ tự dòng code thì bạn có thể sử dụng công cụ SyntaxHighlighter do Alex Gorbatchev phát triển.

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. Khuyến cáo 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.

Để cài đặt công cụ này cho blogspot của bạn, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào trước thẻ </body> trong Template.

<!-- Syntax Highlighter -->
<link href='http://huguogang.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
<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>

Nếu blog của bạn chuyên giới thiệu về các ngôn ngữ lập trình thì có thể lựa chọn trong danh sách dưới đây để thêm vào đoạn code ở trên.

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>

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 (bằng công cụ mã hóa) 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.

More about →

Hiển thị đoạn mã trong bài đăng Blogger

Đối với các bạn sử dụng Blogger đặc biệt trong trường hợp muốn giới thiệu các đoạn mã (code) để cùng chia sẻ với cộng đồng Blogger, việc hiển thị các đoạn mã là điều khó khăn, đôi khi không thể đối với người mới dùng (newbie) Blogger.
Trường hợp muốn hiển thị mã HTML trong các bài đăng thì phải sử dụng các ký tự XHTML để thay thế:

"	"
&	&
<	&lt;
>	&gt;

Trường hợp bạn muốn trình bày các đoạn mã phức tạp trong các bài đăng, bạn nên theo các bước sau đây:
Bước 1: Đăng nhập vào tài khoản Blogger đến phần Bố cục (Layout) trong Bảng điều khiến. Sau đó đến phần Chỉnh sửa HTML (Edit HTML).
Bước 2: Thêm đoạn mã CSS bên dưới trên phần ]]></b:skin> (ấn tổ hợp phím Ctrl + F để tìm cho nhanh).

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Bạn có thể tùy chỉnh các thông số trong đoạn mã trên theo ý thích của mình.
Bước 3: Mỗi khi bạn tạo bài đăng mới có trình bày các đoạn mã (CSS, Scripts, HTML, …) thì chỉ cần đặt đoạn mã đó trong phần div như sau:

<div class="codeview">
Chèn đoạn mã bạn muốn hiển thị
</div>

More about →

Trang trí khung hiển thị code trên Blogger

Đôi khi bạn cũng muốn trang trí khung hiển thị các đoạn mã (code) cho đẹp mắt. Để thực hiện điều này, bạn cần phải tạo một class riêng cho đoạn mã, có thể đặt tên là "codeview" và đặt đoạn mã vào trong thẻ div, theo như bên dưới:

<div class="codeview">
{dán code đơn giản hoặc code đã mã hóa vào đây}
</div>

Phần trên sẽ được đặt vào trong bài viết tại vị trí muốn hiển thị code.
Để đăng được bài viết có hiển thị code thì phải tiến hành chèn một đoạn mã vào phần CSS của Template.

Vào Thiết kế (Design) - Chỉnh sửa HTML (Edit HTML) rồi chèn code của các kiểu bên dưới lên trên dòng code ]]></b:skin> trong Template.

Dưới đây là các kiểu định dạng CSS cho codeview.
1. Kiểu 1:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

2. Kiểu 2:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}

3. Kiểu 3:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Chú ý: Nên tải các file hình ảnh qua đường link đánh dấu màu xanh về và upload lên webhost của riêng bạn để tránh hạn chế băng thông.

Tham khảo theo Fandung.com

More about →