Introducción a Pure Highlightjs
En el ecosistema de WordPress, el resaltado de código siempre ha sido una característica importante para los blogs de tecnología y los sitios de desarrolladores. Recientemente, el plugin Pure Highlightjs, que ha permanecido inactivo durante años, ha recibido por fin una importante actualización, que ha pasado de una versión obsoleta de la biblioteca Highlight.js a la última v11.11.1.
Descarga de plug-ins
Pure Highlightjs Resaltado de código
Actualización del sitio v2.1.3 308 subdescarga
2025-08-22 Actualización
Contraseña:cloud La contraseña del netbook ha sido copiada.
Soporte nativo de resaltado de código para el editor clásico de WordPress y el editor de bloques en cientos de idiomas.
Descarga y descomprime la carpeta Pure-Highlightjs y súbela al directorio de plugins para activarla en el backend.
Olvidado, actualizado
Pure Highlightjs es un plugin ligero de resaltado de código para la plataforma WordPress que fue lanzado por el desarrollador icodechef en 2016 y luego dejó de actualizarse. El plugin fue favorecido por muchos usuarios de WordPress por su simplicidad y eficiencia, pero con el tiempo, su versión incorporada de Highlight.js ha caído seriamente detrás de la corriente principal, ya que no me gustan los otros shortcodes del plugin y prefiero el pre incorporado, así que.... Lo actualicé para centrarme en el código pre nativo de WordPress.
Este plugin es pequeño pero justo para mis necesidades, "Viendo que no se ha actualizado en años, laEditor del sitioDecidí actualizarlo a la última versión de Highlight.js.
Mejoras resultantes de la actualización
Esta actualización a la versión 11.11.1 de Highlight.js aporta varias mejoras importantes:
- Barra de códigos:Nueva barra de herramientas para expandir, copiar y seleccionar todos los botones con visualización flotante en la ventana gráfica, ¡muy fluida!
- Haga doble clic para seleccionar todo:Nuevo doble clic seleccionar todo, doble clic en el área de código de la computadora puede seleccionar todo el código
- Altura del bloque de código:Nuevo bloque de código de altura máxima, un gran número de código largo se puede establecer una altura máxima, horizontal y vertical tendrá una barra de desplazamiento
- Doblar para desplegar:Nuevo botón de expansión para expandir y contraer el bloque de código cuando añade altura
- Modo oscuro¡: nuevo modo oscuro, plug-ins puede elegir el día y la noche de código de estilo del tema, temas de WordPress tienen el modo oscuro se puede cambiar, usted puede experimentar el efecto de este sitio!
- Optimizar las barras de desplazamiento:El plugin añade una barra de desplazamiento simplebar para optimizar el estilo de la barra de desplazamiento del código, que es compatible con los principales navegadores y también se puede utilizar para todo el sitio web.
- Compatibilidad con lenguajes de programación más modernos: Añadido soporte para lenguajes modernos como TypeScript, Kotlin, Dart, etc., con un total de 192 lenguajes y 80 estilos de temas.
- JS oficial nativo:Sin racionalización, sin cambios en JS, editor clásico optimizado y editor de bloques
- Mejor análisis gramatical: Reconocimiento mejorado de sintaxis como JSX, plantillas Vue, etc.
- Correcciones de compatibilidad: Resueltos posibles problemas de compatibilidad en versiones anteriores
¿Por qué Highlightjs?
Entre los muchos plugins de resaltado de código de WordPress, Pure Highlightjs todavía tiene un lugar debido a sus ventajas únicas:
- Diseño ligerosin dependencia de jQuery, impacto mínimo en el rendimiento del sitio web
- soporte nativoutiliza directamente las preetiquetas de WordPress, sin configuraciones complejas, y no requiere un shortcode como otros plugins.
- sencillo y bonitoEl estilo por defecto es limpio y nítido, adecuado para la documentación técnica.
Código Demo
Demo de la barra de desplazamiento de código
Barra de desplazamiento con estilo de barra de desplazamiento simplebar, compatible con una gran variedad de navegadores principales, ¡puede probar con varios navegadores diferentes para ver el efecto!
<?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";
?>
Demostración del código del editor clásico
Editor clásico añadir código para establecer la altura máxima, de acuerdo con la altura de la pantalla de expansión botón de colapso
<?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";
?>
Demostración de código 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();
?>Demostración de código 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%;
}
}Demostración de código 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);Demostración del código de lenguaje 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)
}Demostración de código 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';Demostración de código 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}`);
});Demostración de código 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)Demostración de código 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;
}Demostración de código 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;
}
}Capturas de pantalla de la demo
Demostración entre bastidores
Demo del editor clásico
Demostración del editor de bloques
Soporte para 192 idiomas
80 temas de estilo
Los blogueros técnicos y los redactores de documentos siguen demandando una herramienta de resaltado de código actualizada y eficaz, y este renacimiento de Pure Highlightjs puede dar nueva vida a las capacidades de presentación de código de WordPress.
Español