Představení Pure Highlightjs
V ekosystému WordPressu je zvýrazňování kódu vždy důležitou funkcí technických blogů a webových stránek pro vývojáře. Nedávno byl po mnoha letech ticha konečně vydán významný update pluginu Pure Highlightjs, který aktualizoval jeho klíčovou knihovnu Highlight.js ze zastaralé verze na nejnovější verzi v11.11.1.
Stáhněte si plugin.
Čisté zvýraznění kódu pomocí Highlight.js.
Tato stránka byla aktualizována. v2.1.3 310 Následující stažení
Aktualizace 2025-08-22
Heslo:cloud Heslo pro cloudové úložiště bylo zkopírováno!
Podpora zvýraznění kódu v nativním rozhraní klasického a blokového editoru WordPressu, podpora více než 100 jazyků.
Stáhněte si soubor, rozbalte jej a nahrátte složku Pure-Highlightjs do adresáře pluginů. Poté ji lze aktivovat v administrátorském rozhraní!
Zapomněl jsem/a na to, aktualizoval jsem to.
Pure Highlightjs je lehký plugin pro zvýrazňování kódu na platformě WordPress, který byl vydán vývojářem iCodeChef v roce 2016 a od té doby již nebyl aktualizován. Tento plugin si získal přízeň mnoha uživatelů WordPressu díky své jednoduchosti a efektivnosti, ale postupem času jeho vestavěná verze Highlight.js významně zaostala za hlavním proudem. Protože nemám rád zkratky jiných pluginů a preferuji vestavěný kód pre, aktualizoval jsem ho a zaměřil se na nativní kód pre WordPressu.
Ačkoliv je tento plugin malý, naprosto vyhovuje mým potřebám. Je ale škoda, že nebyl aktualizován již několik let.Editorka tohoto webuRozhodl jsem se aktualizovat Highlight.js na nejnovější verzi sám.
Zlepšení vyplývající z aktualizace.
Tato aktualizace na verzi Highlight.js 11.11.1 přináší řadu důležitých vylepšení:
- Barva nástrojové lišty kódu:Přidány nové tlačítka pro rozbalení, kopírování a výběr všeho, která se zobrazují hladce uvnitř zobrazovací oblasti a mohou být přesunuty.
- Dvakrát klikněte na „Vybrat vše“:Nová funkce pro výběr celého textu jedním dvojitým kliknutím. Pokud na počítači dvakrát kliknete na oblast kódu, celý kód se vybere.
- Výška kódu:Maximální výška nového kódu. Pro velké dlouhé kusy kódu lze nastavit maximální výšku, přičemž budou k dispozici rolovací lišty jak ve vodorovném, tak i ve svislém směru.
- Zavření a otevření:Přidána nová tlačítka pro rozbalení. Když je kódovému bloku přidána výška, lze jej rozbalit a sbalit.
- Tmavý režimPřidán byl nový tmavý režim. V pluginech lze vybrat denní a noční styly kódu. Pokud má WordPress téma tmavý režim, lze jej přepnout a vyzkoušet efekty na této stránce.
- Optimalizace posuvníků:Do pluginu byl přidán rolovací panel SimpleBar, který optimalizuje styl rolovacího panelu kódu a je kompatibilní s hlavními prohlížeči. Lze jej také použít na celém webu.
- Podpora více moderních programovacích jazyků.Byla přidána podpora pro moderní jazyky, jako jsou TypeScript, Kotlin a Dart, a celkově je nyní podporováno 192 jazyků a 80 stylových témat.
- Původní oficiální JavaScript:Nedošlo k žádnému zjednodušení ani změnám v JS, ale optimalizovali jsme klasický editor a editor bloků.
- Lépe analyzovaná gramatika.Zlepšila se identifikace syntaxe JSX, šablon Vue a podobně.
- Oprava kompatibilityVyřešeny byly potenciální problémy s kompatibilitou ve starších verzích.
Proč jste si vybrali Highlightjs?
Mezi mnoha pluginy pro zvýrazňování kódu ve WordPressu si Pure Highlightjs stále udržuje své místo díky svým jedinečným výhodám:
- Lehká konstrukce.Není závislý na jQuery, má jen malý dopad na výkonnost webových stránek.
- Původní podpora：Přímé použití tagů
v WordPressu nevyžaduje komplexní konfiguraci a na rozdíl od jiných pluginů nevyžaduje použití zkratek pluginu.
- Jasné a přehlednéVýchozí styl je čistý a přehledný, vhodný pro technickou dokumentaci.
Demonstrace kódu
Demonstrace posuvníku kódu.
Pokud jde o posuvník, použil jsem styl SimpleBar, který je kompatibilní s mnoha populárními prohlížeči. Můžete si ho vyzkoušet v různých prohlížečích a podívat se na efekt!
<?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";
?>
Demonstrace kódu klasického editoru.
Klasický editor umožňuje přidat kód, který nastaví maximální výšku, a podle této výšky se zobrazí tlačítko pro rozbalení/zavření.
<?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";
?>
Demonstrace kódu 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();
?>Demonstrace kódu 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%;
}
}Demonstrace kódu JavaScriptu
// 异步获取数据示例
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);Demonstrace kódu v jazyce 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)
}Demonstrace kódu 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';Demonstrace kódu v 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}`);
});Demonstrace kódu v Pythonu
# 使用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)Demonstrace kódu v 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;
}Demonstrace kódu v Javě
// 简单的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;
}
}Screenshoty z prezentace
Demonstrace v pozadí.
Demonstrace klasického editoru.
Demonstrace editoru bloků
Podporuje 192 jazyků.
80 stylových témat
Pro autory technických blogů a tvůrce dokumentů je stále nezbytností mít aktuální a efektivní nástroj pro zvýrazňování kódu. Tato obnovená verze Pure Highlightjs může do funkce zobrazování kódu v WordPressu vnést novou energii.
Čeština