Представление плагина Pure Highlightjs
Закулисные настройки
Выбор темы
- Дневная тема: выбор стиля блока кода, сохранение после выбора, предварительный просмотр. Никакой оптимизации, можно выбрать десятки стилей.
- Ночная тема: вам нужно, чтобы тема поддерживала корневой html-элемент, чтобы добавить темный, чтобы переключить ночной режим, иначе вы можете использовать только дневную тему.
Цвет полосы прокрутки
Вам необходимо установить стиль полосы прокрутки в соответствии со стилем темы, полоса прокрутки с simplebar, совместимая со всеми основными браузерами, может быть применена ко всему сайту, где вам нужна полоса прокрутки, к сожалению, не поддерживает тело страницы и 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";
?>На панели инструментов отображается кнопка Expand Collapse, когда блок кода Classic Editor имеет высоту.
Код классического редактора при отсутствии высоты
<?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";
?>При наличии высоты на панели инструментов отображается кнопка Expand Collapse.
Когда код редактора блоков не имеет высоты
Если вам не нужна высота или у вас очень мало кода, вам не нужно задавать имя класса высоты.При отсутствии высоты на панели инструментов не будет отображаться кнопка развернуть белый свернутый экран.Демоверсия выглядит следующим образом
<?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Обратная связь!
Русский