Documento di aiuto per l'impostazione delle impostazioni di backend del plug-in di evidenziazione del codice Pure Highlightjs di WordPress.

Introduzione al plug-in Pure Highlightjs.

Aggiornamento importante del plug-in di evidenziazione del codice nativo di WordPress, Pure Highlightjs: aggiornamento alla versione 11.11.1 di Highlight.js.

Il plug-in di evidenziazione del codice nativo di WordPress, Pure Highlightjs, è stato aggiornato alla versione più recente, la 11.11.1, e supporta oltre cento lingue e decine di stili, oltre a includere funzioni per selezionare e copiare il codice... Visualizza l'articolo originale.

Impostazioni di back-end

Selezione dell’argomento

• Tema del giorno: selezionare lo stile dei blocchi di codice, salvarlo dopo la selezione e visualizzarlo in anteprima. Senza ottimizzare, è possibile scegliere tra decine di stili.
• Tema notturno: per far funzionare il passaggio alla modalità notturna aggiungendo l'elemento dark al root HTML, è necessario che il tema lo supporti. Altrimenti, sarà possibile utilizzare solo il tema diurno.

Il colore della barra di scorrimento.

È necessario impostare lo stile della barra di scorrimento in base allo stile del tema selezionato. La barra di scorrimento utilizza SimpleBar, compatibile con tutti i browser principali, e può essere applicata a tutte le aree del sito che richiedono una barra di scorrimento. Purtroppo, però, non supporta lo stile della barra di scorrimento nel body della pagina e nei bordi dello schermo HTML.

Attenzione: il colore della barra di scorrimento impostato nelle impostazioni di back-end del plug-in è valido solo per la barra di scorrimento dei blocchi di codice.

Se è necessario utilizzare SimpleBar in altre parti del sito web, aprire il seguente file della directory del plug-in:

//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
  .querySelectorAll(
    'pre, .a, .b, .c，.com-scrollbar'
  )
  .forEach((el) => {
    el.setAttribute('data-simplebar', '');
  });

Il codice sopra, come .a, .b, .c, .com-scrollbar, aggiunge i nomi delle classi dei div o di altri elementi qui, che verranno applicati alla barra di scorrimento SimpleBar, ad esempio:

<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
  <!-- 不建议在这个div添加滚动条类 -->
  <div class="content">
    <span>Contenuto</span>
    <span>Contenuto</span>
    <span>Contenuto</span>
    <span>Contenuto</span>
  </div>
</div>

Impostazioni del colore della barra degli strumenti

Dato che ogni stile tematico del plug-in è diverso, sono state aggiunte impostazioni di colore per gli strumenti. Se i colori fossero fissati direttamente nel codice, potrebbero non essere coordinati con alcuni stili tematici. Il backend può invece impostare i colori della barra degli strumenti in base allo stile selezionato.

La modalità di visualizzazione della barra degli strumenti

• Sempre visibile: la barra degli strumenti rimarrà sempre visibile e non scomparirà.
• Visualizzazione al passaggio del mouse: la barra degli strumenti viene visualizzata solo quando il mouse si trova sopra un blocco di codice. Sul dispositivo mobile, invece, la barra degli strumenti viene visualizzata solo dopo aver fatto clic sul blocco di codice.

La barra degli strumenti è fluttuante.

La barra degli strumenti scorre sempre e rimane sempre visibile nell'area del viewport. Quando la pagina scorre verso il basso, la barra scorre con essa; quando la pagina scorre verso l'alto, la barra scorre con essa; quando il viewport supera il blocco di codice, la barra torna alla sua posizione originale.

Altezza del blocco di codice

Quando un articolo contiene molti blocchi di codice e ogni blocco di codice ha molte righe, si consiglia di impostare l'altezza massima dei blocchi di codice (max-height). Nell'editor classico, l'altezza viene impostata al momento dell'inserimento del codice, mentre nell'editor a blocchi viene utilizzato un metodo basato sui nomi delle classi.

Impostazione dell'altezza dei blocchi di codice nell'editor classico.

Come mostrato nell'immagine, quando si fa clic sul pulsante "Codice" nell'editor classico per inserire il codice, l'altezza massima predefinita è 380, ma è possibile modificarla con un altro numero.Quando si inserisce il codice, viene aggiunta automaticamente una riga vuota alla fine. Si consiglia di eliminare questa riga vuota se il blocco di codice non contiene altri codici.(Inizialmente, pensavo fosse un problema di codice, ma alla fine ho scoperto che erano 20 pixel di spazio vuoto in più. Li ho cercati per un po', ma si è rivelato che erano delle righe vuote aggiunte durante l'inserimento del codice. Che peccato!), Di seguito la dimostrazione dell'editor classico, con un'altezza massima di 300 pixel:

<?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";
?>

Quando il blocco di codice dell'editor classico ha un'altezza, la barra degli strumenti mostra i pulsanti di espansione e di piegatura.

Il codice dell'editor classico non è ottimizzato per i dispositivi mobili.

<?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();
?>

Se l'editor classico non ha un'altezza sufficiente, il pulsante di espansione/piegatura non verrà visualizzato.

Impostazione dell'altezza dei blocchi di codice nell'editor di blocchi.

Al momento, questi sono i soli nomi di classe disponibili:

h-200 {
  max-height: 200px; /*最大高度为200px*/
}
h-300 {
  max-height: 300px; /*最大高度为300px*/
}
h-380 {
  max-height: 380px; /*最大高度为380px*/
}
h-500 {
  max-height: 500px; /*最大高度为500px*/
}

L'editor di blocchi non consente di inserire manualmente l'altezza come nell'editor classico, ma utilizza un approccio basato su classi. Forse è perché io ho appena iniziato a usare l'editor di blocchi, ma in futuro vedrò se è possibile aggiungere una funzione per inserire manualmente l'altezza nella barra degli strumenti del blocco di codice. L'esempio è mostrato di seguito:

<?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";
?>

Quando l'altezza è sufficiente, la barra degli strumenti mostrerà i pulsanti di espansione e piegatura.

Il codice dell'editor di blocchi non ha un'altezza sufficiente.

Se non è necessaria un'altezza elevata o se il codice è molto poco, non c'è bisogno di impostare il nome della classe di altezza.Se non si ha un'altezza sufficiente, la barra degli strumenti non mostrerà il pulsante di espansione/piegatura bianco.Il processo di installazione è il seguente:

<?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();
?>

Aggiornamenti dei plug-in verranno pubblicati in seguito. Se avete problemi con i plug-in, aggiungetemi come amico.Gruppo QQ 1398231Feedback!