溫馨提示×

如何自定義php highlight的樣式

PHP
小樊
106
2024-09-15 10:11:59
欄目: 編程語言

要自定義 PHP Highlight 的樣式,您需要創建一個自定義的 CSS 文件,然后在 HTML 頁面中引用它

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

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

.hl-default {
    color: #333; /* 默認文本顏色 */
}

.hl-keyword {
    color: #0070c0; /* 關鍵字顏色 */
}

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

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

.hl-html {
    color: #800000; /* HTML 標簽顏色 */
}

/* 其他自定義樣式 */
  1. 根據需要修改上述 CSS 屬性,以自定義代碼高亮的外觀。
  2. 在 HTML 頁面中引用 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>

現在,當您在 HTML 頁面中使用 PHP Highlight 時,它將應用自定義的 CSS 樣式。請注意,這個示例使用了 Prism.js 庫,因此您需要在 HTML 頁面中包含 Prism.js 和 Prism.css 文件。有關如何設置 Prism.js 的更多信息,請參閱 Prism.js 官方文檔。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女