Pure Highlightjs tanıtımı.
WordPress ekosisteminde, kod vurgulaması her zaman teknik bloglar ve geliştirici web siteleri için önemli bir özellik olmuştur. Son zamanlarda, uzun süredir sessiz kalan Pure Highlightjs eklentisi, sonunda büyük bir güncelleme aldı ve temel Highlight.js kitaplığını eski sürümden en yeni v11.11.1 sürümüne yükseltti.
Eklenti indirme.
Saflık Highlightjs kodu vurgulaması.
Bu site güncellendi. v2.1.3 308 Bir sonraki indirme.
2025-08-22 Güncelleme.
Şifre:cloud Çevrimiçi depolama alanı şifresi kopyalandı!
WordPress klasik editörü ve blok editörünü destekleyen yerel kod vurgusu, yüzlerce dili destekler.
İndirilen ve açılan Pure-Highlightjs klasörünü eklenti dizinine yükleyin ve arka uçtan etkinleştirin!
Unutmuşum, güncelledim.
Pure Highlightjs, WordPress platformunda geliştirici iCODEchef tarafından 2016'da yayınlanan ve güncellemelerinin durdurulduğu hafif bir kod vurgulama eklentisidir. Bu eklenti çok sayıda WordPress kullanıcısı tarafından basit ve verimli özellikleri nedeniyle beğenilmiştir, ancak zaman geçtikçe, dahili Highlight.js sürümü ana akımdan ciddi ölçüde geride kalmıştır. Çünkü diğer eklentilerin kısa kodlarını sevmiyorum, dahili pre'yi tercih ediyorum. Bu yüzden onu yükselttim, asıl odak noktası WordPress'in yerel pre koduydu.
Bu eklenti küçük olsa da, ihtiyaçlarımı tam olarak karşılıyor. Ancak, yıllardır güncellenmediğini gördüğümde,Bu site editörü.En son Highlight.js sürümüne yükseltmeyi kendiniz yapmaya karar verirseniz, aşağıdaki adımları izleyin.
Güncellemenin getirdiği geliştirmeler.
Highlight.js 11.11.1 sürümüne yapılan bu güncelleme, birçok önemli geliştirmeyi beraberinde getirdi:
- Kod araç çubuğu:Yeni araç çubuğu açma, kopyalama ve tümünü seçme düğmeleri, görüntüleme alanı içinde yer alır ve oldukça sorunsuz çalışır.
- Tüm çift tıklama seçimi:Yeni çift tıklama ile tümünü seçme özelliği, bilgisayar tarafındaki kod alanında çift tıklama yapıldığında tüm kodu seçmenize olanak tanır.
- Kod bloğu yüksekliği:Yeni kod bloğunun maksimum yüksekliği, büyük uzun kod parçaları için bir maksimum yükseklik ayarlanabilir ve hem yatay hem de dikey kaydırma çubukları olacaktır.
- Katlamak ve açmak:Yeni bir açma düğmesi eklendi. Kod bloğu yükseklik eklendiğinde, açılabilir veya kapatılabilir.
- Karanlık mod.Yeni Karanlık Mod, eklenti gündüz ve gece kod tema stillerini seçebilir, WordPress temasında Karanlık Mod olduğunda geçiş yapabilir ve bu sitein etkilerini deneyebilirsiniz.
- Kasılabilir çubukları optimize edin:Eklentiye simplebar kaydırma çubuğu eklendi, kod kaydırma çubuğunun stili optimize edildi, ana tarayıcılarla uyumlu hale getirildi ve tüm site için kullanılabilir hale getirildi.
- Daha fazla modern programlama dilini destekleyin.：TypeScript, Kotlin, Dart gibi modern dillerin desteği eklendi. Toplamda 192 dil ve 80 stil teması destekleniyor.
- Orijinal resmi JS:Kısaltma yok, JS'de değişiklik yapılmadı, klasik editör ve blok editörü optimize edildi.
- Daha iyi dilbilgisi analizi.JSX, Vue şablonları vb. sözdiziminin tanınması geliştirildi.
- Uyumluluk düzeltmesiEski sürümdeki olası uyumluluk sorunlarını çözdü.
Highlightjs'i neden seçtiniz?
Çok sayıda WordPress kod vurgulama eklentisi arasından, Pure Highlightjs hala benzersiz avantajları nedeniyle bir yer tutuyor:
- Hafif tasarım.jQuery'e bağımlı olmadığı için, web sitesinin performansı üzerinde çok az etkisi vardır.
- Yerel destek.WordPress'in pre etiketini doğrudan kullanmak, karmaşık yapılandırmalara gerek kalmaz ve diğer eklentiler gibi eklenti kodunu kullanmanıza gerek kalmaz.
- Basit ve güzel.Varsayılan tarz, teknik belgeler için uygun olan temiz ve düzenli bir tarzdir.
Kod gösterisi.
Kod kaydırıcısı gösterisi.
Kaydırma çubuğu, SimpleBar kaydırma çubuğu tarzında kullanılır ve birçok ana tarayıcıyla uyumludur. Etkileri görmek için birçok farklı tarayıcıda test edebilirsiniz!
<?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";
?>
Klasik editör kodu gösterisi.
Klasik editör, maksimum yüksekliği ayarlamak için kod ekler ve yüksekliğe göre açma/kapama düğmesini gösterir.
<?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";
?>
PHP kodu gösterisi.
<?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();
?>CSS kodu gösterisi.
/* 响应式卡片样式 */
.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%;
}
}JavaScript kodu gösterisi.
// 异步获取数据示例
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);GO dilindeki kod gösterimi.
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)
}MySQL kodu gösterisi.
-- 创建用户表并查询示例
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';Node.js kodu gösterisi.
// 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}`);
});Python kodu gösterisi.
# 使用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)C++ kodu gösterisi.
#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;
}Java kodu gösterisi.
// 简单的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;
}
}Demo görüntüsü.
Arka plan sunumu.
Klasik editör demosu.
Blok editörü tanıtımı.
192 dili destekliyor.
80 stil teması.
Teknik blog yazarları ve belge yazarları için, güncel ve verimli bir kod vurgulama aracı hala bir gerekliliktir. Pure Highlightjs'in bu yeniden doğuşu, WordPress'in kod görüntüleme özelliğine yeni bir canlılık getirebilir.
Türkçe