Wprowadzenie do Pure Highlightjs
W ekosystemie WordPress podświetlanie kodu zawsze było ważną funkcją blogów technicznych i witryn dla programistów. Ostatnio wtyczka Pure Highlightjs, która od wielu lat była nieaktywna, doczekała się poważnej aktualizacji, w ramach której biblioteka Highlight.js została uaktualniona z przestarzałej wersji do najnowszej, v11.11.1.
Pobierz wtyczkę.
Czyste podświetlenie kodu w Highlightjs.
Nasza strona została zaktualizowana. v2.1.3 308 Następne pobranie.
Aktualizacja z dnia 22 sierpnia 2025 r.
Hasło:cloud Hasło do chmury zostało skopiowane!
Podświetlanie kodu w edytorach WordPress Classic i Block, obsługujące ponad 100 języków.
Należy pobrać plik, rozpakować go, a następnie przesłać folder Pure-Highlightjs do katalogu wtyczek. Po włączeniu wtyczki w panelu administracyjnym będzie ona gotowa do użycia!
Zapomniałem/am, zaktualizowałem.
Pure Highlightjs to lekki plugin do podświetlania kodu na platformie WordPress, który został wydany przez dewelopera icodechefa w 2016 roku i od tego czasu nie był aktualizowany. Wtyczka ta cieszyła się popularnością wśród wielu użytkowników WordPress ze względu na swoją prostotę i wydajność, ale z upływem czasu wbudowana wersja Highlight.js znacznie ustąpiła w stosunku do głównego standardu. Nie lubię skrótów w innych wtyczkach i preferuję wbudowany kod pre, dlatego... zaktualizowałem go, kładąc nacisk na natywny kod pre w WordPressie.
Chociaż ta wtyczka jest niewielka, doskonale spełnia moje potrzeby. Szkoda tylko, że nie była aktualizowana od wielu lat.Redaktor tej stronyPostanowiłem samodzielnie uaktualnić go do najnowszej wersji Highlight.js.
Ulepszenia wynikające z aktualizacji.
Ta aktualizacja do wersji 11.11.1 Highlight.js wprowadza szereg istotnych ulepszeń:
- Pasek narzędzi kodowania:Dodano nowe przyciski do rozwijania paska narzędzi, kopiowania i zaznaczania wszystkich elementów, a także wyświetlania ich w widoku pływającym, co sprawia, że cała operacja przebiega płynnie.
- Kliknij dwukrotnie, aby zaznaczyć wszystko:Dodano nową funkcję wybierania wszystkich elementów za pomocą dwukrotnego kliknięcia. Na komputerze wystarczy dwukrotnie kliknąć w obszar kodu, aby zaznaczyć cały kod.
- Wysokość bloku kodu:Maxymalna wysokość nowego bloku kodu. Dla długich fragmentów kodu można ustawić maksymalną wysokość, wówczas pojawią się paski przewijania zarówno w poziomie, jak i w pionie.
- Składanie i rozkładanie:Dodano nowy przycisk rozwijania. Gdy blok kodu zostanie powiększony, będzie można go rozwinąć i zwinąć.
- Modek ciemnyDodano tryb ciemny. Wtyczka umożliwia wybór motywu kodu na dzień i na noc, a gdy motyw WordPress ma włączony tryb ciemny, można go przełączyć, by sprawdzić efekt na tej stronie.
- Optymalizacja paska przewijania:Do wtyczki dodano pasek przewijania SimpleBar, który optymalizuje wygląd paska przewijania kodu i jest kompatybilny z głównymi przeglądarkami, a także można go użyć w całej witrynie.
- Wsparcie dla większej liczby nowoczesnych języków programowania.Dodano wsparcie dla nowoczesnych języków, takich jak TypeScript, Kotlin i Dart, co daje łącznie 192 obsługiwane języki i 80 motywów stylowych.
- Oryginalny oficjalny JavaScript:Nie dokonano żadnych usprawnień ani zmian w JS, ale zoptymalizowano klasyczny edytor i edytor bloków.
- Lepsza analiza gramatyki.Ulepszono rozpoznawanie składni takich jak JSX i szablony Vue.
- Naprawa kompatybilności.Rozwiązano potencjalny problem z kompatybilnością w starych wersjach.
Dlaczego wybrałeś Highlightjs?
Wśród wielu wtyczek do podświetlania kodu w WordPressie Pure Highlightjs wciąż zajmuje ważną pozycję ze względu na swoje wyjątkowe zalety:
- Lekka konstrukcja.Nie wymaga jQuery i ma znikomy wpływ na wydajność witryny.
- Wsparcie natywneMożesz bezpośrednio korzystać z tagów pre w WordPressie, bez żadnej skomplikowanej konfiguracji, w odróżnieniu od innych wtyczek, które wymagają użycia kodów skróconych wtyczki.
- Krótki i estetyczny.Domyślny styl jest schludny i przejrzysty, dzięki czemu nadaje się do dokumentacji technicznej.
Demonstracja kodu
Demonstracja paska przewijania kodu.
Pasek przewijania został wykonany w stylu SimpleBar i jest kompatybilny z wieloma popularnymi przeglądarkami. Możesz sprawdzić jego działanie w różnych przeglądarkach!
<?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";
?>
Demonstracja kodu klasycznego edytora.
W edytorze klasycznym można dodać kod, aby ustawić maksymalną wysokość i wyświetlić przycisk rozwijania/zwijania w zależności od tej wysokości.
<?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";
?>
Demonstracja kodu 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();
?>Demonstracja kodu 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%;
}
}Demonstracja kodu JavaScriptowego.
// 异步获取数据示例
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);Demonstracja kodu w języku 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)
}Demonstracja kodu 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';Demonstracja kodu w 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}`);
});Demonstracja kodu w Pythonie.
# 使用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)Demonstracja kodu w 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;
}Demonstracja kodu w Javie.
// 简单的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 prezentacji.
Prezentacja w tle
Demonstracja klasycznego edytora.
Demonstracja edytora bloków.
Wspiera 192 języki.
80 motywów stylowych.
Dla autorów blogów technicznych i twórców dokumentacji aktualne i wydajne narzędzie do podświetlania kodu jest nadal niezbędne. Nowa wersja Pure Highlightjs może tchnąć nowe życie w funkcję wyświetlania kodu w WordPress.
Polski