Einführung des Pure Highlightjs-Plugins
Backstage-Einstellungen
Themenauswahl
- Tagesthema: Wählen Sie den Stil des Code-Blocks, speichern Sie nach der Auswahl, sehen Sie sich die Vorschau an. Keine Straffung getan, Dutzende von Stilen können ausgewählt werden.
- Nacht-Thema: Sie müssen das Thema zu unterstützen, die Root-HTML-Element, um dunkle hinzufügen, um den Nachtmodus zu schalten, um wirksam zu werden, sonst können Sie nur die Tageszeit Thema zu verwenden.
Farbe der Bildlaufleiste
Sie müssen die Bildlaufleiste Stil nach dem Thema Stil, die Bildlaufleiste mit simplebar, kompatibel mit allen gängigen Browsern, kann auf die gesamte Website, wo Sie die Bildlaufleiste benötigen angewendet werden, leider nicht unterstützt die Seite Körper und HTML-Bildschirm Seite der Bildlaufleiste Stil.
Hinweis: Die im Backend des Plugins eingestellte Farbe der Bildlaufleiste wirkt sich nur auf die Bildlaufleiste des Codeblocks aus.
Wenn Sie simplebar an anderer Stelle auf der Website verwenden möchten, öffnen Sie die folgende Plugin-Verzeichnisdatei:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Oberhalb Code wie .a, .b, .c, .com-scrollbar wie diese fügen Sie den Klassennamen von div oder ein anderes Element hier und es wird auf die simplebar scrollbar zum Beispiel angewendet werden:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>Der Inhalt</span>
<span>Der Inhalt</span>
<span>Der Inhalt</span>
<span>Der Inhalt</span>
</div>
</div>Farbeinstellungen der Symbolleiste
Da das Plug-in-Stil Stil der einzelnen Themen ist nicht das gleiche, so fügen Sie ein Werkzeug Stil Farbeinstellungen, wenn die Farbe direkt in den Code festgelegt ist, für einige Themen Stile sind nicht koordiniert, kann der Hintergrund nach dem Stil ausgewählt werden, um die Symbolleiste Farbe eingestellt.
Anzeigemodus der Symbolleiste
- Immer an: Die Symbolleiste wird immer angezeigt und verschwindet nicht.
- Mouse-Hover-Anzeige: Die Symbolleiste wird angezeigt, wenn der Mauszeiger auf dem Code-Block platziert wird, mobile ist ein Klick auf den Code-Block angezeigt werden.
Symbolleiste Schwebezustand
Die Symbolleiste ist immer gleitend und wird immer im Bereich des Ansichtsfensters angezeigt. Sie folgt der Seite nach unten, wenn sie nach unten gleitet, nach oben, wenn sie nach oben gleitet, und kehrt an ihre ursprüngliche Position zurück, wenn das Ansichtsfenster über den Codeblock hinausgeht.
Code Blockhöhe
Wenn es in einem Artikel viele Codeblöcke und viele Codezeilen in jedem Block gibt? Es wird empfohlen, die maximale Höhe (max-height) des Code-Blocks festzulegen, der klassische Editor füllt die Höhe bei der Eingabe des Codes aus, der Block-Editor verwendet die Methode des Klassennamens.
Classic Editor Codeblock-Höheneinstellungen
Wie in der Abbildung zu sehen ist, ist die Standardeinstellung für das Einfügen von Code im klassischen Editor die maximale Höhe von 380, die auf andere Zahlen geändert werden kann.Beim Einfügen von Code wird standardmäßig eine Leerzeile am Ende eingefügt. Es wird empfohlen, diese zu löschen, wenn sich kein weiterer Code im Block befindet.(?) Zunächst dachte ich, es war ein Code-Problem, und schließlich, warum würde mehr 20px leere Position, auf der Suche nach einem halben Tag ursprünglich in den Code eingefügt, wenn die leere Zeile hinzufügen, weinen? ♀️), das folgende ist der klassische Editor Demo, die maximale Höhe von 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";
?>In der Symbolleiste wird die Schaltfläche Expandieren/Komprimieren angezeigt, wenn der Codeblock im klassischen Editor eine bestimmte Höhe hat.
Klassischer Editor-Code, wenn keine Höhe vorhanden ist
<?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();
?>Der Classic Editor zeigt die Schaltfläche Expandieren/Komprimieren nicht an, wenn keine Höhe vorhanden ist.
Blockeditor Code Blockhöheneinstellungen
Zurzeit gibt es nur wenige Namen dieser Höhenklassen:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Block-Editor nicht manuell eingeben, die Höhe wie der klassische Editor, mit einer festen Klasse, ? Vielleicht ist der Editor nur Kontakt mit dem Block-Editor, der Grund dafür, Follow-up, um zu sehen, wenn Sie Code-Block-Symbolleiste, um eine manuelle Eingabe Höhe Funktion hinzufügen können, ist die Demo wie folgt:
<?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";
?>Wenn die Höhe erreicht ist, wird in der Symbolleiste die Schaltfläche Erweitern/Komprimieren angezeigt.
Wenn der Code des Blockeditors keine Höhe hat
Wenn Sie die Höhe nicht benötigen oder nur sehr wenig Code haben, brauchen Sie den Namen der Höhenklasse nicht zu setzen.Wenn es keine Höhe gibt, zeigt die Symbolleiste nicht die Schaltfläche zum Erweitern der weißen zusammengeklappten Fläche an.Die Demo sieht folgendermaßen aus
<?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();
?>Anschließend wird die Nachfrage nach aktualisierten Plug-Ins aktualisiert, wie Plug-Ins haben irgendwelche Probleme bitte hinzufügenQQ-Gruppe 1398231Rückmeldung!
Deutsch