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 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;
}<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><script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
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>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
<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ợpKhi 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.
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
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
