مقدمة البرنامج المساعد Pure Highlightjs الإضافي
إعدادات الكواليس الخلفية
اختيار الموضوع
- السمة النهارية: اختر نمط نمط كتلة الرمز، احفظ بعد التحديد، قم بالمعاينة. لم يتم إجراء أي تبسيط، يمكن اختيار عشرات الأنماط.
- القالب الليلي: تحتاج إلى أن يدعم القالب عنصر html الجذري لإضافة القالب الليلي لتفعيل الوضع الليلي، وإلا يمكنك استخدام القالب النهاري فقط.
لون شريط التمرير
تحتاج إلى تعيين نمط شريط التمرير وفقًا لنمط القالب، يمكن تطبيق شريط التمرير مع الشريط البسيط، المتوافق مع جميع المتصفحات الرئيسية، على الموقع بأكمله حيث تحتاج إلى شريط التمرير، للأسف لا يدعم جسم الصفحة وجانب شاشة html لنمط شريط التمرير.
ملاحظة: لا يسري لون شريط التمرير الذي تم تعيينه في الواجهة الخلفية للإضافة إلا على شريط التمرير الخاص بمكوِّن الرمز.
إذا كنت بحاجة إلى استخدام الشريط البسيط في مكان آخر على الموقع، فافتح ملف دليل الإضافة التالي:
//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
.querySelectorAll(
'pre, .a, .b, .c，.com-scrollbar'
)
.forEach((el) => {
el.setAttribute('data-simplebar', '');
});
فوق الرمز أعلاه مثل .a، .b، .c، .com-scrollbar هكذا أضف اسم فئة div أو عنصر آخر هنا وسيتم تطبيقه على شريط تمرير الشريط البسيط على سبيل المثال:
<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
<!-- 不建议在这个div添加滚动条类 -->
<div class="content">
<span>محتوى</span>
<span>محتوى</span>
<span>محتوى</span>
<span>محتوى</span>
</div>
</div>إعدادات ألوان شريط الأدوات
نظرًا لأن نمط نمط المكون الإضافي لكل سمة ليس متماثلًا، لذا أضف إعدادات لون نمط الأداة، إذا كان اللون ثابتًا مباشرةً في الكود، بالنسبة لبعض أنماط السمات غير منسقة، يمكن تحديد الخلفية وفقًا للنمط لتعيين لون شريط الأدوات.
وضع عرض شريط الأدوات
- قيد التشغيل دائمًا: سيتم عرض شريط الأدوات دائمًا ولن يختفي.
- عرض التمرير بالماوس: سيتم عرض شريط الأدوات عند وضع الماوس على كتلة التعليمات البرمجية، سيتم عرض شريط الأدوات عند وضع الماوس على كتلة التعليمات البرمجية، سيتم عرض المحمول بنقرة على كتلة التعليمات البرمجية.
شريط الأدوات العائم
يكون شريط الأدوات منزلقًا دائمًا، وسيُعرض دائمًا في منطقة منفذ العرض، ويتبع الصفحة لأسفل عندما ينزلق لأسفل، ولأعلى عندما ينزلق لأعلى، ويعود إلى موضعه الأصلي عندما يتجاوز منفذ العرض كتلة التعليمات البرمجية.
ارتفاع كتلة الرمز
عندما يكون هناك العديد من كتل التعليمات البرمجية داخل المقالة، والعديد من أسطر التعليمات البرمجية في كل كتلة؟ يوصى بتعيين أقصى ارتفاع (أقصى ارتفاع) للكتلة البرمجية (max-height) للكتلة البرمجية، المحرر الكلاسيكي هو ملء الارتفاع عند إدخال الكود، محرر الكتلة هو استخدام طريقة اسم الفئة.
إعدادات ارتفاع مكوِّن رمز المحرر الكلاسيكي
كما هو موضح في الشكل، عندما ينقر المحرر الكلاسيكي على زر التعليمات البرمجية لإدراج التعليمات البرمجية، يكون الارتفاع الافتراضي هو 380 كحد أقصى، ويمكن تغييره إلى أرقام أخرى.عند إدراج التعليمات البرمجية، سيُضاف سطر فارغ في النهاية بشكل افتراضي، ويوصى بحذفه عند عدم وجود أي تعليمات برمجية أخرى في الكتلة.(?) في البداية ظننت أنها مشكلة في الكود البرمجي، وأخيراً لماذا المزيد من الموضع الفارغ 20 بكسل، بحثت لمدة نصف يوم في الأصل في الكود عند إضافة السطر الفارغ، أبكي؟ ♀️)، ما يلي هو العرض التوضيحي للمحرر الكلاسيكي، أقصى ارتفاع 300 بكسل:
<?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";
?>يعرض شريط الأدوات زر توسيع الطي عند ارتفاع كتلة التعليمات البرمجية للمحرر التقليدي.
رمز المحرر الكلاسيكي عند عدم وجود ارتفاع
<?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();
?>لا يُظهر المحرر التقليدي زر توسيع الطي عند عدم وجود ارتفاع.
إعدادات ارتفاع مكوِّن رمز محرر المكوِّن
لا يوجد سوى عدد قليل من أسماء فئات الارتفاع هذه في الوقت الحالي:
h-200 {
max-height: 200px; /*最大高度为200px*/
}
h-300 {
max-height: 300px; /*最大高度为300px*/
}
h-380 {
max-height: 380px; /*最大高度为380px*/
}
h-500 {
max-height: 500px; /*最大高度为500px*/
}لم يقم محرر الكتل بإدخال الارتفاع يدويًا مثل المحرر الكلاسيكي، باستخدام فئة ثابتة، ? قد يكون المحرر يتصل فقط بمحرر المكوِّنات، والمتابعة لمعرفة ما إذا كان بإمكانك ترميز شريط أدوات المكوِّنات لإضافة وظيفة ارتفاع الإدخال اليدوي، والعرض التوضيحي كالتالي:
<?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";
?>عندما يكون هناك ارتفاع، يعرض شريط الأدوات زر توسيع الطيّ.
عندما لا يحتوي رمز محرر المكوِّن على ارتفاع
إذا لم تكن بحاجة إلى الارتفاع أو كان لديك شيفرة قليلة جدًا، فلن تحتاج إلى تعيين اسم فئة الارتفاع.في حالة عدم وجود ارتفاع، لن يُظهر شريط الأدوات الزر "توسيع الزر الأبيض المطويالعرض التوضيحي كالتالي
<?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();
?>بعد ذلك سوف يتم تحديث الطلب لتحديث المكون الإضافي، مثل المكونات الإضافية التي تواجه أي مشاكل يرجى إضافةمجموعة QQ 1398231الملاحظات!
العربية