Опис Pure Highlightjs
У екосистемі WordPress підсвічування коду завжди було важливою функцією для технічних блогів і веб-сайтів розробників. Нещодавно плагін Pure Highlightjs, який довгий час не оновлювався, нарешті отримав значне оновлення, в результаті чого його основна бібліотека Highlight.js була оновлена з застарілої версії до найновішої v11.11.1.
Завантаження плагіна.
Чисте виділення коду за допомогою Highlightjs.
Цей сайт оновлено. \nv2.1.3 308 Наступне завантаження
Оновлення 2025-08-22
Пароль:cloud Пароль для хмарового сховища скопійовано!
Підтримка виділення коду в класичному редакторі WordPress і редакторі блоків, а також підтримка 100 мов.
Завантажте та розпакуйте файл Pure-Highlightjs, після чого завантажте папку до каталогу плагінів і активуйте її в адмінпанелі!
Забув, оновив.
Pure Highlightjs — це легкий плагін для виділення коду на платформі WordPress, який був випущений розробником iicodechef у 2016 році, але оновлення якого було припинено. Цей плагін завоював популярність серед багатьох користувачів WordPress завдяки своїй простоті та ефективності, але з часом його вбудована версія Highlight.js сильно відстала від основної. Оскільки мені не подобаються короткі коди інших плагінів, і я віддаю перевагу вбудованому пре-коду, я оновив його, зосереджуючись на стандартному пре-коді WordPress.
Цей плагін, хоч і невеликий, але повністю відповідає моїм потребам. Проте, мені здається, що він не оновлювався вже багато років.Редактор цього сайтуЯ вирішив самостійно оновити його до останньої версії Highlight.js.
Покращення, викликані оновленням.
Це оновлення до версії Highlight.js 11.11.1 принесло кілька важливих поліпшень:
- Панель інструментів кодування:Додано нові кнопки розгортання панелі інструментів, копіювання та виділення всього, які відображаються у віконному режимі та працюють дуже плавно.
- Двічі клацніть, щоб вибрати все:Додано функцію виділення всього тексту подвійним кліком. Натискання на область коду на комп'ютері двічі дозволить виділити весь код.
- Висота блоку коду:Максимальна висота нових блоків коду. Для великих довгих фрагментів коду можна встановити максимальну висоту, і в цьому випадку смужки прокрутки будуть як по горизонталі, так і по вертикалі.
- Згортання та розгортання:Додано нову кнопку розгортання. Коли блок коду додає висоту, його можна розгорнути та згорнути.
- Темний режимДодано темний режим. Плагін дозволяє вибирати теми коду для дня та ночі. Коли тема WordPress має темний режим, його можна увімкнути, щоб побачити ефект на цьому сайті.
- Оптимізація скрол-бара:До плагіна додано смужку прокрутки SimpleBar, яка оптимізує стиль смужки прокрутки коду, сумісна з основними браузерами і може використовуватися на всьому сайті.
- Підтримка більшої кількості сучасних мов програмування.Додано підтримку сучасних мов, таких як TypeScript, Kotlin, Dart тощо. Загалом підтримується 192 мови та 80 стильових тем.
- Оригінальний офіційний JavaScript:Не було ніякої оптимізації, і не було зроблено ніяких змін в JS. Оптимізовано класичний редактор і редактор блоків.
- Кращий аналіз граматики.Відображення синтаксису JSX, Vue-шаблонів тощо було покращено.
- Відображення несумісності та її виправлення.Вирішено потенційні проблеми сумісності у старих версіях.
Чому обрали Highlightjs?
Серед безлічі плагінів для виділення коду в WordPress, Pure Highlightjs все ще займає свою нішу завдяки своїм унікальним перевагам:
- Легкий дизайн.Не залежить від jQuery, має мінімальний вплив на продуктивність веб-сайту.
- Вбудована підтримка.Використовуйте теги
у WordPress без складної конфігурації, на відміну від інших плагінів, які вимагають використання коротких кодів плагіна.
- Просте та красиве.Стандартний стиль чистий і лаконічний, підходить для технічної документації.
Демонстрація коду
Демонстрація скролінгу коду.
Смужка прокрутки використовує стиль прокрутки SimpleBar, сумісний з багатьма популярними браузерами. Ви можете перевірити результат, використавши різні браузери!
<?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";
?>
Демонстрація коду класичного редактора.
Класичний редактор додає код, який дозволяє встановити максимальну висоту, і відображає кнопки розгортання/згортання відповідно до цієї висоти.
<?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";
?>
Демонстрація коду 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();
?>Демонстрація коду 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%;
}
}Демонстрація коду 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);Демонстрація коду мовою 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)
}Демонстрація коду 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';Демонстрація коду 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}`);
});Демонстрація коду на 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)Демонстрація коду на 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;
}Демонстрація коду на 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;
}
}Скріншоти презентації.
Демонстрація за лаштунками
Демонстрація класичного редактора.
Демонстрація редактора блоків.
Підтримує 192 мови.
80 тем стилю
Для авторів технічних блогів і розробників документації своєчасний і ефективний інструмент виділення коду залишається необхідним. Оновлення Pure Highlightjs може надати новий імпульс функції відображення коду в WordPress.
Українська