如何自定义php highlight的样式 - 问答

要自定义 PHP Highlight 的样式，您需要创建一个自定义的 CSS 文件，然后在 HTML 页面中引用它

创建一个名为 custom-highlight.css 的新文件。
在此文件中添加以下内容，以自定义代码高亮样式：

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 标签颜色 */
}

/* 其他自定义样式 */

根据需要修改上述 CSS 属性，以自定义代码高亮的外观。
在 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 赞

0 踩