Tô màu cú pháp bằng css trên Blogger
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 |
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
Tham gia cuộc trò chuyện
Trang web của chúng tôi chia sẻ kiến thức phi lợi nhận, vì vậy mong các bạn chấp hành quy định của chúng tôi. Xin cảm ơn!