如何自定義php highlight的樣式

PHP
小樊
83
2024-09-15 10:11:59

要自定義 PHP Highlight 的樣式，您需要?jiǎng)?chuàng)建一個(gè)自定義的 CSS 文件，然后在 HTML 頁(yè)面中引用它

  1. 創(chuàng)建一個(gè)名為 custom-highlight.css 的新文件。
  2. 在此文件中添加以下內(nèi)容，以自定義代碼高亮樣式：
pre {
    background-color: #f5f5f5; /* 背景顏色 */
    border: 1px solid #dedede; /* 邊框樣式 */
    padding: 10px; /* 內(nèi)邊距 */
    overflow-x: auto; /* 水平滾動(dòng)條 */
}

code {
    font-family: "Courier New", Courier, monospace; /* 字體 */
    font-size: 14px; /* 字體大小 */
}

.hl-default {
    color: #333; /* 默認(rèn)文本顏色 */
}

.hl-keyword {
    color: #0070c0; /* 關(guān)鍵字顏色 */
}

.hl-string {
    color: #a31515; /* 字符串顏色 */
}

.hl-comment {
    color: #696969; /* 注釋顏色 */
}

.hl-html {
    color: #800000; /* HTML 標(biāo)簽顏色 */
}

/* 其他自定義樣式 */
  1. 根據(jù)需要修改上述 CSS 屬性，以自定義代碼高亮的外觀。
  2. 在 HTML 頁(yè)面中引用 custom-highlight.css 文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PHP Code Highlighting Example</title>
    <link rel="stylesheet" href="custom-highlight.css"> <!-- 引用自定義 CSS 文件 -->
</head>
<body>
    <?php
        $code = '
            <pre><code class="language-php">
                <?php
                    echo "Hello, World!";
                ?>
            </code></pre>
        ';
        echo $code;
    ?>
</body>
</html>

現(xiàn)在，當(dāng)您在 HTML 頁(yè)面中使用 PHP Highlight 時(shí)，它將應(yīng)用自定義的 CSS 樣式。請(qǐng)注意，這個(gè)示例使用了 Prism.js 庫(kù)，因此您需要在 HTML 頁(yè)面中包含 Prism.js 和 Prism.css 文件。有關(guān)如何設(shè)置 Prism.js 的更多信息，請(qǐng)參閱 Prism.js 官方文檔。

0 踩