Pure Highlightjs eklentisinin tanıtımı.
Arka plan ayarları.
Konu seçimi.
- Gündelik tema: Kod bloklarının stilini seçin, seçtikten sonra kaydedin ve önizleyin. Basitleştirilmemiş halde, düzinelerce stil seçebilirsiniz.
- Gece teması: Gece modunu etkinleştirmek için kök HTML elemanına eklenen karanlık geçişin tema desteğine ihtiyaç vardır, aksi takdirde sadece gündüz temasını kullanabilirsiniz.
Kaydırma çubuğu rengi
Seçilen tema tarzına göre kaydırma çubuğu tarzını ayarlamak gerekir. Kaydırma çubuğu simplebar kullanır ve tüm ana tarayıcılarla uyumludur. Tüm sitenin kaydırma çubuğu gerektiren alanlarına uygulanabilir, ancak ne yazık ki, sayfanın gövdesi ve html ekranının kenarlarındaki kaydırma çubuğu tarzını desteklemez.
Dikkat: Eklentinin arka plan ayarlarındaki kaydırma çubuğu rengi yalnızca kod bloklarının kaydırma çubukları için geçerlidir.
Web sitesinin diğer bölümlerinde simplebar kullanılması gerekiyorsa, aşağıdaki eklenti dizin dosyalarını açın:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
Yukarıdaki kodda, .a, .b, .c, .com-scrollbar gibi div veya diğer elementlerin sınıf adları buraya eklendiğinde, simplebar kaydırma çubuğuna uygulanır. Örneğin:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>İçerik</span>
<span>İçerik</span>
<span>İçerik</span>
<span>İçerik</span>
</div>
</div>Araç çubuğu renk ayarları.
Eklentinin her tema tarzının farklı olduğu için, araç tarzı renk ayarları eklendi. Eğer renkler doğrudan koda sabitlenirse, bazı tema tarzlarıyla uyumlu olmayabilir. Arka uç, seçilen tema tarzına göre araç çubuğu renklerini ayarlayabilir.
Araç çubuğu görüntüleme modu.
- Her zaman görüntülenir: Araç çubuğu her zaman görüntülenir ve kaybolmaz.
- Fare işaretçisi gösterimi: Fare kod bloğunun üzerine geldiğinde araç çubuğu görüntülenir. Mobil cihazlarda ise kod bloğuna bir kez tıklamak araç çubuğunu gösterir.
Araç çubuğu yüzer.
Araç çubuğu her zaman kayar ve görüntüleme alanında her zaman görüntülenir. Sayfa aşağı kaydığında aşağı kayar ve yukarı kaydığında yukarı kayar. Görüntüleme alanı kod bloğunu geçtiğinde orijinal konumuna geri döner.
Kod bloğunun yüksekliği
Makalede çok sayıda kod bloğu varsa ve her kod bloğunda çok sayıda satır bulunuyorsa, kod bloklarının maksimum yüksekliğini ayarlamak önerilir. Klasik editörde kodu girerken yüksekliği ayarlarsınız, blok editöründe ise sınıf adı yöntemini kullanırsınız.
Klasik editör kod bloğu yükseklik ayarı.
Resimde gösterildiği gibi, klasik editörde kod düğmesine tıklayarak kod eklediğinizde, varsayılan olarak 380 maksimum yükseklik kullanılır. Bu, diğer sayılarla değiştirilebilir.Kodu yerleştirirken, varsayılan olarak bir boş satır eklenir. Kod bloğunda başka kod bulunmadığında, bunu silmeniz önerilir.(? Başlangıçta bunun bir kod sorunu olduğunu düşündüm, neden ekstra 20 piksel boşluk vardı? Uzun süre aradıktan sonra kodu eklerken eklenen boş satırlar olduğunu fark ettim. Ağlıyorum?♀️), aşağıda klasik editörün gösterimi, maksimum yükseklik 300 pikseldir:
<?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";
?>Klasik editör kod bloğunun yüksekliği olduğunda, araç çubuğu açma/kapama düğmesini gösterir.
Klasik editör kodunda yükseklik belirtilmemişse
<?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();
?>Klasik editör, yükseklik ayarı olmadığında genişletme/katlama düğmesini göstermez.
Blok editörü kod bloğu yükseklik ayarı.
Şu anda sadece bu birkaç yüksek seviye sınıf adı var:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}Blok editörü, klasik editör gibi yüksekliği manuel olarak girme imkanı sunmuyor. Bunun yerine sabit bir yaklaşım kullanıyor. Belki de bu, editörü yeni kullanmaya başlamamdan kaynaklanıyor. Daha sonra kod blokları araç çubuğuna manuel yükseklik girme özelliğini eklemeye çalışacağım. Gösterim aşağıda:
<?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";
?>Yükseklik olduğunda, araç çubuğu açma/kapatma düğmesini gösterir.
Blok editörü kodunda yükseklik belirtilmemişse
Eğer yükseklik gerekmiyorsa veya çok az kod varsa, yükseklik sınıf adını ayarlamak zorunda değilsiniz.Yükseklik olmadığında, araç çubuğu açılan beyaz katlamalı düğmeyi göstermeyecek.Demonstrasyon aşağıdaki gibidir.
<?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();
?>Daha sonra gereksinimler güncellendiğinde eklentiler de güncellenecek. Eklentilerle ilgili herhangi bir sorunuz varsa, lütfen bize katılın.QQ grubu 1398231Geri bildirim!
Türkçe