Prism.js 代码区域自动换行
|
freeflydom
2024年4月1日 18:13
本文热度 661
|
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
