Pengenalan plugin Highlightjs murni
Pengaturan latar belakang.
Pemilihan topik.
- Tema siang hari: Pilih gaya blok kode, simpan setelah memilih, dan pratinjau. Jika tidak ingin membuatnya lebih sederhana, Anda dapat memilih dari puluhan gaya yang tersedia.
- Tema malam: Diperlukan dukungan tema untuk menambahkan elemen HTML root dengan mode dark untuk mengaktifkan mode malam, jika tidak, hanya tema siang yang bisa digunakan.
Warna gulir
Anda perlu mengatur gaya scrollbar sesuai dengan tema yang dipilih. Scrollbar yang digunakan adalah SimpleBar, yang kompatibel dengan semua browser utama dan dapat diterapkan ke semua area di situs yang membutuhkan scrollbar. Sayangnya, ini tidak mendukung gaya scrollbar pada body halaman dan tepi layar HTML.
Catatan: Warna bilah gulir yang disetel di latar belakang plugin hanya berlaku untuk bilah gulir blok kode.
Jika Anda memerlukan SimpleBar di bagian lain dari situs web, buka file 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', '');
});
Kode di atas, seperti .a, .b, .c, .com-scrollbar, akan menambahkan nama kelas div atau elemen lainnya ke sini, yang kemudian akan diterapkan ke bilah gulir SimpleBar, seperti:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>\nKonten</span>
<span>\nKonten</span>
<span>\nKonten</span>
<span>\nKonten</span>
</div>
</div>\nPengaturan warna toolbar.
Karena setiap tema dan gaya plugin berbeda, kami menambahkan pengaturan warna untuk gaya alat. Jika warna ditetapkan langsung dalam kode, itu mungkin tidak cocok dengan beberapa gaya tema. Oleh karena itu, backend dapat mengatur warna toolbar berdasarkan gaya yang dipilih.
Mode tampilan toolbar.
- Selalu ditampilkan: Toolbar akan selalu ditampilkan dan tidak akan menghilang.
- Tampilan saat mengarahkan kursor: Toolbar hanya akan muncul saat kursor berada di atas blok kode. Di perangkat seluler, toolbar hanya akan muncul setelah Anda mengeklik blok kode tersebut.
\nbilah alat mengambang
Bar alat akan selalu meluncur, dan selalu ditampilkan di area viewport. Bar alat akan ikut turun saat halaman digulir ke bawah, dan ikut naik saat halaman digulir ke atas. Jika viewport melebihi blok kode, bar alat akan kembali ke posisi aslinya.
Tinggi blok kode.
Ketika ada banyak blok kode dalam artikel, dan setiap blok kode memiliki banyak baris, disarankan untuk mengatur ketinggian maksimum blok kode (max-height). Pada editor klasik, Anda dapat mengatur ketinggian saat memasukkan kode, sedangkan pada editor blok, Anda dapat menggunakan nama kelas untuk melakukannya.
\nPengaturan ketinggian blok kode editor klasik.
Seperti yang ditunjukkan pada gambar, ketika mengklik tombol kode di editor klasik untuk menyisipkan kode, tinggi maksimumnya secara default adalah 380. Namun, Anda dapat mengubahnya menjadi angka lain.Saat memasukkan kode, secara default akan ditambahkan satu baris kosong di akhir. Jika blok kode tersebut tidak memiliki kode lain, disarankan untuk menghapusnya.(? Saya awalnya mengira itu masalah kode, tetapi kenapa akhirnya ada spasi 20px ekstra? Setelah mencarinya lama-lama, ternyata itu karena ada baris kosong saat menyisipkan kode. Sedih sekali ♀️). Di bawah ini adalah demonstrasi 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";
?>Saat blok kode di editor klasik memiliki ketinggian tertentu, toolbar akan menampilkan tombol untuk memperluas atau menutupnya.
Jika kode editor klasik tidak memiliki ketinggian yang cukup, maka
<?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();
?>Editornya klasik, jadi jika tidak ada gambar, tombol kembangkan/lipat tidak akan muncul.
\nPengaturan tinggi blok kode editor blok
Saat ini, hanya ada beberapa nama kelas tingkat tinggi:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Editornya tidak memungkinkan untuk memasukkan tinggi secara manual seperti editor klasik. Ini menggunakan pendekatan yang lebih terstruktur. Mungkin karena saya baru mengenal editor blok ini, nantinya saya akan mencoba menambahkan fitur untuk memasukkan tinggi secara manual ke toolbar blok. Demonstrasinya seperti ini:
<?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";
?>Saat ukurannya cukup besar, toolbar akan menampilkan tombol untuk memperluas atau menutupnya.
Jika kode editor blok tidak memiliki ketinggian yang cukup, maka
Jika tidak memerlukan ketinggian atau kode yang sangat sedikit, maka tidak perlu lagi mengatur nama kelas ketinggian.Tanpa ketinggian, toolbar tidak akan menampilkan tombol lipat putih yang terbuka.Demonstrasinya sebagai 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();
?>Nantinya akan ada pembaruan untuk plugin berdasarkan permintaan. Jika ada masalah dengan plugin, silakan tambahkan komentar.Grup QQ 1398231Feedback!
Bahasa Indonesia