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

Như mình đã giới thiệu trong một bài viết trước đây (có thể xem link bên dưới) thì mình đã hướng dẫn các bạn tạo khung chứa code đơn giản để làm nổi bật lên code dành cho blog công nghệ hay thủ thuật lập trình gì đó, Lần 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 lục:

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

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>

Chú ý: nhớ chọn code cho phù hợp

Còn nữa: 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

Vào đây để lấy màu

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

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.