Introduzione a Pure Highlightjs
Nell'ecosistema di WordPress, l'evidenziazione del codice è sempre stata una funzionalità importante per i blog tecnici e i siti web degli sviluppatori. Recentemente, il plug-in Pure Highlightjs, rimasto inattivo per molti anni, ha finalmente ricevuto un importante aggiornamento, che ha consentito di aggiornare la libreria principale Highlight.js dalla versione obsoleta alla più recente v11.11.1.
Download del plug-in
Evidenziazione del codice pura con Highlightjs.
Il sito è stato aggiornato. v2.1.3 310 Il prossimo download.
Aggiornamento del 22 agosto 2025.
Password:cloud La password del cloud storage è stata copiata!
Il supporto per l'evidenziazione del codice nativo nell'editor classico e nell'editor a blocchi di WordPress, oltre che per 100 lingue diverse.
Dopo aver scaricato e decompresso il file, caricare la cartella Pure-Highlightjs nella directory dei plug-in e attivarla nel pannello di amministrazione!
Ho dimenticato, ho aggiornato.
Pure Highlightjs è un plug-in di evidenziazione del codice leggero per la piattaforma WordPress, rilasciato dallo sviluppatore iCodeChef nel 2016 e successivamente interrotto. Il plug-in è stato apprezzato da molti utenti di WordPress per la sua semplicità ed efficienza, ma nel corso del tempo la versione di Highlight.js integrata è rimasta molto indietro rispetto a quella principale. Non mi piacciono i shortcode di altri plug-in, preferisco quelli predefiniti di WordPress, quindi... l'ho aggiornato, concentrandomi sul codice predefinito di WordPress.
Questo plug-in, sebbene piccolo, soddisfa esattamente le mie esigenze. Tuttavia, ho notato che non viene aggiornato da anni.Il redattore di questo sito web.Ho deciso di aggiornarlo manualmente all'ultima versione di Highlight.js.
I miglioramenti apportati dall'aggiornamento.
Questo aggiornamento alla versione 11.11.1 di Highlight.js ha apportato diversi miglioramenti importanti:
- Barra degli strumenti del codice:Sono stati aggiunti nuovi pulsanti per espandere la barra degli strumenti, copiare e selezionare tutto, che vengono visualizzati in modo fluido all'interno della finestra di visualizzazione.
- Fai doppio clic per selezionare tutto:Aggiunta della funzionalità di selezione completa con un doppio clic: facendo doppio clic sull'area del codice sul computer, è possibile selezionare completamente il codice.
- Altezza del blocco di codice:La nuova altezza massima dei blocchi di codice. È possibile impostare un'altezza massima per i blocchi di codice lunghi, con barre di scorrimento sia orizzontali che verticali.
- Avvolgere e disavvolgere:È stato aggiunto un nuovo pulsante di espansione. Quando il blocco di codice aggiunge altezza, è possibile espanderlo e ripiegarlo.
- Mode oscuraÈ stata aggiunta la modalità scura. I plug-in consentono di selezionare stili di tema del codice per il giorno e la notte. Quando un tema WordPress ha la modalità scura, è possibile passare da una all'altra per sperimentare gli effetti di questo sito.
- Ottimizzare la barra di scorrimento:L'插件 aggiunge la barra di scorrimento SimpleBar, ottimizza lo stile della barra di scorrimento del codice, è compatibile con i browser più diffusi e può essere utilizzato su tutto il sito.
- Supportare più linguaggi di programmazione moderniÈ stata aggiunta la compatibilità con linguaggi moderni come TypeScript, Kotlin e Dart, per un totale di 192 lingue e 80 temi di stile supportati.
- JS ufficiale nativo:Non c'è stata alcuna semplificazione, né sono state apportate modifiche al JS. Sono stati ottimizzati l'editor classico e l'editor a blocchi.
- Una migliore analisi grammaticaleÈ stata migliorata la capacità di riconoscere sintassi come JSX e i template di Vue.
- Riparazione della compatibilità\n: Risolti i potenziali problemi di compatibilità delle versioni precedenti.
Perché scegliere Highlightjs?
Tra i numerosi plugin per l'evidenziazione del codice di WordPress, Pure Highlightjs si distingue ancora per i suoi vantaggi unici:
- Design leggero: Non dipende da jQuery e ha un impatto minimo sulle prestazioni del sito web.
- Supporto nativo：Utilizzare direttamente i tag pre di WordPress, senza necessità di configurazioni complesse, a differenza di altri plug-in che richiedono l'uso di codici brevi del plug-in.
- Semplice e bello.Il formato predefinito è pulito e ordinato, adatto per documenti tecnici.
Demonstrazione del codice
Demo della barra di scorrimento del codice
La barra di scorrimento utilizza lo stile SimpleBar, compatibile con molti browser principali. È possibile testare l'effetto utilizzando diversi browser!
<?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";
?>
Demonstrazione del codice dell'editor classico.
L'editor classico consente di aggiungere codice per impostare l'altezza massima e visualizzare il pulsante di espansione/piegatura in base a tale altezza.
<?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";
?>
Demonstrazione del codice PHP
<?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();
?>Demonstrazione del codice CSS
/* 响应式卡片样式 */
.card {
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
background: #fff;
}
.card:hover {
transform: translateY(-5px);
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}Demonstrazione del codice JavaScript
// 异步获取数据示例
async function fetchUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('User data:', data);
return data;
} catch (error) {
console.error('Error fetching user data:', error);
}
}
// 使用示例
fetchUserData(123);Demonstrazione del codice del linguaggio GO
package main
import (
"fmt"
"net/http"
)
// 简单的HTTP服务器
func handler(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Hello, %s!", r.URL.Path[1:])
}
func main() {
http.HandleFunc("/", handler)
fmt.Println("Server starting on port 8080...")
http.ListenAndServe(":8080", nil)
}Demonstrazione del codice MySQL.
-- 创建用户表并查询示例
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- 插入数据
INSERT INTO users (username, email)
VALUES ('john_doe', '[email protected]');
-- 查询数据
SELECT * FROM users WHERE email LIKE '%@example.com';Demonstrazione del codice di Node.js
// Express.js 简单API示例
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/greet', (req, res) => {
const name = req.query.name || 'World';
res.json({ message: `Hello, ${name}!` });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});Demonstrazione del codice Python
# 使用Flask创建Web服务
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/square/<int:num>')
def square(num):
return jsonify({"result": num ** 2})
if __name__ == '__main__':
app.run(debug=True)
# 列表推导式示例
squares = [x**2 for x in range(10) if x % 2 == 0]
print(squares)Demonstrazione del codice C++
#include <iostream>
#include <vector>
#include <algorithm>
// 简单的C++程序示例
int main() {
std::vector<int> numbers = {5, 2, 8, 1, 9};
// 排序并输出
std::sort(numbers.begin(), numbers.end());
std::cout << "Sorted numbers: ";
for (int num : numbers) {
std::cout << num << " ";
}
std::cout << std::endl;
return 0;
}Demonstrazione del codice Java
// 简单的Java类和接口示例
public class Main {
public static void main(String[] args) {
Calculator calc = new BasicCalculator();
System.out.println("5 + 3 = " + calc.add(5, 3));
}
}
interface Calculator {
int add(int a, int b);
}
class BasicCalculator implements Calculator {
@Override
public int add(int a, int b) {
return a + b;
}
}Schermate della demo
Demonstrazione dietro le quinte
Demo dell'editor classico
Demo dell'editor di blocchi
Supporta 192 lingue.
80 temi di stile
Per gli autori di blog tecnici e i redattori di documentazione, uno strumento di evidenziazione del codice aggiornato e efficiente rimane una necessità. La rinascita di Pure Highlightjs potrebbe infondere nuova vita alla funzionalità di visualizzazione del codice di WordPress.
Italiano