Khung Hiển Thị Code Chuyên Nghiệp Trên Blogspot Với EnlighterJS3

Có thể bạn quan tâm

HomeBlogger Khung hiển thị code chuyên nghiệp trên Blogspot với EnlighterJS3 25/10/2021 0

Trong bài viết trước, tôi đã chia sẻ cho các bạn cách tạo khung hiển thị code trên bài viết. Giao diện rất đẹp, và tiện lợi cho người chuyên chia sẻ kiến thức về lập trình.

Tạo khung chứa code chuyên nghiệp và tuyệt đẹp cho Blogspot

Hôm nay, tôi lại tiếp tục chia sẻ thêm một cách để tạo khung hiển thị code trên bài viết khá hay. Với cách này bạn có thêm một lựa chọn ưng ý cho trang web của bạn. {tocify} $title={Table of Contents}

Nhúng thư viện EnlighterJS3 vào Bloggspot

Trước tiên, các bạn vào phần chỉnh sửa HTML trên quản lý Blogger. Nhúng thư viện EnglighterJS3 CSS bên dưới vào sau thẻ <head>. <link href='https://demo.tips.vn/css/enlighterjs.min.css' rel='stylesheet' type='text/css'/> Tiếp theo, các bạn tìm thẻ </body> và dán đoạn script bên dưới vào trên thẻ </body>: <script src='https://demo.tips.vn/js/enlighterjs.min.js' type='text/javascript'/><script> //<![CDATA[ EnlighterJS.init('pre', 'code.highlightme', { language : 'javascript', theme: 'classic', indent : 2 }); //]]> </script> Nhấn Save để lưu lại các thao tác trên Template.

Các đặc điểm quan trọng của EnlighterJS3

Tính năng chính của EnlighterJS

Được thiết kế để hoạt động trong tất cả các trình duyệt hiện đại
Thư viện độc lập, được đóng gói - không phụ thuộc
40 ngôn ngữ / định dạng được hỗ trợ
12 chủ đề chất lượng cao
Đánh dấu cú pháp nội tuyến
Nhóm mã để hiển thị nhiều khối mã trong ngăn tab
Chỉ ra các dòng mã đặc biệt
Footprint siêu nhỏ: 45KB JS + 10KB CSS
Đánh dấu tất cả các đoạn mã trên trang của bạn bằng một lệnh duy nhất

Đặc điểm kỹ thuật của EnlighterJS

Công cụ Tokenizer cực nhanh dựa trên các biểu thức chính quy được ưu tiên
Giai đoạn thứ hai-Tokenizer cho hiệu suất được tối ưu hóa
Các chủ đề có thể tùy chỉnh đầy đủ được viết trong ít hơn
Chủ đề có sẵn dưới dạng tệp css đơn lẻ để giảm dấu vết
Lượt xem dựa trên JSX
Thư viện DOM tối thiểu, được nhúng
hệ thống xây dựng dựa trên gulp
Mã ES6 được chuyển đổi qua babel và xây dựng với rollup.js

Cách sử dụng EnlighterJS trên bài viết Blogspot

EnlighterJS hỗ trợ hầu hết các loại ngôn ngữ trong giới lập trình. Thỏa lòng của tất cả các lập trình viên muốn chia sẻ nhiều ngôn ngữ khác nhau trên cùng một website.

Các Language được EnlighterJS hỗ trợ

ABAP (abap)
Apache HTTPD (apache)
Assembly (assembly, asm)
AVR Assembly (avrassembly, avrasm)
C/C++ (c,cpp, c++)
C# (csharp)
CSS (css)
Cython (cython)
CordPro (cordpro)
diff (diff)
Dockerfile (docker, dockerfile)
Generic (generic, standard) - default highlighting scheme
Groovy (groovy)
Go (go, golang)
HTML (html)
Ini (ini, conf)
Java (java)
Javascript (js, javascript, jquery, mootools, ext.js)
JSON (json)
JSX (jsx)
Kotlin (kotlin)
LATEX (latex)
LESS (less)
lighttpd (lighttpd)
LUA (lua)
MariadDB (mariadb)
Markdown (gfm, md, markdown)
Matlab/Octave (octave, matlab)
MSSQL (mssql)
NGINX (nginx)
NSIS (nsis)
Oracle Database (oracledb)
PHP (php)
Powerhsell (powershell)
Prolog (prolog)
Python (py, python)
PureBasic (purebasic, pb)
QML (qml)
R (r)
RAW (raw) - raw code without highlighting with EnlighterJS container styles!
RouterOS/SwitchOS (routeros)
Ruby (ruby)
Rust (rust)
Scala (scala)
SCSS (scss, sass)
Shellscript (shell, bash)
Generic SQL (sql)
Squirrel (squirrel)
Swift (swift)
Typescript (typescript)
VHDL (vhdl)
VisualBasic (visualbasic, vb)
Verilog (verilog)
XML (xml, html)
YAML (yaml)

Các Theme do EnlighterJS cung cấp

Ngoài giao diện mặc định thì EnlighterJS còn cho phép bạn thay đổi giao diện hiển thị code với nhiều Theme sau:

Enlighter (enlighter, standard) - Enlighter`s default Theme
Classic (classic) - SyntaxHighlighter inspired
Bootstrap (bootstrap4) - Bootstrap 4 inpired themes, high contrast
Beyond (beyond) - BeyondTechnology Theme
Godzilla (godzilla) - A MDN inspired Theme
Eclipse (eclipse) - Eclipse inspired
MooTwo (mootwo) - Inspired by the MooTools Website
Droide (droide) - Modern, minimalistic
Minimal (minimal) - Bright, High contrast
Atomic (atomic) - Dark, Colorful
Dracula (dracula) - Dark, using official draculatheme colorscheme
Rowhammer (rowhammer) - Light, Transparent, divided rows

Cách chèn khung code EnlighterJS

Để chèn một đoạn code lên bài viết, các bạn sẽ xem đoạn code muốn chia sẻ thuộc loại Language nào trong danh sách trên. Tiếp theo các bạn chuyển sang chế độ HTM view trên bài viết, và đưa từng đoạn code tương ứng phía dưới vào.

Chèn code HTML vào Blogspot:

Chèn code CSS vào Blogspot

Chèn code JavaScript/jQuery/Ajax vào Blogspot

<pre data-enlighter-language="javascript"> // chèn code JavaScript/jQuery/Ajax vào đây </pre>

Chèn code VisualBasic vào Blogspot

<pre data-enlighter-language="visualbasic"> // chèn code VisuaBasic vào đây </pre> Ngoài ra còn rất nhiều loại ngôn ngữ khác như: PHP, Python, XML, YAML, Oracle Database, ...

Cách thay đổi Theme của EnlighterJS

Cách tạo khung soạn code đẹp trên Website với EnlighterJS

Tags: Blogger

Latest Deals

Knowledge & Skills

Learn VBA for Beginners
Learn PHP for Beginners

Show More Discuss and share programming knowledge. Now, connect to Us!

Cài đặt và sử dụng Google Chrome - Information Technology Tips

09/09/2021

Bài 7 - Thuộc tính CorlorIndex trong lập trình VBA Excel

18/06/2021

Tạo tính năng trộn thư trên PowerPoint với VBA Excel

25/10/2021

Comments

Biểu mẫu liên hệ

Từ khóa » Chèn Js Vào Blogspot