Introducción del plugin Pure Highlightjs
Ajustes entre bastidores
Selección de temas
- Tema del día: elegir el estilo del bloque de código, guardar después de la selección, vista previa. No racionalizar hecho, docenas de estilos se pueden seleccionar.
- Tema nocturno: es necesario que el tema admita el elemento html raíz para añadir oscuro para que el modo nocturno surta efecto, de lo contrario sólo podrá utilizar el tema diurno.
Color de la barra de desplazamiento
Es necesario establecer el estilo de la barra de desplazamiento de acuerdo con el estilo del tema , la barra de desplazamiento con simplebar , compatible con todos los principales navegadores , se puede aplicar a todo el sitio donde se necesita la barra de desplazamiento , por desgracia no es compatible con el cuerpo de la página y el lado de la pantalla html del estilo de la barra de desplazamiento .
Nota: El color de la barra de desplazamiento establecido en el backend del plugin sólo tiene efecto en la barra de desplazamiento del bloque de código.
Si necesita utilizar simplebar en otra parte del sitio, abra el siguiente archivo del directorio de plugins:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Por encima de código como .a, .b, .c, .com-scrollbar así añadir el nombre de la clase de div u otro elemento aquí y se aplicará a la barra de desplazamiento simplebar por ejemplo:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>Contenido</span>
<span>Contenido</span>
<span>Contenido</span>
<span>Contenido</span>
</div>
</div>Configuración del color de la barra de herramientas
Debido a que el estilo de estilo de plug-in de cada tema no es el mismo, por lo que añadir un estilo de herramienta de configuración de color, si el color se fija directamente en el código, para algunos estilos de tema no están coordinados, el fondo se puede seleccionar de acuerdo con el estilo para establecer el color de la barra de herramientas.
Modo de visualización de la barra de herramientas
- Siempre activada: La barra de herramientas se mostrará siempre y no desaparecerá.
- Visualización al pasar el ratón: la barra de herramientas se mostrará cuando el ratón se sitúe sobre el bloque de código, móvil es un clic sobre el bloque de código se mostrará.
Barra de herramientas flotante
La barra de herramientas siempre se desliza, y siempre se mostrará en el área de la ventana gráfica, siguiendo la página hacia abajo cuando se desliza hacia abajo, hacia arriba cuando se desliza hacia arriba, y volviendo a su posición original cuando la ventana gráfica va más allá del bloque de código.
Código Altura del bloque
¿Cuando hay muchos bloques de código dentro del artículo, y muchas líneas de código en cada bloque? Se recomienda establecer la altura máxima (max-height) del bloque de código, el editor clásico es llenar la altura al introducir el código, el editor de bloques es utilizar el método de nombre de clase.
Ajustes de altura del bloque de código del editor clásico
Como se muestra en la figura, cuando el editor clásico hace clic en el botón de código para insertar código, el valor predeterminado es 380 de altura máxima, que puede cambiarse por otros números.Al insertar código, se añadirá por defecto una línea en blanco al final, y se recomienda borrarla cuando no haya más código en el bloque.(?) Al principio pensé que era un problema de código, y, finalmente, ¿por qué más de 20px posición vacía, buscando medio día originalmente insertado en el código al agregar la línea vacía, llorando? ♀️), el siguiente es el editor clásico de demostración, la altura máxima de 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";
?>La barra de herramientas muestra el botón Expandir Contraer cuando el bloque de código del Editor clásico tiene altura.
Código del editor clásico cuando no hay altura
<?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();
?>El Editor clásico no muestra el botón Expandir contraer cuando no hay altura.
Editor de bloques de código Configuración de la altura de los bloques
Por el momento, sólo hay unos pocos nombres de estas clases de altura:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Editor de bloques no introdujo manualmente la altura como el editor clásico, utilizando una clase fija, ? Puede ser que el editor sólo en contacto con el editor de bloques, el seguimiento para ver si se puede codificar la barra de herramientas de bloque para agregar una función de altura de entrada manual, la demo es la siguiente:
<?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";
?>Cuando hay altura, la barra de herramientas muestra el botón Expandir Contraer.
Cuando el código del editor de bloques no tiene altura
Si no necesitas la altura o tienes muy poco código, no necesitas establecer el nombre de la clase de altura.Cuando no hay altura, la barra de herramientas no mostrará el botón expandir blanco colapsadoLa demostración es la siguiente
<?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();
?>Posteriormente se actualizará la demanda para actualizar el plug-in, tales como plug-ins tienen algún problema por favor agregueGrupo QQ 1398231¡Reacción!
Español