Prism.js 是一款輕量級的用于內聯代碼高亮的 JavaScript 庫。如果你想要在 Prism.js 中處理換行，你可以通過 CSS 來控制。
以下是一個簡單的例子，展示如何使用 CSS 來確保 Prism.js 中的代碼高亮保持換行而不是折疊：
/** 確保代碼塊中的文本不會在容器邊界內折疊 */
code[class*="language-"], pre[class*="language-"] {
white-space: pre;
overflow-wrap: break-word; /* 支持舊版瀏覽器的 'word-wrap' 屬性 */
word-wrap: break-word;
}
/** 為了確保 <pre> 元素也能正確顯示換行，可以設置 'white-space' 和 'overflow' 屬性 */
pre[class*="language-"] {
white-space: pre-wrap; /* 保持換行 */
overflow: auto; /* 添加滾動條以便在需要時查看代碼 */
}
cs
將上述 CSS 添加到你的樣式表中，然后確保你的 HTML 中包含了 Prism.js 的庫和語言定義。例如：
<!DOCTYPE html>
<html>
<head>
<!-- 引入 Prism.js 樣式 -->
<link href="path/to/prism.css" rel="stylesheet" />
<!-- 引入 Prism.js 腳本 -->
<script src="path/to/prism.js"></script>
</head>
<body>
<pre><code class="language-javascript">
// 這是一段 JavaScript 代碼
function helloWorld() {
console.log("Hello, World!");
}
helloWorld();
</code></pre>
</body>
</html>
在這個例子中，當你加載包含上述 CSS 的頁面時，Prism.js 將會處理 <code> 或 <pre> 標簽內的代碼，并保持其換行，即使代碼超出了容器的寬度。
該文章在 2024/4/1 18:17:00 編輯過
400 186 1886
