Tạo Khung Chứa Code HTML Màu Sắc Cho Blogger

Xin chào các bạn!
Hôm này mình sẽ hướng dẫn tiếp các bạn tạo Khung chứa code khá đẹp với nền tối kết hợp tiêu đề màu làm nổi bật từng loại code. Nào bắt đầu!

Mục Đích

• Tạo tính khoa học, chuyên nghiệp cho Blog, hơn thế nữa giúp cho người đọc, biết đâu là code, đâu là câu viết bình thường.
• Khung code rất ngầu, tạo sự thích thú cho người đọc, làm tăng lượt view cho Blog, giúp cho việc phát triển Blog hơn.
• Với giao diện nền tối không chói mắt

Thực Hiện

1. Đăng nhập và blogger -> mẫu -> Chỉnh sữa HTML.
2. Chèn toàn bộ code CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS/* CSS Pre Code Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}

2. Sau đó tìm thẻ đóng <body> rồi chèn hết 2 code bên dưới vào trước nó.

Jquery<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

Jquery<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

3. Lưu Mẫu lại
4. Để sử dụng thì khi viết bài đăng các bạn vào chế độ viết HTML và chèn một trong 4 đoạn code sau vào trong đó tương ứng

HTML<pre title="HTML" data-codetype ="HTML"><code class="language-marp"> ... Để Code HTML ở đây ... </code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css"> ... Để Code CSS ở đây ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScript"><code class="language-javascript"> ... Để Code JavaScript ở đây ... </code></pre>
<pre title="jQuery" data-codetype ="JQuery"><code class="language-javascript"> ... Để Code jQuery ở đây ... </code></pre>

Nhớ chọn code cho phù hợp

Khi chèn code nhớ bỏ dòng chữ lẫn cái dấu ba chấm nha. nhớ dấu ba chấm ấy.

DEMO
CLICK TO VIEW

Nâng Cao

Thay đổi màu khung tiêu đề bên trên

- Trong đoạn code CSS bên trên ngay bên cuối cùng sẽ thấy 4 hàng code gần giống nhau. Trong có có chữ background - color.#mã mà.... Đó chính là mả màu bạn cần thay đổi

• Các bạn để ý dòng data-codetype tiếp theo đó sẽ là một trong bốn chữ HTML, CSS, Javascript, Jquery. . Nếu dòng nào có chữ nào thì khi thay đổi sẽ có màu đó.
• Giả sử bạn thay đổi cái có chữ HTML thì khi bạn sử dụng code chèn HTML ngay bên dưới bước 4 ở trên cũng sẽ xuất hiện màu bạn thay đổi. Tương tự với cái còn lại

• Thay đổi màu khung chứa code

- Tìm dòng pre { rồi men theo đòng dó sẽ thấy background-color: #2c323c; Đây chính là mã màu bạn cần thay đồi là cái #2c323c
Thay đổi màu chữ trong Khung
- Tìm dòng pre code { rồi men theo dòng đó sẽ thấy cái color: #e9e9e9; rồi thay đổi cái #e9e9e9 thành mã màu bạn thích

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Khung Chứa Code Đầy Màu Sắc Cho Blogger, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công