gpt4 book ai didi

syntax-highlighting - 如何将prism.js 连接到textarea

转载 作者:行者123 更新时间:2023-12-04 00:03:30 25 4
gpt4 key购买 nike

这段代码工作正常:

<head>
<script src='.../prism/prism.js'></script>
<link href='../prism/prism.css' rel='stylesheet' type='text/css'>
</head>

<pre>
<cоde class="language-html">
<span>one</span>
</cоde>
</pre>

但是,如果您连接到 textarea,则没有任何效果。
<textarea name="text" class="language-html">
<span>one</span>
</textarea>

为什么?应该纠正什么才能奏效?

最佳答案

PrismJs 指定它使用 <pre><code>只有标签,所以 <textarea>不会工作。

Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. https://prismjs.com/index.html



但是,有一个名为 PrismJs live 的辅助项目,您可以将其附加到 textareas https://live.prismjs.com/ - 由 Lea Verou 制作,目前正在进行中。

完整和最新的说明在网站上,但基本上你需要包括 prismjs-live.js之后 prism.js , 和 prism-live.css按照您的标准, prism .css`。

使用 Javascript 库调用,您还需要包含要加载的语言,例如, prismjs-live.js?load=php,javascript
<head>
<meta charset="UTF-8">
<title>Prism Live: Lightweight, extensible, powerful web-based code editor</title>
<link rel="stylesheet" href="./prism.css">
<link rel="stylesheet" href="./prism-live.css">

<textarea aria-label="Enter your response here" rows="5" class="prism-live"></textarea>

<script src="./prism.js" charset="utf-8"></script>
<script src="./prism-live.js?load=python,javascript" charset="utf-8"></script>
</head>

关于syntax-highlighting - 如何将prism.js 连接到textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54277438/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com