要自定義 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 標簽顏色 */
}
/* 其他自定義樣式 */
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 官方文檔。