Опис чистого плагіна Highlightjs
Налаштування в фоновому режимі
Вибір теми.
- Денна тема: виберіть стиль коду, збережіть його після вибору і перегляньте. Якщо не хочете займатися оптимізацією, можете вибрати один з десятків доступних стилів.
- Тема нічного режиму: необхідно, щоб тема підтримувала додавання елемента dark для переходу в нічний режим, інакше буде використовуватися лише тема денного режиму.
Колір смужки прокрутки.
Необхідно налаштувати стиль скрол-бара відповідно до обраного тематичного стилю. Скрол-бар використовує 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, але її можна змінити на інше значення.При вставленні коду за замовчуванням додається порожній рядок. Якщо в блоці коду немає іншого коду, його рекомендується видалити.(? Спочатку я думав, що це проблема з кодом. Чому в кінці виявилося на 20 пікселів більше порожнього простору? Я довго шукав і зрозумів, що це через порожні рядки, які я додав під час вставки коду. Ах, чому б не?) Нижче наведено демонстрацію класичного редактора з максимальною висотою 300 пікселів:
<?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Зворотній зв'язок!
Українська