Cách 1. Đơn giản nhưng đẹp/xấu không đảm bảo
Sử dụng định dạng văn bản in đậm, in nghiêng, kiểu chữ khác, màu chữ khác,... để tạo sự khác biệt giữa nội dung văn bản và code muốn chèn. Nếu nhớ được chút mã HTML thì có thể tạo nổi bật hơn bằng cách tạo khung viền bao quanh, màu nền văn bản,... Ví dụ:
Đây là dòng code 1
Đây là dòng code 2
Đây là dòng code 3
...
Cách này khá hay với hầu hết những bạn không rành chút nào về HTML, không yêu cầu cao về trình bày hình thức mà chỉ tập trung cho nội dung, áp dụng tốt cho các đoạn code ngắn.
Nhược điểm là tùy khả năng mỗi người mà trông nó có vẻ đẹp hoặc không đẹp, hơn nữa nếu không nhớ kiểu định dạng thì mỗi bài viết lại định dạng code một kiểu làm cho web không có sự thống nhất về trình bày.
Nhược điểm là tùy khả năng mỗi người mà trông nó có vẻ đẹp hoặc không đẹp, hơn nữa nếu không nhớ kiểu định dạng thì mỗi bài viết lại định dạng code một kiểu làm cho web không có sự thống nhất về trình bày.
Cách 2. Đơn giản mà đẹp
- Vào web sau: http://jsbeautifier.org
- Paste đoạn code muốn làm đẹp vào rồi ấn Beautify JavaScript or HTML hoặc tổ hợp phím Ctrl + Enter.
- Copy đoạn mã mới rồi đưa vào Blogspot.
Cách 3. Phức tạp hơn nhưng đẹp
Bước 1. Chỉnh sửa HTML trong Template
- Vào phần quản trị Blogspot, chọn menu Bố cục (Template). Tại giao diện đang được lựa chọn, chọn Chỉnh sửa HTML (Edit HTML).
- Nhấn Ctrl + F và gõ từ khóa ]]></b:skin>
- Chèn 1 trong 2 đoạn code sau vào trước thẻ ]]></b:skin> (CSS 1 tạo nền trắng, CSS 2 tạo nền đen). Các bạn thử 1 trong 2 cái rồi xem kết quả, ưng kiểu hình thức trình bày nào thì dùng cái đó):
pre {
background: #fff;
white-space: pre;
word-wrap: break-word;
overflow: auto;
}
pre.code {
margin: 20px 25px;
border: 1px solid #d9d9d9;
border-radius: 2px;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
font-family: sans-serif;
font-weight: normal;
font-size: 13px;
color: #444;
position: absolute;
left: 1px;
top: 16px;
text-align: center;
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
}
pre.code code {
font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
display: block;
margin: 0 0 0 60px;
padding: 15px 16px 14px;
border-left: 1px solid #d9d9d9;
overflow-x: auto;
font-size: 13px;
line-height: 19px;
color: #444;
}
pre::after {
content: "double click to selection";
padding: 0;
width: auto;
height: auto;
position: absolute;
right: 18px;
top: 14px;
font-size: 12px;
color: #aaa;
line-height: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}
pre:hover::after {
opacity: 0;
visibility: visible;
}
pre.code-css code {
color: #0288d1;
}
pre.code-html code {
color: #558b2f;
}
pre.code-javascript code {
color: #f57c00;
}
pre.code-jquery code {
color: #78909c;
}Hoặc:
pre {
background: #333;
white-space: pre;
word-wrap: break-word;
overflow: auto;
}
pre.code {
margin: 20px 25px;
border-radius: 4px;
border: 1px solid #292929;
position: relative;
}
pre.code label {
font-family: sans-serif;
font-weight: bold;
font-size: 13px;
color: #ddd;
position: absolute;
left: 1px;
top: 15px;
text-align: center;
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
}
pre.code code {
font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
display: block;
margin: 0 0 0 60px;
padding: 15px 16px 14px;
border-left: 1px solid #555;
overflow-x: auto;
font-size: 13px;
line-height: 19px;
color: #ddd;
}
pre::after {
content: "double click to selection";
padding: 0;
width: auto;
height: auto;
position: absolute;
right: 18px;
top: 14px;
font-size: 12px;
color: #ddd;
line-height: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}
pre:hover::after {
opacity: 0;
visibility: visible;
}
pre.code-css code {
color: #91a7ff;
}
pre.code-html code {
color: #aed581;
}
pre.code-javascript code {
color: #ffa726;
}
pre.code-jquery code {
color: #4dd0e1;
}Nếu muốn có thêm chức năng là click đúp vào khung code để chọn toàn bộ nội dung code thay vì phải bôi đen từ đầu đến cuối (có ích khi muốn copy code dài, đỡ phải kéo chuột) thì bổ sung thêm đoạn code sau vào trước thẻ </head>: <script type="text/javascript">
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>
');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>
Bước 2. Cách đưa code vào bài viết
Mọi người đều làm rất tốt Bước 1. Nhưng tới bước 2, khi đưa code vào bài viết thì nhiều bạn thấy không hiển thị, hiển thị sai, bị báo lỗi,... túm lại là không như ý. Vấn đề thực ra không hề khó mà vì các bạn sơ ý thôi. Cụ thể như sau:
Chèn code mà bạn muốn hiển thị vào. QUAN TRỌNG: Nếu đoạn code muốn hiển thị có chứa ký tự < và > thì phải lần lượt thay thế bằng < và >
- Tại phần viết bài, khi muốn chèn code vào thì chọn sang thẻ HTML
- Thêm một trong các dòng code sau vào tùy thuộc code của bạn thuộc loại nào (HTML, CSS, Javascript,...). Hoặc bạn chỉ cần nhớ 1 dòng code thôi rồi tùy biến nó. Ví dụ ở label HTML thì đổi thành Latex hay cái gì đó chẳng hạn:
<pre class='code code-html'><label>HTML</label><code>...Code HTML của bạn...</code></pre>
<pre class='code code-css'><label>CSS</label><code>...Code CSS của bạn...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... Code Javascript của bạn...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... Code Jquery của bạn...</code></pre>
Chúc các bạn thành công.
