Introduction à Pure Highlightjs
Dans l'écosystème WordPress, la mise en évidence du code a toujours été une fonctionnalité importante pour les blogs technologiques et les sites de développeurs. Récemment, le plugin Pure Highlightjs, qui était en sommeil depuis des années, a finalement reçu une mise à jour majeure, mettant à niveau sa bibliothèque Highlight.js d'une version obsolète à la dernière v11.11.1.
Téléchargement du plug-in
Pure Highlightjs Code Highlighting
Mise à jour du site v2.1.3 308 sous-téléchargement
2025-08-22 Mise à jour
Mot de passe :cloud Le mot de passe du netbook a été copié !
Prise en charge de la mise en évidence du code pour l'éditeur classique et l'éditeur de blocs de WordPress dans des centaines de langues
Téléchargez et décompressez le dossier Pure-Highlightjs et téléchargez-le dans le répertoire du plugin pour l'activer dans le backend !
Oubliés, mis à jour
Pure Highlightjs est un plugin de surlignage de code léger pour la plateforme WordPress qui a été publié par le développeur icodechef en 2016, puis a cessé d'être mis à jour. Le plugin a été favorisé par de nombreux utilisateurs de WordPress pour sa simplicité et son efficacité, mais au fil du temps, sa version intégrée de Highlight.js est tombée sérieusement derrière le courant dominant, car je n'aime pas les autres shortcodes du plugin et préfère le pré intégré, alors.... Je l'ai mis à jour pour me concentrer sur le pré-code natif de WordPress.
Ce plugin est petit mais répond parfaitement à mes besoins, "Comme il n'a pas été mis à jour depuis des années, l'interface de l'utilisateur n'a pas été modifiée.Rédacteur du siteJ'ai décidé de le mettre à jour avec la dernière version de Highlight.js.
Améliorations résultant de la mise à niveau
Cette mise à jour vers la version 11.11.1 de Highlight.js apporte plusieurs améliorations importantes :
- Barre d'outils du code :Nouveaux boutons de la barre d'outils pour développer, copier et sélectionner tout, avec affichage flottant dans la fenêtre de visualisation, très fluide !
- Double-cliquez pour tout sélectionner :Nouveau double clic sélectionner tout, double clic dans la zone de code de l'ordinateur pour sélectionner tout le code
- Hauteur du bloc de code :Nouvelle hauteur maximale du bloc de code, un grand nombre de codes longs peuvent être fixés à une hauteur maximale, une barre de défilement horizontale et verticale apparaîtra.
- Plier pour déplier :Nouveau bouton "Expand" pour développer et réduire le bloc de code lorsqu'il ajoute une hauteur
- Mode sombreLes thèmes WordPress avec le mode sombre peuvent être changés, vous pouvez expérimenter l'effet de ce site !
- Optimiser les barres de défilement :Le plugin ajoute une barre de défilement simple pour optimiser le style de la barre de défilement du code, qui est compatible avec les principaux navigateurs et peut également être utilisée pour l'ensemble du site.
- Prise en charge de langages de programmation plus modernesSupport pour les langages modernes tels que TypeScript, Kotlin, Dart, etc., avec un total de 192 langages et 80 styles de thèmes.
- JS officiel natif :Pas de rationalisation, pas de changement de JS, éditeur classique et éditeur de blocs optimisés
- Meilleure analyse grammaticaleAmélioration de la reconnaissance des syntaxes telles que JSX, Vue templates, etc.
- Corrections de compatibilitéRésolution de problèmes potentiels de compatibilité avec les anciennes versions
Pourquoi Highlightjs ?
Parmi les nombreux plugins WordPress de mise en évidence du code, Pure Highlightjs a toujours sa place en raison de ses avantages uniques :
- Conception légèrePas de dépendance à l'égard de jQuery, impact minimal sur les performances du site.
- support natif: utilise directement les balises WordPress, sans configuration complexe, et ne nécessite pas de shortcode comme d'autres plugins.
- simple et beauLe style par défaut est propre et net, adapté à la documentation technique.
Code Demo
Code Scrollbar Demo
Barre de défilement avec style de barre de défilement simple, compatible avec une variété de navigateurs courants, vous pouvez tester avec un certain nombre de navigateurs différents pour voir l'effet !
<?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";
?>
Démonstration du code de l'éditeur classique
L'éditeur classique ajoute un code pour définir la hauteur maximale, en fonction de la hauteur de l'affichage du bouton d'expansion et de réduction.
<?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";
?>
Démonstration du code 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();
?>Démonstration du code 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%;
}
}Démonstration du code 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);Démonstration du code langue 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)
}Démonstration du code 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';Démonstration de code 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}`);
});Démonstration du code 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)Démonstration du code 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;
}Démonstration du code 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;
}
}Captures d'écran de la démo
Démonstration en coulisses
Démonstration de l'éditeur classique
Démonstration de l'éditeur de blocs
Prise en charge de 192 langues
80 thèmes de style
Pour les blogueurs techniques et les rédacteurs de documents, un outil de mise en évidence du code actualisé et efficace est toujours nécessaire, et cette renaissance de Pure Highlightjs pourrait donner une nouvelle vie aux capacités de présentation du code de WordPress.
Français