Tài liệu trợ giúp cài đặt plugin Pure Highlightjs cho WordPress

Giới thiệu plugin Pure Highlightjs

Plugin tô sáng mã Pure Highlightjs gốc cho WordPress cập nhật lớn: Nâng cấp lên phiên bản Highlight.js v11.11.1

Cài đặt quản trị

Tài liệu trợ giúp cài đặt plugin Pure Highlightjs cho WordPress - LikaCloud — Cài đặt plugin trong quản trị

Lựa chọn chủ đề

Chủ đề ban ngày: Chọn kiểu dáng cho khối mã, sau khi chọn thì lưu lại và xem trước. Không tối giản, có thể chọn hàng chục kiểu dáng.
Chủ đề ban đêm: Cần chủ đề hỗ trợ thêm thuộc tính dark vào phần tử html gốc để chuyển đổi chế độ ban đêm mới có hiệu lực, nếu không chỉ có thể dùng chủ đề ban ngày.

Màu thanh cuộn

Cần thiết lập kiểu thanh cuộn dựa trên kiểu chủ đề đã chọn, thanh cuộn sử dụng simplebar, tương thích với tất cả các trình duyệt phổ biến, có thể áp dụng cho mọi nơi trên toàn trang web cần thanh cuộn, đáng tiếc là không hỗ trợ kiểu thanh cuộn cho phần tử body và html ở cạnh màn hình.

Lưu ý: Màu thanh cuộn được cài đặt trong phần quản trị plugin chỉ có hiệu lực với thanh cuộn của khối mã.

Nếu cần sử dụng simplebar ở những nơi khác trên website, hãy mở tệp thư mục plugin sau:

//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
  .querySelectorAll(
    'pre, .a, .b, .c，.com-scrollbar'
  )
  .forEach((el) => {
    el.setAttribute('data-simplebar', '');
  });

Đoạn mã trên như .a, .b, .c, .com-scrollbar nếu thêm tên lớp của div hoặc các phần tử khác vào đây, sẽ áp dụng cho thanh cuộn simplebar, ví dụ:

<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
  <!-- 不建议在这个div添加滚动条类 -->
  <div class="content">
    <span>Nội dung</span>
    <span>Nội dung</span>
    <span>Nội dung</span>
    <span>Nội dung</span>
  </div>
</div>

Cài đặt màu sắc thanh công cụ

Vì mỗi chủ đề của plugin có phong cách giao diện khác nhau, nên đã thêm cài đặt màu sắc cho kiểu dáng công cụ. Nếu cố định màu sắc trực tiếp trong mã nguồn, có thể sẽ không phù hợp với một số chủ đề. Trong phần quản trị, bạn có thể thiết lập màu sắc thanh công cụ dựa trên chủ đề đã chọn.

Chế độ hiển thị thanh công cụ

Luôn hiển thị: Thanh công cụ sẽ luôn hiển thị và không biến mất.
Hiển thị khi di chuột qua: Thanh công cụ chỉ hiển thị khi di chuột qua khối mã, trên thiết bị di động sẽ hiển thị khi nhấn vào khối mã.

Thanh công cụ nổi

Thanh công cụ sẽ luôn trượt, luôn hiển thị trong vùng viewport, khi trang cuộn xuống thì nó cũng cuộn xuống, khi cuộn lên thì cũng cuộn lên, khi viewport vượt qua khối mã thì nó trở về vị trí ban đầu.

Chiều cao khối mã

Khi bài viết có nhiều khối mã và mỗi khối mã lại có nhiều dòng code, ? đề xuất thiết lập chiều cao tối đa cho khối mã (max-height), trình soạn thảo cổ điển sẽ nhập chiều cao khi nhập code, còn trình soạn thảo khối sử dụng phương thức tên lớp.

Cài đặt chiều cao khối mã cho trình soạn thảo cổ điển

Như hình, khi nhấn nút mã trong trình soạn thảo cổ điển để chèn mã, chiều cao tối đa mặc định là 380, có thể thay đổi thành số khác.Khi chèn mã, cuối cùng sẽ tự động thêm một dòng trống, nếu khối mã này không có mã khác thì nên xóa đi(Lúc đầu tôi nghĩ là do lỗi code, cuối cùng tại sao lại thừa 20px khoảng trống, tìm mãi mới ra là do dòng trống được thêm khi chèn code, khóc?‍♀️), dưới đây là demo trình soạn thảo cổ điển, chiều cao tối đa là 300px:

<?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";
?>

Khi khối code trong trình soạn thảo cổ điển có chiều cao, thanh công cụ sẽ hiển thị nút mở rộng/thu gọn.

Khi khối code trong trình soạn thảo cổ điển không có chiều cao

<?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 soạn thảo cổ điển không hiển thị nút mở rộng/thu gọn khi không có chiều cao.

Cài đặt chiều cao cho khối mã trong trình soạn thảo khối

Hiện tại có các tên lớp chiều cao sau:

h-200 {
  max-height: 200px; /*最大高度为200px*/
}
h-300 {
  max-height: 300px; /*最大高度为300px*/
}
h-380 {
  max-height: 380px; /*最大高度为380px*/
}
h-500 {
  max-height: 500px; /*最大高度为500px*/
}

Trình soạn thảo khối không có chức năng nhập chiều cao thủ công như trình soạn thảo cổ điển, mà sử dụng phương pháp lớp cố định, ? có lẽ do biên tập viên mới làm quen với trình soạn thảo khối, sau này sẽ xem liệu có thể thêm chức năng nhập chiều cao thủ công vào thanh công cụ khối mã không, minh họa như sau:

<?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";
?>

Khi có chiều cao, thanh công cụ sẽ hiển thị nút mở rộng và thu gọn.

Trình soạn thạch khối mã không có chiều cao

Nếu không cần chiều cao hoặc mã nguồn rất ít, thì không cần thiết lập tên lớp chiều cao,Khi không có chiều cao, thanh công cụ sẽ không hiển thị nút mở rộng thu gọn, minh họa như sau

<?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();
?>

Sau này sẽ cập nhật nhu cầu cập nhật plugin, nếu plugin có vấn đề gì vui lòng thêmQQ nhóm 1398231Phản hồi!