Představení čistého pluginu Highlightjs
Nastavení v pozadí
Výběr tématu
- Denní téma: Vyberte styl kódu, uložte jej po výběru a prohlédněte si jej. Pokud nechcete nic zjednodušovat, můžete si vybrat z desítek různých stylů.
- Noční téma: Pro to, aby noční režim fungoval, je nutné, aby téma podporovalo přidání tlačítka pro přepnutí do tmavého režimu do kořenového HTML prvku. V opačném případě bude možné používat pouze denní téma.
Barva posuvníku
Musíte nastavit styl posuvníku podle vybraného stylu tématu. Posuvník používá SimpleBar, který je kompatibilní se všemi hlavními prohlížeči a lze jej použít na všech místech webu, kde je posuvník potřebný. Bohužel nepodporuje styly posuvníku na stránce body a na okraji HTML obrazovky.
Poznámka: Barva posuvníku nastavená v nastaveních pluginu je platná pouze pro posuvníky bloků kódu.
Pokud potřebujete použít SimpleBar na jiných místech webu, otevřete následující soubor adresáře pluginu:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Výše uvedený kód, jako například .a, .b, .c, .com-scrollbar, slouží k přidání tříd div nebo jiných prvků do této oblasti, což pak umožní použití rolovacího panelu SimpleBar. Například:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>Obsah</span>
<span>Obsah</span>
<span>Obsah</span>
<span>Obsah</span>
</div>
</div>Nastavení barvy panelu nástrojů.
Vzhledem k tomu, že každý tématický styl pluginu je odlišný, byly přidány nastavení barev nástrojů. Pokud by barvy byly přímo zakotveny v kódu, nebyly by pro některé tématické styly vhodné. Zadní kancelář může nastavit barvy nástrojové lišty podle zvoleného stylu.
Režim zobrazení nástrojové lišty.
- Vždy zobrazovat: Nástrojová lišta se bude neustále zobrazovat a nebude mizet.
- Zobrazení při přejezdu myši: Nástrojová lišta se zobrazí pouze tehdy, když je myš umístěna nad blokem kódu. Na mobilních zařízeních se zobrazí po jednom kliknutí na blok kódu.
Nástrojová lišta je plovoucí.
Nástrojová lišta se neustále posouvá a je vždy zobrazena v oblasti viewportu. Při posunu stránky dolů se lišta posune dolů, při posunu stránky nahoru se lišta posune nahoru. Pokud viewport překročí kódový blok, lišta se vrátí na původní pozici.
Výška bloku kódu
Pokud je v článku mnoho kódových bloků a každý blok obsahuje mnoho řádků kódu, doporučuje se nastavit maximální výšku kódových bloků (max-height). V klasickém editoru se výška nastavuje při zadávání kódu, zatímco v blokovém editoru se používá třídní název.
Nastavení výšky kódu v klasickém editoru.
Jak je vidět na obrázku, když kliknete na tlačítko Kód v klasickém editoru a vložíte kód, výchozí maximální výška je 380. Tuto hodnotu lze změnit na jiné číslo.Při vkládání kódu je na konci standardně přidán prázdný řádek. Pokud blok kódu neobsahuje žádný další kód, doporučuje se jej odstranit.(? Původně jsem si myslel, že je to problém s kódem. Proč se nakonec objevilo 20px prázdného místa? Pátral jsem dlouho a zjistil, že to bylo kvůli prázdným řádkům, které jsem přidal při vkládání kódu. Fuj!). Níže je ukázka klasického editoru s maximální výškou 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";
?>Pokud má blok kódu v klasickém editoru výšku, zobrazí se na panelu nástrojů tlačítko pro rozbalení a sbalení.
Kód klasického editoru nemá vysokou prioritu.
<?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();
?>Pokud nemá klasický editor vysokou výšku, tlačítko pro rozbalení/zavření se nezobrazí.
Nastavení výšky kódu v editoru bloků.
V současné době existují tyto názvy tříd na vyšší úrovni:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Editér bloků neumožňuje ruční zadání výšky jako v klasickém editoru, ale používá pevně stanovené rozměry. Možná je to proto, že jsem se s editorem bloků teprve seznámil. V budoucnu se podívám, zda by bylo možné do nástrojové lišty editoru bloků přidat funkci pro ruční zadání výšky. Demonstrace je uvedena níže:
<?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";
?>Pokud je to možné, nástrojová lišta zobrazí tlačítko pro rozbalení a sbalení.
Pokud kód editoru bloku nemá vysokou kvalitu,
Pokud nepotřebujete vysokou výšku nebo jen málo kódu, nemusíte nastavovat třídu s vysokou výškou.Pokud není nastavena vysoká hodnota, panel nástrojů nezobrazí tlačítko pro rozbalení/zavření.Demonstrace je následující.
<?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();
?>Budeme pravidelně aktualizovat požadavky a pluginy. Pokud máte s pluginy nějaké problémy, přidejte se k diskuzi.Skupina QQ 1398231Zpětná vazba!
Čeština