Wprowadzenie do wtyczki Pure Highlightjs.
Ustawienia w tle
Wybór tematu
- Temat dnia: wybierz styl bloku kodu, a następnie zapisz go i wyświetl w formie podglądu. Jeśli nie chcesz go upraszczać, możesz wybrać spośród kilkudziesięciu dostępnych stylów.
- Temat nocny: Aby sposób dodawania przełącznika na tryb nocny do elementu głównego HTML był skuteczny, wymagane jest wsparcie motywu. W przeciwnym razie można użyć tylko motywu dziennego.
Kolor paska przewijania.
Należy ustawić styl paska przewijania zgodnie z wybranym stylem motywu. Pasek przewijania jest dostępny w wersji simplebar i jest kompatybilny ze wszystkimi popularnymi przeglądarkami. Można go zastosować w dowolnym miejscu na stronie, w którym jest potrzebny pasek przewijania. Niestety nie ma możliwości dostosowania stylu paska przewijania na krawędziach strony głównej ani w elemencie html.
Uwaga: kolor paska przewijania ustawiony w ustawieniach wtyczki ma wpływ tylko na pasek przewijania bloków kodu.
Jeśli w innych miejscach na stronie internetowej potrzebny jest SimpleBar, otwórz następujący plik katalogu wtyczki:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Powyższy kod, np. .a, .b, .c, .com-scrollbar, pozwala dodać nazwy klas div lub innych elementów w tym miejscu, co spowoduje zastosowanie paska przewijania SimpleBar, np.:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>Treść</span>
<span>Treść</span>
<span>Treść</span>
<span>Treść</span>
</div>
</div>Ustawienia kolorów paska narzędziowego.
Ponieważ każdy motyw wtyczki ma inny styl, dodano ustawienia kolorów paska narzędzi. Jeśli kolory są bezpośrednio ustawione w kodzie, nie będą pasować do niektórych motywów. Wówczas panel administracyjny pozwala dostosować kolory paska narzędzi do wybranego motywu.
Modele wyświetlania paska narzędziowego.
- Zawsze wyświetlany: pasek narzędzi będzie się wyświetlać przez cały czas i nie będzie znikać.
- Wskazówka na temat nawigacji: pasek narzędzi wyświetla się tylko wtedy, gdy kursor znajduje się nad blokiem kodu. Na urządzeniach mobilnych pasek narzędzi pojawia się po jednokrotnym kliknięciu bloku kodu.
Pasek narzędzi jest w trybie pływającym.
Pasek narzędzi przesuwa się nieustannie i jest zawsze wyświetlany w obszarze widoku. Przesuwa się w dół, gdy strona przewija w dół, oraz w górę, gdy strona przewija w górę. Gdy obszar widoku wykroczy poza blok kodu, pasek narzędzi wróci do swojej pierwotnej pozycji.
Wysokość bloku kodu.
Gdy w artykule jest wiele bloków kodu, a każdy z nich zawiera wiele linii, zaleca się ustawienie maksymalnej wysokości bloku kodu (max-height). W edytorze klasycznym należy ustawić wysokość podczas wprowadzania kodu, natomiast w edytorze blokowym stosuje się nazwy klas.
Ustawienie wysokości bloku kodu w klasycznym edytorze.
Jak pokazano na rysunku, gdy klikniemy przycisk „Kod” w klasycznym edytorze, aby wstawić kod, domyślnie ustawiona jest maksymalna wysokość 380, ale można ją zmienić na inną wartość.Gdy wstawiamy kod, na koniec domyślnie dodawany jest pusty wiersz. Jeśli blok kodu nie zawiera żadnego innego kodu, zaleca się go usunąć.(?) Na początku myślałem, że to problem z kodem. Dlaczego w końcu pojawiła się dodatkowa luka o wysokości 20 pikseli? Szukałem jej przez długi czas i okazało się, że to był dodany przez mnie pusty wiersz podczas wstawiania kodu. Co za koszmar! Poniżej prezentuję klasyczny edytor o maksymalnej wysokości 300 pikseli:
<?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";
?>Gdy blok kodu w klasycznym edytorze osiągnie określoną wysokość, na pasku narzędzi pojawi się przycisk do rozwinięcia lub zwinięcia kodu.
Kod klasycznego edytora nie zawiera informacji o wysokości.
<?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();
?>W edytorze klasycznym przycisk rozwijania/zwijania nie jest wyświetlany, jeśli nie ma treści do rozwinięcia.
Ustawienie wysokości bloku kodu w edytorze bloków.
Aktualnie istnieją tylko te nazwy klas wyższego poziomu:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Edytor bloków nie pozwala na ręczne wprowadzanie wysokości tak jak w klasycznym edytorze. Stosuje podejście oparte na stałych wartościach. Być może jest to spowodowane tym, że dopiero zaczynam pracę z edytorem bloków. W przyszłości sprawdzę, czy można dodać funkcję ręcznego wprowadzania wysokości do paska narzędzi edytora bloków. Pokazuję to na poniższym przykładzie:
<?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";
?>Gdy poziom jest wysoki, pasek narzędzi wyświetla przycisk rozwijania/zwijania.
Kod edytora bloków nie ma wysokości.
Jeśli nie jest wymagana wysokość lub ilość kodu jest minimalna, nie trzeba ustawiać nazwy klasy dla wysokości.Jeśli nie ma wystarczająco dużo miejsca, pasek narzędzi nie wyświetli przycisku rozwijania/zwijania.Prezentacja jest następująca:
<?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();
?>Wkrótce zostaną udostępnione aktualizacje wtyczek, jeśli masz jakieś pytania dotyczące wtyczek, prosimy o kontakt.Grupa QQ nr 1398231Feedback!
Polski