Introduction du plugin Pure Highlightjs
Réglages en coulisses
Sélection des sujets
- Thème de jour : choisir le style du bloc de code, enregistrer après sélection, prévisualiser. Aucune rationalisation n'est effectuée, des dizaines de styles peuvent être sélectionnés.
- Thème nocturne : le thème doit prendre en charge l'élément html racine pour ajouter le mode sombre afin que le mode nocturne prenne effet, sinon vous ne pouvez utiliser que le thème diurne.
Couleur de la barre de défilement
Vous devez définir le style de la barre de défilement en fonction du style du thème, la barre de défilement avec simplebar , compatible avec tous les principaux navigateurs , peut être appliquée à l'ensemble du site où vous avez besoin de la barre de défilement , malheureusement ne prend pas en charge le corps de la page et le côté de l'écran html du style de la barre de défilement .
Note : La couleur de la barre de défilement définie dans le backend du plugin n'a d'effet que sur la barre de défilement du bloc de code.
Si vous avez besoin d'utiliser simplebar ailleurs sur le site, ouvrez le fichier suivant du répertoire des plugins :
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Le code ci-dessus comme .a, .b, .c, .com-scrollbar comme ceci ajoute le nom de la classe du div ou d'un autre élément ici et il sera appliqué à la barre de défilement simple par exemple :
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>élément</span>
<span>élément</span>
<span>élément</span>
<span>élément</span>
</div>
</div>Paramètres de couleur de la barre d'outils
Parce que le style du plug-in de chaque thème n'est pas le même, ajouter un style d'outil paramètres de couleur, si la couleur est fixée directement dans le code, pour certains styles de thème ne sont pas coordonnés, l'arrière-plan peut être sélectionné en fonction du style pour définir la couleur de la barre d'outils.
Mode d'affichage de la barre d'outils
- Toujours activée : la barre d'outils sera toujours affichée et ne disparaîtra pas.
- Affichage au survol de la souris : la barre d'outils s'affiche lorsque la souris est placée sur le bloc de code, le mobile est affiché lorsque l'on clique sur le bloc de code.
Barre d'outils flottante
La barre d'outils est toujours coulissante et sera toujours affichée dans la zone de visualisation, suivant la page lorsqu'elle glisse vers le bas, vers le haut lorsqu'elle glisse vers le haut, et revenant à sa position initiale lorsque la zone de visualisation dépasse le bloc de code.
Hauteur du bloc de code
Lorsqu'il y a de nombreux blocs de code dans l'article, et de nombreuses lignes de code dans chaque bloc ? Il est recommandé de définir la hauteur maximale (max-height) du bloc de code, l'éditeur classique doit remplir la hauteur lors de la saisie du code, l'éditeur de bloc doit utiliser la méthode du nom de classe.
Paramètres de hauteur des blocs de code de l'éditeur classique
Comme le montre la figure, lorsque l'éditeur classique clique sur le bouton de code pour insérer du code, la valeur par défaut est la hauteur maximale de 380, qui peut être remplacée par d'autres valeurs.Lors de l'insertion de code, une ligne vierge sera ajoutée à la fin par défaut, et il est recommandé de la supprimer lorsqu'il n'y a pas d'autre code dans le bloc.( ?) Au début, j'ai pensé que c'était un problème de code, et finalement pourquoi plus de 20px position vide, à la recherche pendant une demi-journée inséré à l'origine dans le code lors de l'ajout de la ligne vide, pleurer ? ♀️), ce qui suit est la démo de l'éditeur classique, la hauteur maximale 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 barre d'outils affiche le bouton Développer Réduire lorsque le bloc de code de l'Éditeur classique a de la hauteur.
Code de l'éditeur classique lorsqu'il n'y a pas de hauteur
<?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();
?>L'éditeur classique n'affiche pas le bouton Développer Réduire lorsqu'il n'y a pas de hauteur.
Code de l'éditeur de blocs Réglages de la hauteur des blocs
Il n'y a que peu de noms de classe de hauteur à l'heure actuelle :
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}L'éditeur de blocs n'a pas saisi manuellement la hauteur comme l'éditeur classique, en utilisant une classe fixe, ? Il se peut que l'éditeur contacte simplement l'éditeur de bloc, le suivi pour voir si vous pouvez coder la barre d'outils de bloc pour ajouter une fonction de saisie manuelle de la hauteur, la démo est la suivante :
<?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";
?>Lorsqu'il y a de la hauteur, la barre d'outils affiche le bouton Développer Réduire.
Lorsque le code de l'éditeur de blocs n'a pas de hauteur
Si vous n'avez pas besoin de la hauteur ou si vous avez très peu de code, vous n'avez pas besoin de définir le nom de la classe de hauteur.Lorsqu'il n'y a pas de hauteur, la barre d'outils n'affiche pas le bouton d'expansion et de réduction.La démo est la suivante
<?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();
?>Par la suite, la demande de mise à jour du plug-in sera actualisée, par exemple, si les plug-ins posent des problèmes, veuillez ajouterGroupe QQ 1398231Retour d'information !
Français