퓨어 하이라이트js 소개
워드프레스 생태계에서 코드 강조 표시 기능은 기술 블로그와 개발자 사이트에서 항상 중요한 기능이었습니다. 최근 몇 년 동안 휴면 상태였던 퓨어 하이라이트js 플러그인이 마침내 대규모 업데이트를 통해 핵심 Highlight.js 라이브러리를 오래된 버전에서 최신 v11.11.1로 업그레이드했습니다.
플러그인 다운로드
Pure-Highlightjs 폴더를 다운로드하여 압축을 풀고 플러그인 디렉토리에 업로드하여 백엔드에서 활성화하세요!
잊어버림, 업데이트
퓨어 하이라이트js는 개발자 icodechef가 2016년에 출시한 후 업데이트를 중단한 워드프레스 플랫폼용 경량 코드 강조 플러그인입니다. 이 플러그인은 단순성과 효율성으로 많은 워드프레스 사용자가 선호했지만, 시간이 지나면서 다른 플러그인 단축 코드를 좋아하지 않고 내장된 프리 코드를 선호하기 때문에 내장된 Highlight.js 버전은 주류에서 심각하게 뒤쳐졌습니다. 그래서 워드프레스 기본 프리 코드에 초점을 맞추기 위해 업그레이드했습니다.
이 플러그인은 작지만 제 필요에 딱 맞습니다. "몇 년 동안 업데이트되지 않았기 때문에사이트 편집기직접 최신 버전의 Highlight.js로 업그레이드하기로 결정했습니다.
업그레이드로 인한 개선 사항
이번 Highlight.js 버전 11.11.1 업그레이드에는 몇 가지 중요한 개선 사항이 있습니다:
- 코드 도구 모음:새로운 툴바는 뷰포트에서 플로팅 디스플레이로 모든 버튼을 확장, 복사 및 선택할 수 있으며 매우 부드럽습니다!
- 모두 선택하려면 두 번 클릭합니다:새로운 더블 클릭 모두 선택, 컴퓨터의 코드 영역에서 더블 클릭하면 모든 코드를 선택할 수 있습니다.
- 코드 블록 높이:새로운 코드 블록 최대 높이, 많은 수의 긴 코드가 최대 높이를 설정할 수 있으며 가로 및 세로에는 스크롤 막대가 있습니다.
- 접어서 펼칩니다:높이 추가 시 코드 블록을 확장 및 축소하는 새로운 확장 버튼 추가
- 다크 모드새로운 다크 모드, 플러그인은 낮과 밤 코드 테마 스타일을 선택할 수 있으며, WordPress 테마는 다크 모드를 전환 할 수 있으며,이 사이트의 효과를 경험할 수 있습니다!
- 스크롤 막대를 최적화합니다:플러그인은 코드 스크롤바 스타일을 최적화하는 심플바 스크롤바를 추가하여 주류 브라우저와 호환되며 전체 사이트에도 사용할 수 있습니다.
- 최신 프로그래밍 언어 지원총 192개 언어와 80개 스타일의 테마로 TypeScript, Kotlin, Dart 등과 같은 최신 언어 지원이 추가되었습니다.
- 네이티브 공식 JS:간소화, JS 변경 없음, 최적화된 클래식 에디터 및 블록 에디터
- 더 나은 문법 분석JSX, Vue 템플릿 등과 같은 구문 인식이 개선되었습니다.
- 호환성 수정이전 버전에서 잠재적인 호환성 문제 해결
왜 하이라이트js인가?
많은 워드프레스 코드 하이라이팅 플러그인 중에서도 퓨어 하이라이트js는 고유한 장점으로 인해 여전히 자리를 지키고 있습니다:
- 경량 설계jQuery에 대한 종속성 없음, 사이트 성능에 미치는 영향 최소화
- 네이티브 지원복잡한 구성 없이 워드프레스 프리 태그를 직접 사용하며 다른 플러그인처럼 플러그인 단축 코드가 필요하지 않습니다.
- 심플하고 아름다운기본 스타일은 깔끔하고 선명하며 기술 문서에 적합합니다.
코드 데모
코드 스크롤바 데모
다양한 주류 브라우저와 호환되는 심플바 스크롤바 스타일의 스크롤바는 여러 가지 브라우저에서 테스트하여 효과를 확인할 수 있습니다!
<?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++ 코드 데모
#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 코드 데모
// 简单的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;
}
}데모 스크린샷
백스테이지 데모
클래식 에디터 데모
블록 에디터 데모
192개 언어 지원
80가지 스타일 테마
기술 블로거와 문서 작성자에게는 여전히 최신의 효율적인 코드 강조 표시 도구가 필요하며, 이번 퓨어 하이라이트js의 재탄생은 워드프레스의 코드 표시 기능에 새로운 활력을 불어넣을 것입니다.
한국어