An Trần Digital
No Result
View All Result
Thứ Sáu, Tháng Sáu 6, 2025
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki
Ủng hộ tôi
An Trần Digital
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki
No Result
View All Result
An Trần Digital
No Result
View All Result

Home - Thủ thuật Blogspot/Blogger - Tạo khung chứa code chuyên nghiệp cho blogspot

Tạo khung chứa code chuyên nghiệp cho blogspot

by An Tran
14/01/2024
in Thủ thuật Blogspot/Blogger
Reading Time: 3 mins read
A A
0
Tạo khung chứa code chuyên nghiệp cho blogspot
15
SHARES
189
VIEWS

Nội dung bài viết

  1. Khung chứa code là gì?
  2. Tạo khung chứa code Syntax Highlighter trên Blogspot
    1. Bước 1: Cập nhật CSS
    2. Bước 2: Cập nhật thư viện
  3. Cách hiển thị khung chứa code
  4. Lời kết

Khung chứa code là gì?

Việc chia sẻ mã nguồn trên blog là một phần quan trọng của việc tạo nội dung chất lượng và hữu ích cho độc giả. Đối với những người viết blog chuyên về lập trình, việc sử dụng khung chứa code với hiệu ứng syntax highlighting (tô màu cú pháp) không chỉ giúp làm cho mã nguồn trở nên rõ ràng hơn mà còn tăng tính thẩm mỹ. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo khung chứa code sử dụng Syntax Highlighter trong bài viết trên nền tảng Blogspot.

Tạo khung chứa code Syntax Highlighter trên Blogspot

Bước 1: Cập nhật CSS

Vào Blogger.com > Chủ đề > Chỉnh sửa HTML

Copy đoạn css bên dưới và chèn trên thẻ ]]></b:skin>

Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.

Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.

Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

  • Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
  • Tino: Business Hosting, NVMe Hosting và NVMe VPS
  • iNet: Cloud VPS và Web Hosting
/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Bước 2: Cập nhật thư viện

Dán các thư viện bên dưới trên thẻ </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

Sau đó lưu template lại

Xem thêm: Cách tạo hiệu ứng popup lightbox với Fancybox cho ảnh trong blogspot

Cách hiển thị khung chứa code

Để hiển thị khung chứa code Syntax Highlighter ở bài viết, bạn dùng đoạn code sau:

<pre><code>Code bạn để vào đây</code></pre>

Lời kết

An Trần Digital đã hướng dẫn các bạn cách tạo khung chứa code chuyên nghiệp cho blogspot với Syntax Highlighter cực đẹp & thẩm mỹ.

 

Tags: khung chứa code Syntax Highlighter cho blogspottạo khung chứa code chuyên nghiệp cho blogspot
Previous Post

Download Torn Edge Sticker Poster Photoshop Action

Next Post

Download Theme BeTheme WordPress free

An Tran

An Tran

Tôi là An Trần, thuộc thế hệ 9X. Hiện tại đang làm nhân viên cắt cỏ tại sân Old Trafford.

Related Posts

Tự động thêm nofollow cho liên kết ngoài trong blogspot

Tự động thêm nofollow cho liên kết ngoài trong blogspot

30/10/2024
cách hiển thị thời gian đọc bài viết trên website

Cách hiển thị thời gian đọc bài viết trên website

06/06/2024
Cách vô hiệu hoá copy, chuột phải & các phím chức năng

Cách vô hiệu hoá copy, click chuột phải & các phím chức năng cho website

09/01/2024
Cách tạo hiệu ứng popup lightbox với Fancybox cho ảnh

Cách tạo hiệu ứng popup lightbox với Fancybox cho ảnh trong blogspot

29/11/2023
Next Post
Download Theme BeTheme Wordpress free

Download Theme BeTheme WordPress free

Subscribe
Notify of
guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

BÀI VIẾT NGẪU NHIÊN

chia-se-powerpoint-template-sieu-sin-antrandigital

Chia sẻ PowerPoint Templates Siêu Xịn Giá Vài Trăm Đô

04/07/2020
Hướng dẫn xoá category trong url wordpress

Hướng dẫn cách xoá Category trong Url wordpress

28/04/2022
chia-se-preset-camera-raw-han-quoc-antrandigital

Chia sẻ preset camera raw hàn quốc xẻng blend ảnh đẹp

30/12/2020
Cách ẩn widget trên giao diện điện thoại cho website wordpress an trần digital

[WordPress] Cách ẩn Widget trên giao diện mobile cho website

05/01/2022

HOSTING / VPS KHUYÊN DÙNG

logo azdigi

Hosting WordPress chất lượng cao. Support tốt 24/7. Xem ngay

logo inet

Nhà cung cấp hosting, tên miền có lâu đời ở Việt Nam. Xem ngay

logo tinohost

Hosting WordPress chất lượng cao. Support tốt. Dùng thử 7 ngày. Click để nhận mã giảm 10% ngay. Xem ngay


An Trần Digital là blog cá nhân chia sẻ preset lightroom, camera raw từ máy tính đến mobile, template blogspot, theme wordpress và các khoá học khác hoàn toàn miễn phí.

DMCA.com Protection Status

Comments gần đây

  • An Tran
    Quản lý
    trong Share Key Screaming Frog SEO Spider
  • gia cat luoing trong Share Key Screaming Frog SEO Spider
  • An Tran
    Quản lý
    trong Share Key Screaming Frog SEO Spider

Xem nhiều nhất ngày

Share Key Screaming Frog SEO Spider

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

Về An Trần Digital

Giới thiệu về tôi

Bảo mật

Hợp tác

Bản quyền

Liên hệ

Donate

© 2020 An Trần Digital - All Rights Reserved

No Result
View All Result
  • Thủ thuật
    • Blogspot/Blogger
    • Phần Mềm
    • WordPress
    • Plugin WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá Shopee, Tiki

© 2020 An Trần Digital - All Rights Reserved

wpDiscuz

Đồng ý sử dụng cookie

Những cookie này giúp trang web ghi nhớ thông tin về lần truy cập của bạn. Nhờ đó, bạn có thể truy cập trang web này dễ dàng hơn vào lần tới và trang web cũng trở nên hữu ích hơn cho bạn. Tìm hiểu thêm