شكل البداية/مدونة/ووردبريس/تفاصيل المحتوى

مقدمة إلى Pure Highlightjs

في نظام ووردبريس البيئي، لطالما كان تسليط الضوء على التعليمات البرمجية ميزة مهمة للمدونات التقنية ومواقع المطورين. في الآونة الأخيرة، تلقت أخيرًا إضافة Pure Highlightjs، التي كانت خاملة لسنوات، تحديثًا رئيسيًا، حيث تمت ترقية مكتبة Highlight.js الأساسية من إصدار قديم إلى الإصدار الأحدث v11.11.1.

تنزيل المكونات الإضافية

إبراز الرموز البرمجية Pure Highlightjs

إبراز الرموز البرمجية Pure Highlightjs

ترقية الموقع v2.1.3
308 تنزيل فرعي
2025-08-22 تحديث 2025-08-22
كلمة المرورcloud تم نسخ كلمة مرور الكمبيوتر المحمول
دعم تمييز الكود الأصلي لمحرر ووردبريس الكلاسيكي ومحرر المكوِّنات بمئات اللغات
شبكة الشريط الأزرق عرض البرنامج التعليمي

قم بتنزيل وفك ضغط مجلد Pure-Highlightjs وفك ضغطه وتحميله إلى دليل الإضافة لتمكينه في الواجهة الخلفية!

منسي، محدث، منسي

Pure Highlightjs هو مكون إضافي خفيف الوزن لتمييز الشيفرات البرمجية لمنصة ووردبريس تم إصداره من قبل المطور icodechef في عام 2016 ثم توقف تحديثه. كانت الإضافة مفضلة من قبل العديد من مستخدمي ووردبريس لبساطتها وكفاءتها، ولكن مع مرور الوقت، تراجعت نسختها المدمجة من Highlight.js بشكل كبير عن السائد، حيث لا أحب الرموز المختصرة الأخرى للإضافة وأفضل الرموز المسبقة المدمجة، لذلك قمتُ بترقيته للتركيز على الكود المسبق الأصلي لـ WordPress.

هذا المكون الإضافي صغير ولكنه مناسب تمامًا لاحتياجاتي، "نظرًا لأنه لم يتم تحديثه منذ سنوات، فإنمحرر الموقعقررت أن أتولى ترقية البرنامج إلى أحدث إصدار من Highlight.js.

التحسينات الناتجة عن الترقية

تجلب هذه الترقية إلى الإصدار 11.11.1 من Highlight.js العديد من التحسينات المهمة:

  1. شريط أدوات الكود:شريط أدوات جديد لتوسيع شريط الأدوات ونسخ وتحديد جميع الأزرار مع عرض عائم في منفذ العرض، سلس للغاية!
  2. انقر نقراً مزدوجاً لتحديد الكل:انقر نقرًا مزدوجًا جديدًا فوق تحديد الكل، انقر نقرًا مزدوجًا في منطقة الكود في الكمبيوتر يمكن تحديد كل الكود
  3. ارتفاع كتلة الرمز:الحد الأقصى لارتفاع كتلة التعليمات البرمجية الجديدة، يمكن تعيين حد أقصى لارتفاع عدد كبير من التعليمات البرمجية الطويلة، وسيكون هناك شريط تمرير أفقي ورأسي
  4. تُطوى لتفتح:زر توسيع جديد لتوسيع وطي كتلة التعليمات البرمجية عند إضافة ارتفاع
  5. الوضع الداكن:: الوضع المظلم الجديد، يمكن للمكونات الإضافية اختيار نمط سمة الرمز النهاري والليلي، يمكن تبديل سمات WordPress ذات الوضع المظلم، يمكنك تجربة تأثير هذا الموقع!
  6. تحسين أشرطة التمرير:تضيف الإضافة شريط تمرير الشريط البسيط لتحسين نمط شريط تمرير الرمز، وهو متوافق مع المتصفحات السائدة ويمكن استخدامه أيضًا للموقع بأكمله
  7. دعم لغات البرمجة الأكثر حداثة: دعم إضافي للغات الحديثة مثل TypeScript و Kotlin و Dart وغيرها، بإجمالي 192 لغة و 80 نمطًا من القوالب.
  8. JS الرسمية المحلية:لا تبسيط، لم يتم إجراء أي تغييرات على JS، محرر كلاسيكي محسّن ومحرر قوالب
  9. تحليل نحوي أفضل:: تحسين التعرف على صيغ الجمل مثل JSX، وقوالب Vue، وما إلى ذلك.
  10. ​إصلاحات التوافق:: حل مشكلات التوافق المحتملة في الإصدارات القديمة

لماذا هايلايتجز؟

من بين العديد من إضافات تسليط الضوء على التعليمات البرمجية في ووردبريس، لا يزال Pure Highlightjs يحتل مكانًا بسبب مزاياه الفريدة:

  • ​تصميم خفيف الوزن:: عدم الاعتماد على jQuery، والحد الأدنى من التأثير على أداء الموقع
  • ​دعم السكان الأصليين:: يستخدم علامات WordPress المسبقة مباشرةً، دون تكوين معقد ولا يتطلب رمزًا قصيرًا للمكوِّن الإضافي كما تفعل المكونات الإضافية الأخرى
  • ​بسيطة وجميلة:: النمط الافتراضي نظيف وحاد ومناسب للوثائق الفنية

عرض الرمز

عرض توضيحي لشريط التمرير الرمزي

شريط تمرير بنمط شريط تمرير الشريط البسيط، متوافق مع مجموعة متنوعة من المتصفحات السائدة، يمكنك اختباره مع عدد من المتصفحات المختلفة لمعرفة التأثير!

<?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
/**
 * 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 التوضيحي

<?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 التوضيحي

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

عرض كود جافا سكريبت التوضيحي

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

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 التوضيحي

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

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

عرض كود بايثون التوضيحي

# 使用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+ ⧏378⧐

#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类和接口示例
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;
    }
}

لقطات شاشة العرض التوضيحي

عرض توضيحي خلف الكواليس

تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
إضافة التبديل بين الليل والنهار، وكذلك السمة المستخدمة في هذا الموقع

العرض التوضيحي للمحرر الكلاسيكي

تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
محرر كلاسيكي إدراج رمز مجموعة رموز المحرر الكلاسيكي الارتفاع الأقصى للكتلة البرمجية
تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
طريقة ووردبريس الأصلية المستخدمة مسبقًا!

عرض توضيحي لمحرر المكوِّن

تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
محرر الكتل مع كتل التعليمات البرمجية المضمنة

دعم 192 لغة

تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
تدعم الإضافة 192 لغة

80 سمة نمط 80

تحديث رئيسي لمكوِّن Pure Highlightjs، المكوّن الإضافي لتمييز التعليمات البرمجية الأصلية في ووردبريس: الترقية إلى Highlight.js v11.11.1 - LikaCloud
يأتي السمة مع 80 نمطاً من الأنماط، بما في ذلك أوضاع النهار والليل

بالنسبة للمدونين التقنيين وكاتبي المستندات، لا تزال هناك حاجة إلى أداة محدثة وفعالة لتمييز الأكواد البرمجية، وقد تجلب هذه الولادة الجديدة لـ Pure Highlightjs حياة جديدة لقدرات عرض الأكواد البرمجية في ووردبريس.

تعليمات إعدادات المكوّن الإضافي

البرنامج المساعد لتمييز التعليمات البرمجية في ووردبريس لإبراز الرمز الإضافي Pure Highlightjs إعدادات الخلفية مساعدة التوثيق

البرنامج المساعد لتمييز التعليمات البرمجية في ووردبريس لإبراز الرمز الإضافي Pure Highlightjs إعدادات الخلفية مساعدة التوثيق

البرنامج التعليمي لإعدادات إعدادات الخلفية الخاصة بـ WordPress لتمييز رمز Pure Highlightj، ونمط القالب، ولون شريط التمرير، وإعدادات شريط الأدوات، وإعدادات كتلة الرمز وغيرها من البرامج التعليمية الخاصة بالوثائق
الوسوم