0
0

PrismJS Syntax Highlighter by ALT

Giá gốc là: 199.000 ₫.Giá hiện tại là: 99.000 ₫.

Một plugin WordPress tuyệt đẹp tích hợp PrismJS để tô sáng cú pháp mã nguồn một cách trang nhã với nút sao chép.

PrismJS Syntax Highlighter by ALT

Một plugin WordPress tuyệt đẹp tích hợp PrismJS để tô sáng cú pháp mã nguồn thanh lịch với nút sao chép.

Thông Tin Plugin

  • Tên Plugin: PrismJS Syntax Highlighter by của ALT
  • Tác Giả: ALT JSC
  • Trang Web: https://anlinh.vn
  • Phiên Bản: 1.0.0
  • Miền Văn Bản: alt-prismjs-syntax-highlighter

Tính Năng

✅ Tô sáng cú pháp tuyệt đẹp với nhiều chủ đề
✅ Hiển thị nhãn ngôn ngữ lập trình
✅ Nút sao chép mã với hoạt ảnh mượt mà
✅ Hỗ trợ số dòng
✅ Thiết kế đáp ứng
✅ Hỗ trợ đa ngôn ngữ (sẵn sàng i18n)
✅ Tương thích với Gutenberg và Classic Editor
✅ Có tiền tố “altpsh” để tránh xung đột
✅ Trang cài đặt admin tuyệt đẹp
✅ Chuyển đổi chủ đề dễ dàng
✅ Autoloader để tải ngôn ngữ theo yêu cầu
✅ Tệp PrismJS cục bộ (không phụ thuộc CDN)
✅ Hỗ trợ ngôn ngữ mặc định (bash)
✅ Hiệu suất được tối ưu hóa với tải ban đầu tối thiểu

Cấu Trúc Thư Mục

Bash 
wp-content/plugins/alt-prismjs-syntax-highlighter/
├── alt-prismjs-syntax-highlighter.php    # Tệp PHP chính
├── download-prismjs.sh                 # Tập lệnh để tải xuống các tệp PrismJS
├── assets/
│   ├── js/
│   │   ├── altpsh-prismjs-custom.js    # JavaScript Frontend
│   │   └── altpsh-admin.js             # JavaScript Admin
│   ├── css/
│   │   └── altpsh-admin.css            # Kiểu Admin
│   └── prismjs/                        # Tệp PrismJS cục bộ
│       ├── prism-core.min.js           # Lõi PrismJS
│       ├── themes/                     # Tệp CSS Chủ Đề
│       ├── components/                 # Thành phần Ngôn Ngữ
│       └── plugins/                    # Plugin PrismJS
│           ├── autoloader/             # Plugin Autoloader
│           └── line-numbers/           # Plugin Số Dòng
├── languages/
│   ├── alt-prismjs-syntax-highlighter.pot  # Mẫu dịch
│   ├── alt-prismjs-syntax-highlighter-vi.po # Dịch tiếng Việt (PO)
│   └── alt-prismjs-syntax-highlighter-vi.mo # Dịch tiếng Việt (MO - đã biên dịch)
└── README.md                            # Tệp này

Cài Đặt

Bước 1: Tạo Cấu Trúc Thư Mục

Tạo thư mục alt-prismjs-syntax-highlighter trong wp-content/plugins/

Bước 2: Tải Xuống Tệp PrismJS

Chạy tập lệnh tải xuống để lấy tất cả các tệp PrismJS cục bộ:

cd wp-content/plugins/alt-prismjs-syntax-highlighter
chmod +x download-prismjs.sh
./download-prismjs.sh

Điều này sẽ tải xuống: – Lõi PrismJS và plugin autoloader – Tất cả các tệp CSS chủ đề – Tất cả các thành phần ngôn
ngữ (25+ ngôn ngữ) – Plugin số dòng

Bước 3: Thêm Tệp Tùy Chỉnh

  1. Đảm bảo alt-prismjs-syntax-highlighter.php tồn tại (tệp PHP chính)
  2. Đảm bảo thư mục assets/js/ chứa:
    • altpsh-prismjs-custom.js
    • altpsh-admin.js
  3. Đảm bảo thư mục assets/css/ chứa:
    • altpsh-admin.css
  4. Tạo thư mục languages/ và thêm tệp dịch

Bước 4: Biên Dịch Tệp Dịch

Để làm cho các tệp .po hoạt động, hãy biên dịch chúng thành .mo:

Sử dụng Poedit: 1. Tải xuống và cài đặt Poedit 2. Mở
alt-prismjs-syntax-highlighter-vi.po 3. Nhấp vào “File” → “Compile to MO” 4. Tệp
alt-prismjs-syntax-highlighter-vi.mo sẽ được tạo

msgfmt alt-prismjs-syntax-highlighter-vi.po -o alt-prismjs-syntax-highlighter-vi.mo

Bước 5: Kích Hoạt Plugin

  1. Chuyển đến WordPress Admin → Plugins
  2. Tìm “Trình Tô Sáng Cú Pháp PrismJS của ALT”
  3. Nhấp vào “Kích Hoạt”

Cách Sử Dụng

Sử Dụng Cơ Bản

Trong WordPress Editor (Gutenberg hoặc Classic), thêm mã với cú pháp này:

Với ngôn ngữ được chỉ định:

<pre><code class="language-javascript">
const hello = "world";
console.log(hello);
</code></pre>

Không có ngôn ngữ (sử dụng mặc định – bash):

<pre><code>
echo "Hello World"
</code></pre>

Plugin sử dụng PrismJS Autoloader để tải các tệp ngôn ngữ theo yêu cầu, vì vậy bạn không cần phải
tải trước tất cả các ngôn ngữ. Điều này cải thiện đáng kể hiệu suất tải trang.

Cài Đặt Plugin

Điều hướng đến Cài Đặt → Trình Tô Sáng PrismJS để truy cập bảng điều khiển admin tuyệt đẹp nơi bạn
có thể:

    1. Chọn Chủ Đề: Chọn từ 8 chủ đề màu tuyệt đẹp
      • Mặc Định
      • Tối
      • Funky
      • Okaidia (mặc định)
      • Twilight
      • Coy
      • Solarized Light
      • Tomorrow Night
    2. Đặt Ngôn Ngữ Mặc Định: Chọn ngôn ngữ mặc định cho các khối mã không có ngôn ngữ được chỉ định
      • Mặc định được đặt thành Bash
      • Tất cả 25+ ngôn ngữ đều có sẵn tự động thông qua Autoloader
      • Các ngôn ngữ được tải theo yêu cầu khi cần
    3. Chuyển Đổi Tính Năng:
      • Bật/tắt số dòng

PrismJS Highlighter → Default Language

Ngôn Ngữ Được Hỗ Trợ

Plugin hỗ trợ tất cả các ngôn ngữ PrismJS (25+) thông qua plugin Autoloader. Các ngôn ngữ được tải
tự động theo yêu cầu khi được phát hiện trong các khối mã của bạn:

  • HTML/Markup, CSS, SCSS, Sass
  • JavaScript, TypeScript, JSX, TSX
  • PHP, Python, Java
  • C, C++, C#
  • Ruby, Go, Rust, Swift
  • Bash/Shell, SQL, JSON
  • YAML, XML, Markdown
  • Và nhiều hơn nữa…

Lợi Ích Hiệu Suất: – Chỉ tải các ngôn ngữ thực sự được sử dụng trên trang – Không cần tải trước tất
cả các tệp ngôn ngữ – Tải trang ban đầu nhanh hơn – Lưu vào bộ nhớ cache tự động của các ngôn ngữ được tải

Tùy Chỉnh

Thay Đổi Ngôn Ngữ Mặc Định

Ngôn ngữ mặc định cho các khối mã không có ngôn ngữ được chỉ định có thể được thay đổi trong: – Cài Đặt →
Trình Tô Sáng PrismJS → Ngôn Ngữ Mặc Định dropdown – Hoặc theo chương trình bằng cách cập nhật tùy chọn
default_language

Tất cả các ngôn ngữ đều có sẵn tự động thông qua Autoloader, vì vậy không cần cấu hình thêm.

Tùy Chỉnh Kiểu Frontend

Chỉnh sửa CSS trong phương thức altpsh_get_custom_css() trong
alt-prismjs-syntax-highlighter.php

Tùy Chỉnh Kiểu Admin

Chỉnh sửa tệp css/altpsh-admin.css để tùy chỉnh giao diện bảng điều khiển admin

Thêm Dịch Mới

  1. Sao chép alt-prismjs-syntax-highlighter.pot thành
    alt-prismjs-syntax-highlighter-{locale}.po (ví dụ:
    Initial release of PrismJS Syntax Highlighter by>)
  2. Dịch các chuỗi văn bản
  3. Biên dịch thành tệp .mo

Tính Năng Bảng Điều Khiển Admin

Trang cài đặt bao gồm:

  • Bộ Chọn Chủ Đề Hình Ảnh: Xem trước các chủ đề với gradient màu
  • Danh Sách Thả Xuống Ngôn Ngữ Mặc Định: Lựa chọn dễ dàng ngôn ngữ mặc định cho các khối mã
  • Thông Tin Autoloader: Tất cả các ngôn ngữ được tải tự động theo yêu cầu
  • Chuyển Đổi Số Dòng: Bật/tắt số dòng bằng một cú nhấp chuột
  • Thiết Kế Đáp Ứng: Hoạt động hoàn hảo trên mobile và tablet
  • Giao Diện Sạch Sẽ: Giao diện hiện đại theo kiểu WordPress
  • Thông Tin Plugin: Truy cập nhanh phiên bản và thông tin tác giả

Hỗ Trợ

  • Trang Web: https://anlinh.vn

Giấy Phép

GPL v2 hoặc mới hơn

Nhật Ký Thay Đổi

1.0.0 – 2025-01-25

  • Phát hành ban đầu của Trình Tô Sáng Cú Pháp PrismJS của ALT
  • Tích hợp PrismJS với Autoloader để tải ngôn ngữ theo yêu cầu
  • Tệp PrismJS cục bộ (không phụ thuộc CDN)
  • Hỗ trợ cho 25+ ngôn ngữ lập trình
  • 8 chủ đề màu tuyệt đẹp
  • Cấu hình ngôn ngữ mặc định (bash)
  • Nút sao chép mã với hoạt ảnh mượt mà
  • Hỗ trợ số dòng
  • Trang cài đặt admin tuyệt đẹp với bộ chọn chủ đề hình ảnh
  • Thiết kế đáp ứng cho tất cả các thiết bị
  • Hỗ trợ đa ngôn ngữ (sẵn sàng i18n)
  • Hiệu suất được tối ưu hóa với tải ban đầu tối thiểu
  • Tương thích với Gutenberg và Classic Editor

Đánh giá

Chưa có đánh giá nào.

Hãy là người đầu tiên nhận xét “PrismJS Syntax Highlighter by ALT”

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0