ปลั๊กอินเน้นโค้ด WordPress Pure Highlightjs เอกสารความช่วยเหลือการตั้งค่าบริหาร

Pure Highlightjs ปลั๊กอินแนะนำ

WordPress ปลั๊กอินเนทีฟสำหรับการเน้นโค้ดในแท็ก pre ชื่อ Pure Highlightjs ได้รับการอัปเดตครั้งใหญ่: อัปเกรดเป็น Highlight.js เวอร์ชัน v11.11.1

การตั้งค่าหลังบ้าน

ปลั๊กอินเน้นโค้ด WordPress Pure Highlightjs เอกสารความช่วยเหลือการตั้งค่าบริหาร - LikaCloud — การตั้งค่าพื้นหลังปลั๊กอิน

การเลือกธีม

ธีมกลางวัน: เลือกสไตล์ของบล็อกโค้ด, เลือกแล้วบันทึก, ดูตัวอย่าง. ไม่ได้ทำการย่อ, สามารถเลือกได้หลายสิบสไตล์.
ธีมกลางคืน: ต้องการให้ธีมสนับสนุนการเพิ่ม dark ที่องค์ประกอบ html รากเพื่อเปลี่ยนโหมดกลางคืนจึงจะมีผล, มิฉะนั้นจะใช้ได้เฉพาะธีมกลางวัน.

สีแถบเลื่อน

ต้องตั้งค่าสไตล์ของแถบเลื่อนตามธีมที่เลือก แถบเลื่อนใช้ simplebar ซึ่งเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด สามารถนำไปใช้ในส่วนต่างๆ ของเว็บไซต์ที่ต้องการแถบเลื่อนได้ แต่ที่น่าเสียดายคือไม่รองรับสไตล์แถบเลื่อนที่ขอบหน้าจอของ body และ html

หมายเหตุ: สีแถบเลื่อนที่ตั้งค่าในส่วนหลังบ้านของปลั๊กอินจะมีผลเฉพาะกับแถบเลื่อนของบล็อกโค้ดเท่านั้น

หากต้องการใช้ simplebar ในส่วนอื่นของเว็บไซต์ ให้เปิดไฟล์ในไดเรกทอรีปลั๊กอินต่อไปนี้:

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

โค้ดด้านบนเช่น .a, .b, .c, .com-scrollbar เพิ่มชื่อคลาสของ div หรือองค์ประกอบอื่นๆ ลงในส่วนนี้ จะนำไปใช้กับแถบเลื่อน simplebar เช่น:

<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
  <!-- 不建议在这个div添加滚动条类 -->
  <div class="content">
    <span>เนื้อหา</span>
    <span>เนื้อหา</span>
    <span>เนื้อหา</span>
    <span>เนื้อหา</span>
  </div>
</div>

การตั้งค่าสีของแถบเครื่องมือ

เนื่องจากสไตล์ธีมของปลั๊กอินแต่ละอันแตกต่างกัน จึงมีการเพิ่มการตั้งค่าสีสไตล์เครื่องมือ หากกำหนดสีไว้ในโค้ดโดยตรง อาจไม่เข้ากับธีมสไตล์บางอย่าง ดังนั้นในส่วนหลังสามารถตั้งค่าสีแถบเครื่องมือตามสไตล์ที่เลือกได้

โหมดการแสดงแถบเครื่องมือ

แสดงตลอดเวลา: แถบเครื่องมือจะแสดงอยู่ตลอด ไม่หายไป
เมื่อวางเมาส์เหนือจะแสดง: แถบเครื่องมือจะแสดงเมื่อวางเมาส์เหนือบล็อกโค้ด บนอุปกรณ์เคลื่อนที่จะแสดงเมื่อคลิกที่บล็อกโค้ดหนึ่งครั้ง

แถบเครื่องมือลอย

แถบเครื่องมือจะเลื่อนตลอดเวลา โดยจะแสดงอยู่ในพื้นที่วิวพอร์ตเสมอ เมื่อเลื่อนหน้าลงจะเลื่อนตามลง เมื่อเลื่อนขึ้นจะเลื่อนตามขึ้น และเมื่อวิวพอร์ตเกินบล็อกโค้ด จะกลับไปที่ตำแหน่งเดิม

ความสูงของบล็อกโค้ด

เมื่อบทความมีบล็อกรหัสจำนวนมาก และแต่ละบล็อกรหัสมีหลายบรรทัด ? แนะนำให้ตั้งค่าความสูงสูงสุดของบล็อกรหัส (max-height) โดยในตัวแก้ไขแบบคลาสสิกจะกรอกความสูงขณะป้อนรหัส ส่วนในตัวแก้ไขแบบบล็อกจะใช้วิธีการตั้งค่าผ่านชื่อคลาส

การตั้งค่าความสูงของบล็อกรหัสในตัวแก้ไขแบบคลาสสิก

ดังรูป เมื่อคลิกปุ่มรหัสในตัวแก้ไขแบบคลาสสิกเพื่อแทรกรหัส ค่าเริ่มต้นของความสูงสูงสุดคือ 380 สามารถเปลี่ยนเป็นตัวเลขอื่นได้เมื่อแทรกโค้ด จะมีบรรทัดว่างเพิ่มเข้ามาโดยอัตโนมัติในตอนท้าย หากบล็อกโค้ดนั้นไม่มีโค้ดอื่น แนะนำให้ลบออก(? ตอนแรกฉันคิดว่าเป็นปัญหาเกี่ยวกับโค้ด ทำไมถึงมีพื้นที่ว่าง 20px เพิ่มมาอีก หลังจากค้นหาอยู่พักหนึ่งจึงพบว่าเป็นบรรทัดว่างที่เพิ่มเข้ามาเมื่อแทรกโค้ด ร้องไห้?‍♀️) ด้านล่างนี้เป็นการสาธิตในตัวแก้ไขแบบคลาสสิก โดยมีความสูงสูงสุด 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";
?>

เมื่อบล็อกโค้ดในตัวแก้ไขแบบคลาสสิกมีความสูง แถบเครื่องมือจะแสดงปุ่มขยายและย่อ

เมื่อบล็อกโค้ดในตัวแก้ไขแบบคลาสสิกไม่มีกำหนดความสูง

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

ตัวแก้ไขแบบคลาสสิกจะไม่แสดงปุ่มขยาย/ยุบเมื่อไม่มีความสูง

การตั้งค่าความสูงของบล็อกโค้ดในตัวแก้ไขบล็อก

ขณะนี้มีชื่อคลาสความสูงเหล่านี้:

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

ตัวแก้ไขบล็อกไม่มีตัวเลือกป้อนความสูงด้วยตนเองเหมือนตัวแก้ไขแบบคลาสสิก แต่ใช้วิธีคลาสแบบตายตัว ? อาจเป็นเพราะผู้เขียนเพิ่งเริ่มใช้ตัวแก้ไขบล็อก ภายหลังจะดูว่าสามารถเพิ่มฟังก์ชันป้อนความสูงด้วยตนเองในแถบเครื่องมือของบล็อกโค้ดได้หรือไม่ การสาธิตมีดังนี้:

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

เมื่อมีความสูง แถบเครื่องมือจะแสดงปุ่มขยายและยุบ

เมื่อบล็อกโค้ดของตัวแก้ไขบล็อกไม่มีความสูง

หากไม่ต้องการความสูงหรือโค้ดมีน้อย ก็ไม่จำเป็นต้องตั้งค่าชื่อคลาสความสูงเมื่อไม่มีความสูง แถบเครื่องมือจะไม่แสดงปุ่มขยาย/พับตัวอย่างการสาธิตดังนี้

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

ต่อจากนี้จะอัปเดตปลั๊กอินตามความต้องการ หากมีปัญหากับปลั๊กอิน กรุณาเข้าร่วมกลุ่ม QQ 1398231เพื่อแจ้งปัญหา!