Pengenalan Highlightjs Tulen
Dalam ekosistem WordPress, penyorotan kod selalu merupakan fungsi penting untuk blog teknikal dan laman web pembangun. Baru-baru ini, plugin Pure Highlightjs, yang telah lama tidak aktif, akhirnya menerima kemaskini besar, dengan peningkatan bibliotek utamanya, Highlight.js, daripada versi lama kepada v11.11.1 yang terbaru.
Muat turun plugin
Highlighting kod Pure Highlightjs
Laman web ini telah ditingkatkan. v2.1.3 308 Muat turun seterusnya
Kemaskini 2025-08-22
Kata laluan:cloud Kata laluan Dropbox telah disalin!
Menggunakan kod penyorotan asli yang menyokong editor klasik WordPress dan editor blok, serta menyokong lebih daripada 100 bahasa.
Selepas memuat turun dan mengekstrak, muat naik folder Pure-Highlightjs ke direktori plugin, dan aktifkan di latar belakang!
Lupa, dikemaskini
Pure Highlightjs ialah plugin ringan untuk menyorot kod pada platform WordPress. Ia dilancarkan oleh pembangun iCodeChef pada tahun 2016, tetapi tidak dikemaskini lagi setelah itu. Plugin ini disukai oleh ramai pengguna WordPress kerana ciri-cirinya yang ringkas dan berkesan. Namun, dari masa ke masa, versi Highlight.js yang terbina dalamnya telah ketinggalan jauh berbanding dengan versi utama. Oleh kerana saya tidak suka kod pendek dalam plugin lain, saya lebih suka kod pre terbina dalamnya. Jadi... saya telah menaik tarafnya, dengan fokus utama pada kod pre asli WordPress.
Walaupun plugin ini kecil, namun ia memenuhi keperluan saya. Namun, saya melihat ia tidak dikemaskini selama bertahun-tahun.Editoren laman web iniMemutuskan untuk menaik tarafnya ke versi terbaru Highlight.js sendiri.
Perbaikan yang dibawa oleh peningkatan tersebut.
Peningkatan ke versi Highlight.js 11.11.1 ini membawa beberapa peningkatan penting:
- Bar alat kod:Bar alat baharu memaparkan butang-butang untuk membuka, menyalin, dan memilih semua, dan ia mengambang di dalam skrin, sangat lancar.
- Klik dua kali untuk memilih semua:Tambah pilihan untuk mengklik dua kali untuk memilih semua, dan dalam kawasan kod pada komputer, mengklik dua kali boleh memilih semua kod.
- Ketinggian blok kod:Maksimum ketinggian blok kod baharu, sejumlah besar kod segmen panjang boleh ditetapkan dengan ketinggian maksimum, dan akan mempunyai bar gulir pada kedua-dua arah, horizontal dan vertikal.
- Lipat dan buka:Tambahkan butang pembukaan baru, apabila blok kod ditambahkan dengan ketinggian, ia boleh diperluas dan disembunyikan.
- Mode gelap: Mod gelap baru, plugin boleh memilih gaya tema kod siang dan malam, apabila tema WordPress mempunyai mod gelap, ia boleh ditukar, dan anda boleh mengalami kesan laman web ini.
- Mengoptimumkan bar gulir:Plugin ini menambahkan bar gulir SimpleBar, mengoptimumkan gaya bar gulir kod, dan kompatibel dengan pelayar utama. Ia juga boleh digunakan untuk seluruh laman web.
- Mengsupport lebih banyak bahasa pengaturcaraan moden.: Sokongan untuk bahasa moden seperti TypeScript, Kotlin, Dart telah ditambahkan, dengan jumlah keseluruhan ialah 192 bahasa dan 80 tema gaya.
- JS rasmi asli:Tiada penyederhanaan, juga tiada perubahan pada JS. Pengoptimuman telah dilakukan pada editor klasik dan editor blok.
- Analisis tatabahasa yang lebih baik.: Meningkatkan pengiktirafan sintaks seperti JSX, templat Vue, dan lain-lain.
- Pembaikan keserasianMenyelesaikan masalah keserasian yang berpotensi dalam versi lama.
Mengapa memilih Highlightjs?
Di antara pelbagai plugin penyorotan kod WordPress, Pure Highlightjs masih memegang tempatnya disebabkan kelebihan uniknya:
- Reka bentuk yang ringan.: Tidak bergantung pada jQuery, dan ia mempunyai kesan yang sangat kecil terhadap prestasi laman web.
- Sokongan asli：Gunakan tag pre WordPress secara langsung, tanpa konfigurasi yang rumit, tidak seperti plugin lain yang memerlukan kod pendek plugin.
- Simpel dan cantik.Gaya lalai adalah bersih dan rapi, sesuai untuk dokumen teknikal.
Demonstrasi kod
Demonstrasi penggulungan kod
Bar gulir menggunakan gaya bar gulir Simplebar, yang serasi dengan pelbagai pelayar utama. Anda boleh menguji kesan ini dengan menggunakan pelbagai pelayar!
<?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";
?>
Demonstrasi kod editor klasik.
Pengedit klasik menambahkan kod yang membolehkan anda menetapkan ketinggian maksimum, dan memaparkan butang runtuh/buka berdasarkan ketinggian tersebut.
<?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";
?>
Demonstrasi kod 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();
?>Demonstrasi kod 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%;
}
}Demonstrasi kod 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);Demonstrasi kod bahasa 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)
}Demonstrasi kod 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';Demonstrasi kod 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}`);
});Demonstrasi kod 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)Demonstrasi kod 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;
}Demonstrasi kod 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;
}
}Gambar-gambar demonstrasi
Demonstrasi di belakang pentas.
Demonstrasi editor klasik.
Demonstrasi editor blok
Menyokong 192 bahasa.
80 tema gaya
Bagi penulis blog teknikal dan penyusun dokumen, alat penyorotan kod yang dikemaskini dan berfungsi dengan cekap tetap menjadi keperluan. Kebangkitan Pure Highlightjs ini mungkin membawa kesegaran baru kepada fungsi paparan kod dalam WordPress.
Bahasa Melayu