Chia sẻ tiện ích blog và kiến thức xây dựng

Tô màu cú pháp bằng css trên Blogger

Đánh dấu cú pháp tô màu bằng css
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
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.

Tô màu cú pháp bằng css trên Blogger
Tô màu cú pháp 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ó.

/* Syntax coloring with CSS by Giahuy.net */
pre code.hljs{display:block;overflow-x:auto;padding:1em}
code.hljs{padding:3px 5px}
.hljs{color:#383838;background:#f8f8f8}
.hljs::selection,.hljs::selection{background-color:#d8d8d8;color:#383838}
.hljs-comment{color:#b8b8b8}
.hljs-tag{color:#585858}
.hljs-operator,.hljs-punctuation,.hljs-subst{color:#383838}
.hljs-operator{opacity:.7}
.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ab4642}
.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#dc9656}
.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f7ca88}
.hljs-strong{font-weight:700;color:#f7ca88}
.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1b56c}
.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#86c1b9}
.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#7cafc2}
.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ba8baf}
.hljs-emphasis{color:#ba8baf;font-style:italic}
.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a16946}
.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

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_html</code></pre>
<pre class='js'><code>Your_code_is_here_html</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 tô màu cú pháp 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é!

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 ☏.