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.
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:
<pre data-enlighter-language="html"> // chèn code HTMl vào đây </pre>
Chèn code CSS vào Blogspot
<pre data-enlighter-language="css"> // chèn code CSS vào đây </pre>
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
<script>
//<![CDATA[
EnlighterJS.init('pre', 'code.highlightme', {
language : 'javascript',
theme: 'classic',
indent : 2
});
//]]>
</script>
Trong đoạn code khởi tạo EnlighterJS ở trên, các bạn có thể thay đổi giao diện hiển thị bằng cách thay đổi thuộc tính theme.
Ví dụ: tôi muốn thay đổi sang theme Dracula, thì tôi sẽ thay đổi lại theme trên đoạn code như sau:
<script>
//<![CDATA[
EnlighterJS.init('pre', 'code.highlightme', {
language : 'javascript',
theme: 'dracula',
indent : 2
});
//]]>
</script>
Như vậy là chúng ta đã nhúng thành công thư viện EnlighterJS vào Blogspot rồi đấy. Nếu các bạn muốn biết thêm cách nhúng thư viện EnlighterJS vào Website trên hosting thì có thể tham khảo bài viết sau:
Tags:
Blogger