Pengenalan Plugin Pure Highlight.js
Tetapan Backend
Pilihan Tema
- Tema Siang: Pilih gaya untuk blok kod, simpan pilihan anda, dan pratonton. Tiada penyederhanaan telah digunakan; puluhan gaya tersedia untuk dipilih.
- Tema Malam: Memerlukan sokongan tema untuk elemen HTML akar supaya menambah suis 'gelap' bagi fungsi mod malam. Jika tidak, hanya tema siang akan tersedia.
Warna bar skrol
Gaya bar skrol mesti dikonfigurasikan mengikut templat tema yang dipilih. Bar skrol ini menggunakan komponen simplebar, yang serasi dengan semua pelayar utama dan boleh digunakan di mana-mana bar skrol diperlukan di seluruh laman. Malangnya, ia tidak menyokong penggayaan bar skrol pada badan halaman atau tepi skrin HTML.
Nota: Warna bar skrol yang ditetapkan dalam tetapan belakang pemalam hanya mempengaruhi bar skrol dalam blok kod.
Sekiranya anda memerlukan simplebar di tempat lain di laman web, buka fail direktori plugin berikut:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Kod di atas, seperti .a, .b, .c, .com-scrollbar, membolehkan anda menambah nama kelas div atau elemen lain di sini untuk menerapkannya pada scrollbar simplebar. Sebagai contoh:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>Kandungan</span>
<span>Kandungan</span>
<span>Kandungan</span>
<span>Kandungan</span>
</div>
</div>Tetapan Warna Bar Alat
Oleh kerana gaya setiap tema berbeza, tetapan warna bar alat telah ditambah. Memperbaiki warna terus dalam kod mungkin bertembung dengan sesetengah tema. Backend membolehkan warna bar alat disesuaikan mengikut gaya tema yang dipilih.
Mod Paparan Bar Alat
- Sentiasa tunjukkan: Bar alat akan kekal kelihatan pada setiap masa dan tidak akan hilang.
- Paparan terapung: Bar alat muncul hanya apabila penunjuk diletakkan di atas blok kod. Pada peranti mudah alih, ia muncul apabila menepuk blok kod.
Bar alat terapung
Bar alat kekal boleh digulung pada setiap masa, dipaparkan secara konsisten dalam kawasan pandangan. Ia akan bergulung ke bawah apabila halaman digulung ke bawah dan bergulung ke atas apabila halaman digulung ke atas. Sekiranya kawasan pandangan melebihi blok kod, ia akan kembali ke kedudukan asal.
Tinggi blok kod
Apabila sesuatu artikel mengandungi banyak blok kod, setiap satu terdiri daripada beberapa baris kod, adalah disyorkan untuk menetapkan ketinggian maksimum (max-height) bagi blok kod ini. Dalam Editor Klasik, ketinggian ini ditetapkan semasa memasukkan kod, manakala Editor Blok menggunakan pendekatan nama kelas.
Tetapan Ketinggian Blok Kod Editor Klasik
Seperti yang ditunjukkan dalam figura, apabila menyisipkan kod dengan mengklik butang kod dalam penyunting klasik, ketinggian maksimum lalai ialah 380 piksel. Nilai ini boleh diubah kepada nilai lain.Apabila memasukkan kod, satu baris kosong akan ditambah secara automatik di bahagian akhir. Adalah disyorkan untuk membuang baris kosong ini apabila blok kod tidak mempunyai kod tambahan.(Pada mulanya, saya menyangka ia masalah pengekodan, tetapi selepas banyak mencari, saya sedar ruang tambahan 20px itu disebabkan oleh baris kosong yang diselitkan semasa menambah kod—sakit kepala betul! 😭) Di bawah adalah demonstrasi menggunakan Editor Klasik, dengan ketinggian maksimum 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";
?>Apabila blok kod dalam Editor Klasik mempunyai ketinggian, bar alat akan memaparkan butang kembangkan/sembunyikan.
Apabila kod penyunting klasik kekurangan ketinggian
<?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();
?>Penyunting klasik tidak memaparkan butang kembangkan/sembunyikan apabila ketinggian tidak mencukupi.
Penyunting Blok Tetapan Ketinggian Blok Kod
Kategori ketinggian berikut kini tersedia:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Penyunting blok tidak membenarkan input ketinggian secara manual seperti penyunting klasik; sebaliknya, ia menggunakan pendekatan kelas tetap. Ini mungkin kerana penyunting ini masih baharu dalam penyunting blok. Kita akan meneroka sama ada kita boleh menambah fungsi input ketinggian secara manual pada bar alat blok kod pada masa hadapan. Demonstrasi adalah seperti berikut:
<?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";
?>Apabila ketinggian ditetapkan, bar alat akan memaparkan butang kembangkan/sembunyikan.
Apabila kod penyunting blok kekurangan ketinggian
Jika ketinggian tidak diperlukan atau kodnya minimal, tidak perlu menetapkan nama kelas ketinggian.Apabila bar alat tidak mempunyai ketinggian yang mencukupi, butang kembangkan/sembunyikan tidak akan dipaparkan.Demonstrasi adalah seperti berikut:
<?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();
?>Kemas kini untuk pemalam akan dikeluarkan apabila keperluan berkembang. Sekiranya anda menghadapi sebarang masalah dengan pemalam, sila tambahKumpulan QQ 1398231Maklum balas!
Bahasa Melayu