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
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào Đi tới liên kết đến đích
Chúc mừng! Liên kết được tạo

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 <mark>Your_code_is_here_code</mark> 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

Về tác giả

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 .

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.