워드프레스 하이라이트 코드 플러그인 퓨어 하이라이트js 백엔드 설정 도움말 문서

퓨어 하이라이트js 플러그인 소개

워드프레스 기본 사전 코드 강조 표시 플러그인 순수 하이라이트js 주요 업데이트: Highlight.js v11.11.1 버전으로 업그레이드되었습니다.

백스테이지 설정

워드프레스 하이라이트 코드 플러그인 퓨어 하이라이트js 백엔드 설정 도움말 문서 - LikaCloud — 플러그인 배경 설정

주제 선택

주간 테마: 코드 블록의 스타일을 선택하고, 선택 후 저장하고, 미리 보기합니다. 간소화가 완료되지 않았으며 수십 가지 스타일을 선택할 수 있습니다.
야간 테마: 야간 모드를 적용하려면 테마가 루트 HTML 요소를 지원하여 어둡게 추가할 수 있어야 하며, 그렇지 않으면 주간 테마만 사용할 수 있습니다.

스크롤 막대 색상

테마 스타일에 따라 스크롤바 스타일을 설정해야하며, 모든 주요 브라우저와 호환되는 심플 바가있는 스크롤바는 스크롤바가 필요한 전체 사이트에 적용 할 수 있지만 불행히도 스크롤바 스타일의 페이지 본문 및 html 화면 측면은 지원하지 않습니다.

참고: 플러그인 백엔드에서 설정한 스크롤바 색상은 코드 블록의 스크롤바에만 적용됩니다.

사이트의 다른 곳에서 심플바를 사용해야 하는 경우 다음 플러그인 디렉토리 파일을 엽니다:

//位置 plugins/Pure-Highlightjs/assets/pure-highlight.js
// 根据类名添加simplebar滚动条样式
document
  .querySelectorAll(
    'pre, .a, .b, .c，.com-scrollbar'
  )
  .forEach((el) => {
    el.setAttribute('data-simplebar', '');
  });

.a, .b, .c, .com-scrollbar와 같은 위 코드에서 div 또는 다른 요소의 클래스명을 여기에 추가하면 예를 들어 심플바 스크롤바에 적용됩니다:

<!-- 滚动条类最好是添加在这个div -->
<div class="com-scrollbar flex flex-col gap-4">
  <!-- 不建议在这个div添加滚动条类 -->
  <div class="content">
    <span>내용</span>
    <span>내용</span>
    <span>내용</span>
    <span>내용</span>
  </div>
</div>

도구 모음 색상 설정

각 테마의 플러그인 스타일 스타일이 동일하지 않으므로 도구 스타일 색상 설정을 추가하여 코드에서 직접 색상을 고정하면 일부 테마 스타일이 조정되지 않은 경우 스타일에 따라 배경을 선택하여 도구 모음 색상을 설정할 수 있습니다.

도구 모음 표시 모드

항상 켜짐: 툴바가 항상 표시되며 사라지지 않습니다.
마우스 가리키기 표시: 코드 블록에 마우스를 올리면 툴바가 표시되고, 모바일은 코드 블록을 클릭하면 툴바가 표시됩니다.

툴바 플로트

툴바는 항상 슬라이딩 방식으로 뷰포트 영역에 표시되며, 아래로 슬라이드하면 페이지를 따라 아래로, 위로 슬라이드하면 위로, 뷰포트가 코드 블록을 초과하면 원래 위치로 돌아갑니다.

코드 블록 높이

글 내에 코드 블록이 많고 각 블록에 코드 줄이 많은 경우 어떻게 해야 하나요? 코드 블록의 최대 높이(최대 높이)를 설정하는 것이 좋습니다. 클래식 편집기는 코드를 입력할 때 높이를 채우고, 블록 편집기는 클래스 이름 메서드를 사용하는 것이 좋습니다.

클래식 에디터 코드 블록 높이 설정

그림과 같이 클래식 편집기에서 코드 버튼을 클릭하여 코드를 삽입할 때 기본값은 최대 높이 380이며, 다른 숫자로 변경할 수 있습니다.코드를 삽입할 때 기본적으로 마지막에 빈 줄이 추가되며, 블록에 다른 코드가 없는 경우 삭제하는 것이 좋습니다.(?) 처음에는 코드 문제라고 생각했고, 결국 빈 줄을 추가 할 때 원래 코드에 삽입 된 반나절을 찾고 울고있는 20px 빈 위치가 더 많은 이유는 무엇입니까? ‍♀️), 다음은 최대 높이가 300px 인 클래식 편집기 데모입니다:

<?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类示例
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();
?>

높이가 없는 경우 클래식 편집기에는 접기 펼치기 버튼이 표시되지 않습니다.

블록 편집기 코드 블록 높이 설정

현재 이러한 높이 클래스 이름은 몇 가지에 불과합니다:

h-200 {
  max-height: 200px; /*最大高度为200px*/
}
h-300 {
  max-height: 300px; /*最大高度为300px*/
}
h-380 {
  max-height: 380px; /*最大高度为380px*/
}
h-500 {
  max-height: 500px; /*最大高度为500px*/
}

블록 편집기는 고정 클래스를 사용하여 클래식 편집기처럼 높이를 수동으로 입력하지 않았습니까? 블록 에디터에 문의하여 수동 입력 높이 기능을 추가하기 위해 블록 툴바를 코딩할 수 있는지 확인하는 후속 조치로 데모는 다음과 같습니다:

<?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类示例
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();
?>

이후 플러그인에 문제가있는 경우와 같이 플러그인을 업데이트하라는 요구 사항을 업데이트합니다.QQ 그룹 1398231피드백!