Homepage/Blog/WordPress/De details van de inhoud

Introductie van Pure Highlightjs

In het WordPress-ecosysteem is code-highlighting altijd een belangrijke functie geweest voor technische blogs en ontwikkelaarssites. Onlangs is er eindelijk een grote update uitgebracht voor de Pure Highlightjs-plug-in, die al jaren niet is bijgewerkt. Hierdoor wordt de kernbibliotheek Highlight.js bijgewerkt van een verouderde versie naar de nieuwste versie (v11.11.1).

Plug-in downloaden

Zuivere Highlightjs-codehighlighting

Zuivere Highlightjs-codehighlighting

Deze site is bijgewerkt. \nv2.1.3
308 De volgende download
2025-08-22 update
Wachtwoord:cloud Het wachtwoord van de cloudopslag is gekopieerd!
Ondersteuning voor native code-highlighting in de klassieke WordPress-editor en de block-editor, met ondersteuning voor meer dan 100 talen.
BlueStacks Cloud Connect Bekijk de tutorial

Download en decomprimeer het Pure-Highlightjs-bestand, upload het naar de plug-inmap en activeer het in de backend!

Vergeten, bijgewerkt

Pure Highlightjs is een lichtgewicht plug-in voor code-highlighting op het WordPress-platform. De ontwikkelaar iCodeChef stopte in 2016 met het updaten van de plug-in. De plug-in werd door veel WordPress-gebruikers gewaardeerd vanwege de eenvoud en efficiëntie, maar na verloop van tijd liep de ingebouwde versie van Highlight.js ernstig achter op de reguliere versie. Omdat ik niet van de shortcodes van andere plug-ins houd, maar de ingebouwde pre-code prefereer, heb ik de plug-in geüpgraded. De nadruk ligt hierbij op de originele pre-code van WordPress.

Deze plug-in is weliswaar klein, maar voldoet precies aan mijn behoeften. Ik zie echter dat deze al jaren niet is bijgewerkt.De redacteur van deze websiteIk besloot het zelf te doen en de software te upgraden naar de nieuwste versie van Highlight.js.

De verbeteringen die de upgrade met zich meebrengt

Deze upgrade naar versie 11.11.1 van Highlight.js levert een aantal belangrijke verbeteringen op:

  1. De codetoolbar:Er zijn nieuwe knoppen voor het uitklappen van de werkbalk, kopiëren en alles selecteren toegevoegd, die soepel in de viewport worden weergegeven.
  2. Tweemaal klikken om alles te selecteren:De nieuwe functie voor het selecteren van alle tekst met een dubbelklik: als je op een computer op een codegebied dubbelklikt, wordt de hele code geselecteerd.
  3. Hoogte van de codeblokken:De maximale hoogte van nieuwe codeblokken. Voor lange stukken code kan een maximale hoogte worden ingesteld, zodat er zowel horizontaal als verticaal scrollbars worden weergegeven.
  4. Inklappen en uitklappen:Er is een nieuwe uitklapknop toegevoegd. Als je hoogte toevoegt aan de codeblokken, kun je deze uitklappen en verbergen.
  5. Dark ModeEr is een nieuwe donkere modus toegevoegd. Voor plug-ins kun je dag- en nachtthema's kiezen. Als een WordPress-thema een donkere modus heeft, kun je hier tussen schakelen en het effect op deze site ervaren.
  6. De scrollbalk optimaliseren:De SimpleBar-scrollbalk is toegevoegd aan de plug-in, waardoor de stijl van de code-scrollbalk is geoptimaliseerd en deze compatibel is met de meest gebruikte browsers. Bovendien kan deze voor de hele website worden gebruikt.
  7. Ondersteuning voor meer moderne programmeertalen.Er is ondersteuning toegevoegd voor moderne talen zoals TypeScript, Kotlin en Dart. In totaal worden er 192 talen en 80 stijlthema's ondersteund.
  8. De originele officiële JavaScript:Er is niets gestroomlijnd en er zijn geen wijzigingen in JS doorgevoerd. De klassieke editor en de blokeditor zijn geoptimaliseerd.
  9. Een betere grammaticale analyse.Het herkennen van syntaxen zoals JSX en Vue-sjablonen is verbeterd.
  10. ​CompatibiliteitsreparatieDe potentiële compatibiliteitsproblemen in eerdere versies zijn opgelost.

Waarom heb je gekozen voor Highlightjs?

Onder de vele plug-ins voor code-highlighting in WordPress, heeft Pure Highlightjs nog steeds een vooraanstaande positie, vanwege de unieke voordelen die het biedt:

  • ​Een lichtgewicht ontwerp.: Het heeft geen invloed op de prestaties van de website en er is geen jQuery voor nodig.
  • ​Ingebouwde ondersteuningDirect gebruikmaken van de 
    -tags van WordPress, zonder complexe configuratie, en in tegenstelling tot andere plug-ins waarbij je de korte codes van de plug-in moet gebruiken.
  • ​Eenvoudig en mooi.De standaardstijl is netjes en overzichtelijk, en is geschikt voor technische documenten.

Code demonstratie

Demonstratie van de scrollbalk voor code

De schuifbalk maakt gebruik van de SimpleBar-schuifbalkstijl en is compatibel met verschillende populaire browsers. Je kunt het effect testen in meerdere browsers!

<?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";
?>

Demonstratie van de code van de klassieke editor

Met de klassieke editor kun je de maximale hoogte instellen en de uitklapbare knoppen weergeven op basis van deze hoogte.

<?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";
?>

Een demonstratie van PHP-code

<?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();
?>

Demonstratie van CSS-code

/* 响应式卡片样式 */
.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%;
    }
}

Demo van de JavaScript-code

// 异步获取数据示例
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);

Een demonstratie van de GO-taalcode

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)
}

Demonstratie van de MySQL-code

-- 创建用户表并查询示例
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';

Een demonstratie van de Node.js-code

// 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}`);
});

Demonstratie van Python-code

# 使用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)

Demonstratie van de C++-code

#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;
}

De Java-code wordt gedemonstreerd.

// 简单的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;
    }
}

Schermafbeeldingen van de demo

Een demonstratie achter de schermen.

Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
Het toevoegen van een dag- en nachtmodus is ook een thema dat op deze website wordt gebruikt.

Demonstratie van de klassieke editor

Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
De klassieke editor voegt code toe en stelt de maximale hoogte van de codeblokken in.
Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
Het gebruiken van de originele WordPress-prestatieopties.

Demonstratie van de blokeditor

Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
De blokeditor maakt gebruik van ingebouwde codeblokken.

Ondersteuning voor 192 talen.

Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
De plug-in ondersteunt 192 talen.

80 stijlthema's

Grote update van de originele WordPress-plug-in voor code-highlighting, Pure Highlightjs: upgrade naar versie 11.11.1 van Highlight.js - LikaCloud
Het thema bevat 80 standaardthema's, waaronder dag- en nachtmodi.

Voor technische bloggers en docenten is een actuele en efficiënte code-highlightingtool nog steeds een absolute noodzaak. De hernieuwde versie van Pure Highlightjs zou wel eens een nieuwe impuls kunnen geven aan de code-weergavefunctie van WordPress.

Het document met de instellingen van de plug-in

De achtergrondinstellingen van de WordPress-codehighlighting-plug-in Pure Highlightjs worden uitgelegd in de helpdocumentatie.

De achtergrondinstellingen van de WordPress-codehighlighting-plug-in Pure Highlightjs worden uitgelegd in de helpdocumentatie.

Een handleiding voor de achtergrondinstellingen van de WordPress-codehighlightplug-in Pure Highlight, inclusief documentatie over thema's, scrollbalkkleuren, werkbalkinstellingen en codeblokinstellingen. Bekijk het originele artikel.
Labels: