"Tạo khung chứa code với số đầu dòng cho Blogspot"

(Traidatmui.com) - Nếu bạn là một blog chuyên về thủ thuật thì việc hiển thị code trong bài viết là điều rất cần thiết và làm sao để có một khung chứa code thật đẹp và thật chuyên nghiệp? Hôm nay chúng ta sẽ cùng tạo khung chứa code có đánh số thứ tự dòng cho Blogspot, ở đây mình nói chứa code thì không hẳn nó chỉ có tác dụng chứa được code mà đối với văn bản text bình thường bạn cũng có thể làm tương tự. Tuy nhiên, thì tiện ích này sẽ phù hợp với việc chứa các dòng code cho thủ thuật hơn là dùng để trang trí cho văn bản. Thủ thuật này code CSS khá dài và phức tạp, mình thấy bạn giữ nguyên mặc định sẽ tốt hơn, nếu bạn thành thạo về CSS thì bạn có thể tùy chỉnh, không bạn hãy để mặc định. 

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.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; }

5. Chèn tiếp code bên dưới vào sau thẻ <head>

<script src='http://data-traidatmui.appspot.com/scripts/shcore.js' type='text/javascript'></script>
<script src='http://data-traidatmui.appspot.com/scripts/shbrushcpp.js' type='text/javascript'></script>

6. Tiếp theo bạn thêm code bên dưới vào phía trên thẻ </body>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

7. Save template lại

Bây giờ nếu bạn muốn trang trí cho code bạn phải thực hiện thêm một bước nữa, bạn hãy đặt code của bạn vào giữa code bên dưới khi bạn soạn thảo văn bản

<pre name="code" class="cpp">

Đặt code của bạn tại đây

</pre>

Chúc bạn thành công