Página inicial/Blog/WordPress/Detalhes do conteúdo

Plugin de código de destaque do WordPress Pure Highlightjs configurações de plano de fundo documentação de ajuda

Leitura de 3 minutos
Jiangsu
2025-08-13
2025-10-11
4,009
Eu recebo uma comissão quando você faz compras através dos links abaixo, sem custo adicional para você.

Introdução do plug-in Pure Highlightjs

Atualização principal do plug-in de realce de pré-código nativo do WordPress Pure Highlightjs: atualizado para a versão v11.11.1 do Highlight.js

Atualização principal do plug-in de realce de pré-código nativo do WordPress Pure Highlightjs: atualizado para a versão v11.11.1 do Highlight.js

O plug-in de destaque de pré-código nativo do WordPress Pure Highlightjs foi atualizado para a recente versão 11.11.1, com suporte para centenas de idiomas e dezenas de estilos de estilo, adição de seleção completa e função de cópia de código... Exibir original

Configurações dos bastidores

Plug-in de código de destaque do WordPress Pure Highlightjs Configurações de back-end Documentação de ajuda - LikaCloud
Configurações de plano de fundo do plug-in

Seleção de tópicos

  • Tema diurno: escolha o estilo do bloco de código, salve após a seleção e visualize. Sem simplificação, dezenas de estilos podem ser selecionados.
  • Tema noturno: é necessário que o tema seja compatível com o elemento html raiz para adicionar dark (escuro) para que o modo noturno entre em vigor; caso contrário, você só poderá usar o tema diurno.

Cor da barra de rolagem

Você precisa definir o estilo da barra de rolagem de acordo com o estilo do tema. A barra de rolagem com o simplebar, compatível com todos os principais navegadores, pode ser aplicada a todo o site em que você precisa da barra de rolagem.

Observação: A cor da barra de rolagem definida no backend do plug-in só tem efeito na barra de rolagem do bloco de código.

Se precisar usar o simplebar em outro local do site, abra o seguinte arquivo de diretório de plug-in:

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

Acima do código, como .a, .b, .c, .com-scrollbar, adicione o nome da classe do div ou de outro elemento aqui e ele será aplicado à barra de rolagem da barra simples, por exemplo:

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

Configurações de cor da barra de ferramentas

Como o estilo de estilo do plug-in de cada tema não é o mesmo, adicione uma configuração de cor de estilo de ferramenta, se a cor for fixada diretamente no código, pois alguns estilos de tema não são coordenados, o plano de fundo pode ser selecionado de acordo com o estilo para definir a cor da barra de ferramentas.

Modo de exibição da barra de ferramentas

  • Always on: a barra de ferramentas será sempre exibida e não desaparecerá.
  • Exibição ao passar o mouse: a barra de ferramentas será exibida quando o mouse for colocado sobre o bloco de código; se o celular for clicado, o bloco de código será exibido.

Barra de ferramentas flutuante

A barra de ferramentas está sempre deslizando e sempre será exibida na área da janela de visualização, seguindo a página para baixo quando ela desliza para baixo, para cima quando ela desliza para cima e retornando à sua posição original quando a janela de visualização vai além do bloco de código.

Altura do bloco de código

Quando há muitos blocos de código no artigo e muitas linhas de código em cada bloco? Recomenda-se definir a altura máxima (max-height) do bloco de código; o editor clássico deve preencher a altura ao inserir o código; o editor de blocos deve usar o método de nome de classe.

Configurações de altura do bloco de código do Editor clássico

Plug-in de código de destaque do WordPress Pure Highlightjs Configurações de back-end Documentação de ajuda - LikaCloud
Editor clássico Inserir conjunto de códigos Altura máxima do bloco de códigos

Conforme mostrado na figura, quando o editor clássico clica no botão de código para inserir código, o padrão é 380 de altura máxima, que pode ser alterado para outros números.Ao inserir código, uma linha em branco será adicionada ao final por padrão, e é recomendável excluí-la quando não houver outro código no bloco.(?) No início, pensei que fosse um problema de código e, finalmente, por que mais 20px de posição vazia, procurando por meio dia originalmente inserido no código ao adicionar a linha vazia, chorando? ‍♀️), a seguir está a demonstração do editor clássico, com altura máxima de 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";
?>

A barra de ferramentas exibe o botão Expandir recolher quando o bloco de código do Editor clássico tem altura.

Código do editor clássico quando não há altura

Plug-in de código de destaque do WordPress Pure Highlightjs Configurações de back-end Documentação de ajuda - LikaCloud
Excluir o valor da altura do bloco de código quando não for necessária nenhuma altura
<?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();
?>

O Editor clássico não mostra o botão Expandir e recolher quando não há altura.

Block Editor Code Configurações de altura do bloco

Plug-in de código de destaque do WordPress Pure Highlightjs Configurações de back-end Documentação de ajuda - LikaCloud
Preencha a altura do nome da classe quando precisar da altura.

Existem apenas alguns desses nomes de classes de altura no momento:

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

O editor de blocos não inseriu manualmente a altura como o editor clássico, usando uma classe fixa, ? Pode ser que o editor apenas entre em contato com o editor de blocos, o acompanhamento para ver se você pode codificar a barra de ferramentas de blocos para adicionar uma função de altura de entrada manual, a demonstração é a seguinte:

<?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 há altura, a barra de ferramentas exibe o botão Expandir recolher.

Quando o código do editor de blocos não tem altura

Plug-in de código de destaque do WordPress Pure Highlightjs Configurações de back-end Documentação de ajuda - LikaCloud
Deixe o nome da classe em branco quando não houver necessidade de altura

Se você não precisar da altura ou tiver muito pouco código, não precisará definir o nome da classe de altura.Quando não houver altura, a barra de ferramentas não mostrará o botão expandir branco recolhidoA demonstração é a seguinte

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

Posteriormente, atualizará a demanda para atualizar o plug-in, como se os plug-ins tivessem algum problema, adicioneGrupo QQ 1398231Comentários!

Tags.