Giới thiệu Pure Highlightjs
Trong hệ sinh thái WordPress, tô sáng mã nguồn luôn là tính năng quan trọng cho các blog công nghệ và website dành cho nhà phát triển. Gần đây, plugin Pure Highlightjs đã im hơi lặng tiếng trong nhiều năm cuối cùng cũng đón nhận bản cập nhật lớn, nâng cấp thư viện Highlight.js cốt lõi từ phiên bản lỗi thời lên phiên bản mới nhất v11.11.1.
Tải xuống plugin
Tô sáng mã nguồn với Pure Highlightjs
Nâng cấp trang web v2.1.3
369 lượt tải xuống
Cập nhật ngày 22-08-2025
Mật khẩu：cloud Đã sao chép mật khẩu đám mây!
Hỗ trợ tô sáng cú pháp mã nguồn gốc cho cả trình soạn thảo Cổ điển và Khối của WordPress, hỗ trợ hàng trăm ngôn ngữ
Sau khi tải về và giải nén, hãy tải thư mục Pure-Highlightjs lên thư mục plugin, sau đó kích hoạt trong trang quản trị!
Đã quên, đã cập nhật
Pure Highlightjs là một plugin đánh dấu mã nguồn nhẹ nhàng trên nền tảng WordPress, được phát hành bởi nhà phát triển icodechef vào năm 2016 và sau đó đã ngừng cập nhật. Plugin này được nhiều người dùng WordPress ưa chuộng nhờ đặc điểm đơn giản và hiệu quả, nhưng theo thời gian, phiên bản Highlight.js tích hợp sẵn đã trở nên lỗi thời so với phiên bản chính thống. Vì tôi không thích shortcode của các plugin khác, mà thích pre tích hợp sẵn hơn, nên... tôi đã nâng cấp nó, trọng tâm là mã pre gốc của WordPress.
Plugin này tuy nhỏ gọn, nhưng vừa đáp ứng nhu cầu của tôi, "thấy nó nhiều năm không được cập nhật,"biên tập viên của trang web nàyquyết định tự tay nâng cấp nó lên phiên bản Highlight.js mới nhất.
Các cải tiến từ việc nâng cấp
Lần nâng cấp lên phiên bản Highlight.js 11.11.1 này mang đến nhiều cải tiến quan trọng:
- Thanh công cụ mã nguồn:Thêm các nút mở rộng thanh công cụ, sao chép và chọn tất cả, đồng thời hiển thị nổi trong khung nhìn, rất mượt mà
- Nhấp đôi để chọn tất cả:Thêm tính năng nhấp đôi để chọn tất cả, nhấp đôi vào vùng mã trên máy tính để chọn toàn bộ mã
- Chiều cao khối mã:Thêm chiều cao tối đa cho khối mã, các đoạn mã dài có thể thiết lập chiều cao tối đa, sẽ có thanh cuộn ngang và dọc
- Thu gọn mở rộng:Thêm nút mở rộng, khi khối mã được thêm chiều cao, có thể mở rộng và thu gọn
- Chế độ tối: Thêm chế độ tối, plugin có thể chọn chủ đề mã sáng và tối, có thể chuyển đổi khi chủ đề WordPress có chế độ tối, có thể trải nghiệm hiệu ứng trang web này
- Tối ưu thanh cuộn:Plugin đã bổ sung thanh cuộn simplebar, tối ưu hóa kiểu dáng thanh cuộn mã nguồn, tương thích với các trình duyệt phổ biến, cũng có thể áp dụng cho toàn bộ trang web
- Hỗ trợ thêm nhiều ngôn ngữ lập trình hiện đại: Bổ sung hỗ trợ cho các ngôn ngữ hiện đại như TypeScript, Kotlin, Dart, tổng cộng hỗ trợ 192 ngôn ngữ với 80 chủ đề giao diện
- JS nguyên bản chính thức:Không được tinh giản, cũng không thay đổi JS, tối ưu hóa trình chỉnh sửa cổ điển và trình chỉnh sửa khối
- Phân tích cú pháp tốt hơn: Cải thiện khả năng nhận diện cú pháp như JSX, mẫu Vue, v.v.
- Sửa lỗi tương thích：Đã giải quyết các vấn đề tương thích tiềm ẩn trong phiên bản cũ
Tại sao chọn Highlightjs?
Trong số nhiều plugin tô sáng mã nguồn cho WordPress, Pure Highlightjs vẫn có chỗ đứng nhờ những ưu điểm độc đáo:
- Thiết kế nhẹ nhàng: Không phụ thuộc jQuery, ảnh hưởng rất ít đến hiệu suất trang web
- Hỗ trợ gốc: Sử dụng trực tiếp thẻ pre của WordPress, không cần cấu hình phức tạp, và không như các plugin khác cần sử dụng shortcode của plugin
- Đơn giản và đẹp mắt：Kiểu mặc định sạch sẽ và gọn gàng, phù hợp cho tài liệu kỹ thuật
Trình diễn mã nguồn
Trình diễn thanh cuộn mã nguồn
Thanh cuộn sử dụng kiểu thanh cuộn simplebar, tương thích với nhiều trình duyệt phổ biến, có thể dùng nhiều trình duyệt khác nhau để kiểm tra hiệu quả!
<?php
/**
* PHP长行代码演示示例
* 用于测试滚动条效果
*/
// 基本变量定义
$testString = "这是一个普通的字符串变量，用于演示PHP的基本语法特性";
$numberValue = 123456;
$arrayData = [
'name' => '测试数据',
'type' => '演示',
'values' => [10, 20, 30, 40, 50]
];
// 这是一行很长的代码，包含了多个函数调用和字符串拼接，目的是测试滚动条效果。这里我们模拟一个复杂的数据处理过程，包含字符串操作、数组处理和数学计算等多种操作的组合。这段代码会将多个不同类型的数据进行转换和组合，生成一个复杂的结果字符串。
$longLine1 = "处理结果: " . strtoupper(trim(json_encode(array_merge($arrayData, ['timestamp' => time(), 'random' => rand(1000, 9999), 'status' => 'completed', 'message' => '这是一条很长的消息，用于增加字符串长度，测试滚动效果。这里继续添加一些内容，让这行代码变得足够长，以便在显示时需要滚动条才能完全查看。']), " \t\n\r\0\x0B"))) . " | 计算结果: " . (sqrt(pow($numberValue, 2) + pow($numberValue / 2, 2)) * 1.5) . " | 状态信息: 操作已完成，耗时 " . microtime(true) . " 毫秒，内存使用: " . memory_get_usage() . " 字节";
// 另一个长行代码，演示条件判断和函数嵌套的复杂情况
if (strlen($testString) > 10 && is_array($arrayData) && count($arrayData['values']) > 3 && $numberValue > 100000 && strpos($testString, 'PHP') !== false && (time() % 2 == 0)) {
$longLine2 = "满足所有条件 | 数组信息: " . print_r($arrayData, true) . " | 字符串长度: " . strlen($testString) . " | 随机数: " . rand(1, 1000) . " | 当前时间: " . date('Y-m-d H:i:s') . " | 这是为了测试滚动条而添加的额外内容，继续增加长度直到足够长，确保在大多数编辑器或显示窗口中都需要滚动才能看到完整内容。这里再添加一些文字，让这行代码变得更长一些，以达到测试目的。";
} else {
$longLine2 = "不满足所有条件的默认值";
}
// 函数定义
function processData($input) {
if (!is_array($input)) {
return "无效输入: 必须提供数组类型";
}
// 处理数据的逻辑
$result = [];
foreach ($input as $key => $value) {
$result[strtoupper($key)] = is_string($value) ? strrev($value) : $value;
}
return $result;
}
// 类定义
class DemoClass {
private $property1;
protected $property2;
public $property3;
public function __construct($param1, $param2) {
$this->property1 = $param1;
$this->property2 = $param2;
$this->property3 = "默认值: " . $param1 . " - " . $param2;
}
public function getCombined() {
return $this->property1 . "|" . $this->property2 . "|" . $this->property3;
}
}
// 执行演示
echo "PHP长行代码测试演示\n";
echo "=====================\n";
echo "1. 长行字符串1: " . $longLine1 . "\n\n";
echo "2. 长行字符串2: " . $longLine2 . "\n\n";
echo "3. 处理后的数据: " . print_r(processData($arrayData), true) . "\n\n";
$demoObj = new DemoClass("参数1", "参数2");
echo "4. 对象信息: " . $demoObj->getCombined() . "\n";
?>
Trình diễn mã trình biên tập cổ điển
Trình biên tập cổ điển khi thêm mã có thể thiết lập chiều cao tối đa, dựa vào chiều cao để hiển thị nút mở rộng/thu gọn
<?php
/**
* PHP长行代码演示示例
* 用于测试滚动条效果
*/
// 基本变量定义
$testString = "这是一个普通的字符串变量，用于演示PHP的基本语法特性";
$numberValue = 123456;
$arrayData = [
'name' => '测试数据',
'type' => '演示',
'values' => [10, 20, 30, 40, 50]
];
// 这是一行很长的代码，包含了多个函数调用和字符串拼接，目的是测试滚动条效果。这里我们模拟一个复杂的数据处理过程，包含字符串操作、数组处理和数学计算等多种操作的组合。这段代码会将多个不同类型的数据进行转换和组合，生成一个复杂的结果字符串。
$longLine1 = "处理结果: " . strtoupper(trim(json_encode(array_merge($arrayData, ['timestamp' => time(), 'random' => rand(1000, 9999), 'status' => 'completed', 'message' => '这是一条很长的消息，用于增加字符串长度，测试滚动效果。这里继续添加一些内容，让这行代码变得足够长，以便在显示时需要滚动条才能完全查看。']), " \t\n\r\0\x0B"))) . " | 计算结果: " . (sqrt(pow($numberValue, 2) + pow($numberValue / 2, 2)) * 1.5) . " | 状态信息: 操作已完成，耗时 " . microtime(true) . " 毫秒，内存使用: " . memory_get_usage() . " 字节";
// 另一个长行代码，演示条件判断和函数嵌套的复杂情况
if (strlen($testString) > 10 && is_array($arrayData) && count($arrayData['values']) > 3 && $numberValue > 100000 && strpos($testString, 'PHP') !== false && (time() % 2 == 0)) {
$longLine2 = "满足所有条件 | 数组信息: " . print_r($arrayData, true) . " | 字符串长度: " . strlen($testString) . " | 随机数: " . rand(1, 1000) . " | 当前时间: " . date('Y-m-d H:i:s') . " | 这是为了测试滚动条而添加的额外内容，继续增加长度直到足够长，确保在大多数编辑器或显示窗口中都需要滚动才能看到完整内容。这里再添加一些文字，让这行代码变得更长一些，以达到测试目的。";
} else {
$longLine2 = "不满足所有条件的默认值";
}
// 函数定义
function processData($input) {
if (!is_array($input)) {
return "无效输入: 必须提供数组类型";
}
// 处理数据的逻辑
$result = [];
foreach ($input as $key => $value) {
$result[strtoupper($key)] = is_string($value) ? strrev($value) : $value;
}
return $result;
}
// 类定义
class DemoClass {
private $property1;
protected $property2;
public $property3;
public function __construct($param1, $param2) {
$this->property1 = $param1;
$this->property2 = $param2;
$this->property3 = "默认值: " . $param1 . " - " . $param2;
}
public function getCombined() {
return $this->property1 . "|" . $this->property2 . "|" . $this->property3;
}
}
// 执行演示
echo "PHP长行代码测试演示\n";
echo "=====================\n";
echo "1. 长行字符串1: " . $longLine1 . "\n\n";
echo "2. 长行字符串2: " . $longLine2 . "\n\n";
echo "3. 处理后的数据: " . print_r(processData($arrayData), true) . "\n\n";
$demoObj = new DemoClass("参数1", "参数2");
echo "4. 对象信息: " . $demoObj->getCombined() . "\n";
?>
Trình diễn mã PHP
<?php
// 简单的PHP类示例
class Greeting {
private $name;
public function __construct($name) {
$this->name = $name;
}
public function sayHello() {
return "Hello, " . $this->name . "!";
}
}
$greeter = new Greeting("World");
echo $greeter->sayHello();
?>Trình diễn mã CSS
/* 响应式卡片样式 */
.card {
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
background: #fff;
}
.card:hover {
transform: translateY(-5px);
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}Trình diễn mã JavaScript
// 异步获取数据示例
async function fetchUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User data:', data);
return data;
} catch (error) {
console.error('Error fetching user data:', error);
}
}
// 使用示例
fetchUserData(123);Trình diễn mã ngôn ngữ GO
package main
import (
"fmt"
"net/http"
)
// 简单的HTTP服务器
func handler(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Hello, %s!", r.URL.Path[1:])
}
func main() {
http.HandleFunc("/", handler)
fmt.Println("Server starting on port 8080...")
http.ListenAndServe(":8080", nil)
}Trình diễn mã MySQL
-- 创建用户表并查询示例
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- 插入数据
INSERT INTO users (username, email)
VALUES ('john_doe', '[email protected]');
-- 查询数据
SELECT * FROM users WHERE email LIKE '%@example.com';Trình diễn mã Node.js
// Express.js 简单API示例
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/greet', (req, res) => {
const name = req.query.name || 'World';
res.json({ message: `Hello, ${name}!` });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});Trình diễn mã Python
# 使用Flask创建Web服务
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/square/<int:num>')
def square(num):
return jsonify({"result": num ** 2})
if __name__ == '__main__':
app.run(debug=True)
# 列表推导式示例
squares = [x**2 for x in range(10) if x % 2 == 0]
print(squares)Trình diễn mã C++
#include <iostream>
#include <vector>
#include <algorithm>
// 简单的C++程序示例
int main() {
std::vector<int> numbers = {5, 2, 8, 1, 9};
// 排序并输出
std::sort(numbers.begin(), numbers.end());
std::cout << "Sorted numbers: ";
for (int num : numbers) {
std::cout << num << " ";
}
std::cout << std::endl;
return 0;
}Trình diễn mã Java
// 简单的Java类和接口示例
public class Main {
public static void main(String[] args) {
Calculator calc = new BasicCalculator();
System.out.println("5 + 3 = " + calc.add(5, 3));
}
}
interface Calculator {
int add(int a, int b);
}
class BasicCalculator implements Calculator {
@Override
public int add(int a, int b) {
return a + b;
}
}Ảnh chụp màn hình minh họa
Trình diễn Backend
Trình diễn Trình chỉnh sửa cổ điển
Trình soạn thảo khối trình diễn
Hỗ trợ 192 ngôn ngữ
80 chủ đề phong cách
Đối với các tác giả blog công nghệ và người viết tài liệu, một công cụ tô sáng mã cập nhật kịp thời và hoạt động hiệu quả vẫn là nhu cầu thiết yếu. Sự tái sinh của Pure Highlightjs lần này có lẽ sẽ mang lại sức sống mới cho chức năng hiển thị mã trên WordPress.
Tiếng Việt