Pengantar Highlight.js Murni
Di ekosistem WordPress, penyorotan kode selalu menjadi fitur penting untuk blog teknis dan situs web pengembang. Baru-baru ini, plugin Pure Highlightjs yang telah lama tidak aktif akhirnya mendapat pembaruan besar, dengan peningkatan library Highlight.js intinya dari versi usang ke v11.11.1 terbaru.
Unduh plugin.
Highlighting kode menggunakan Highlightjs murni.
Situs ini sedang diupgrade. \nv2.1.3 308 Unduh berikutnya
Pembaruan 2025-08-22
Kata sandi:cloud Kata sandi penyimpanan online telah disalin!
Menyediakan penyorotan kode asli untuk editor klasik dan editor blok WordPress, serta mendukung lebih dari 100 bahasa.
Unduh, ekstrak, lalu unggah folder Pure-Highlightjs ke direktori plugin. Setelah itu, aktifkan di bagian backend!
Lupa, diperbarui.
Highlightjs Murni adalah plugin penyorotan kode ringan di platform WordPress. Plugin ini dirilis oleh pengembang iCodeChef pada tahun 2016, tetapi tidak lagi diperbarui. Plugin ini disukai oleh banyak pengguna WordPress karena fiturnya yang sederhana dan efisien. Namun, seiring waktu, versi Highlight.js yang terintegrasi telah sangat tertinggal dari versi utama. Karena saya tidak suka kode pendek dari plugin lain, saya lebih suka pre yang terintegrasi. Jadi... saya memutakhirkannya, dengan fokus pada kode pre asli WordPress.
Meskipun plugin ini kecil, tetapi tepat sesuai dengan kebutuhan saya. "Melihat itu tidak diperbarui selama bertahun-tahun,Editor situs iniMemutuskan untuk mengupgrade sendiri ke versi terbaru dari Highlight.js.
Perbaikan yang dibawa oleh peningkatan tersebut.
Peningkatan ke versi Highlight.js 11.11.1 ini membawa sejumlah perbaikan penting:
- Bar alat kode:Menambahkan tombol untuk memperluas toolbar, menyalin, dan memilih semua, serta menampilkannya secara mengambang di dalam viewport, sangat halus.
- Klik dua kali untuk memilih semua:Tambahkan fitur pilih semua dengan mengklik dua kali. Di area kode pada komputer, Anda bisa mengklik dua kali untuk memilih semua kode.
- Tinggi blok kode:Menambahkan batasan ketinggian maksimum untuk blok kode. Kode yang sangat panjang dapat diberi batasan ketinggian maksimum, dan akan memicu munculnya bilah gulir baik secara horizontal maupun vertikal.
- Lipat dan buka:Menambahkan tombol ekspansi, ketika blok kode ditambahkan dengan ketinggian, maka blok tersebut dapat diperluas dan dikontrak.
- Mode Gelap: Mode gelap baru, plugin dapat memilih tema kode siang dan malam, dan tema WordPress dengan mode gelap dapat diganti, sehingga Anda dapat mengalami efeknya di situs ini.
- Mengoptimalkan bilah gulir:Plugin ini menambahkan bilah gulir SimpleBar, mengoptimalkan gaya bilah gulir kode, kompatibel dengan browser utama, dan juga dapat digunakan di seluruh situs.
- Mendukung lebih banyak bahasa pemrograman modern.: Dukungan untuk bahasa modern seperti TypeScript, Kotlin, Dart, dan lainnya telah ditambahkan, dengan total dukungan untuk 192 bahasa dan 80 tema gaya.
- JS resmi asli:Tidak ada perampingan, juga tidak ada perubahan pada JS. Editor klasik dan editor blok telah dioptimalkan.
- Analisis tata bahasa yang lebih baik.\n：Meningkatkan pengenalan sintaks seperti JSX dan template Vue.
- Perbaikan kompatibilitas.\n: Memecahkan masalah kompatibilitas potensial pada versi lama.
Mengapa memilih Highlightjs?
Di antara banyak plugin penyorotan kode WordPress, Pure Highlightjs masih memegang tempat khusus karena keunggulan uniknya:
- Desain yang ringan.: Tidak bergantung pada jQuery, dan hanya memiliki dampak minimal terhadap kinerja situs web.
- Dukungan asli.：直接使用WordPress的pre标签，无需复杂配置，并不像其他插件一样需要用插件的简码
- Simpel dan indah.: Gaya defaultnya bersih dan rapi, cocok untuk dokumen teknis.
Demonstrasi kode
Demonstrasi pengguliran kode.
Bar gulir menggunakan gaya bar gulir Simplebar, yang kompatibel dengan berbagai browser utama. Anda dapat menguji efeknya dengan menggunakan beberapa browser yang berbeda!
<?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 kode editor klasik.
Editor klasik menambahkan kode yang memungkinkan untuk mengatur ketinggian maksimum dan menampilkan tombol lipat/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 kode 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 kode 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 kode 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 kode 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 kode 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 kode 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 kode 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 kode 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 kode 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;
}
}Screenshot dari presentasi.
Demonstrasi di belakang layar.
Demonstrasi editor klasik.
Demonstrasi editor blok.
\nMendukung 192 bahasa.
80 tema gaya.
Bagi penulis blog teknis dan penulis dokumentasi, alat penyorotan kode yang terbaru dan berperforma tinggi tetap menjadi kebutuhan. Kebangkitan Pure Highlightjs ini mungkin dapat membawa vitalitas baru bagi fitur tampilan kode di WordPress.
Bahasa Indonesia