Gia Huy

Trang chủ
Blogger

Công cụ đánh dấu cú pháp tô màu bằng css trên Blogger

Đánh dấu cú pháp tô màu bằng css
·

Xin chào tất cả nhân dịp này mình sẽ chia sẻ cách làm một công cụ tô màu cú pháp chỉ bằng css thuần túy mà không cần javascript.

Công cụ đánh dấu cú pháp là một tính năng của trình soạn thảo văn bản được sử dụng để sắp xếp các loại ngôn ngữ lập trình, tập lệnh hoặc đánh dấu khác nhau, chẳng hạn như HTML, CSS, JavaScript, v.v.

Công cụ đánh dấu cú pháp tô màu bằng css trên Blogger
Công cụ đánh dấu cú pháp tô màu bằng css trên Blogger

Cách thức hoạt động của công cụ này cũng giống như công cụ phân tích cú pháp html nói chung, điểm khác biệt là ngoài việc phân tích mã, công cụ này cũng sẽ thêm một lớp vào mã để tô màu cho nó. Ok cho những bạn muốn làm cho nó, chúng ta hãy xem làm thế nào dưới đây.

Công cụ đánh dấu cú pháp tô màu bằng css trên Blogger

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.post-body pre:before{content:'</>';position:absolute;right:0;color:#c5c8c6;font-size:10px;padding:20px 15px;z-index:2;line-height:35px}
.post-body pre.html:before{content:'.html'}
.post-body pre.css:before{content:'.css'}
.post-body pre.js:before{content:'.js'}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
code{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px}
code code{font-size: 13px;margin: 2px;display: inline-block;}
pre code code{font-size: 13px;margin: 2px;display: inline-block;}

Bước 6: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Bạn cũng có thể thêm một lớp vào thẻ trước để đặt tên cho loại mã mà bạn chia sẻ, hãy xem ví dụ bên dưới.

Cách sử dụng công cụ đánh dấu cú pháp

Bước 7: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị khung code.

<pre class='html'><code>Your_code_is_here_html</code></pre>
<pre class='css'><code>Your_code_is_here_css</code></pre>
<pre class='js'><code>Your_code_is_here_js</code></pre>

Nếu bạn muốn đánh dấu một mã, bạn có thể sử dụng <code>Your_code_is_here_code</code> cho bản trình diễn, nó sẽ giống như bên dưới.

<pre><code>
Your_code_is_here
</code></pre>

Trên đây là hướng dẫn Công cụ đánh dấu cú pháp tô màu bằng css trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © www.wendycode.com

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.