时间戳

首页 > 解决方案 > 如何将 prism.js 连接到 textarea

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

问题描述

此代码工作正常：

<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>

为什么？应该纠正什么才能起作用？

标签： syntax-highlighting

解决方案

PrismJs 指定它只使用<pre>and<code>标签，所以 a<textarea>不起作用。

因此，它只适用于<code>元素，因为在没有元素的情况下标记代码在<code>语义上是无效的。 https://prismjs.com/index.html

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

完整和最新的说明在网站上，但基本上你需要在 .cssprismjs-live.js之后prism.js和prism-live.css标准之后prism包含。

使用 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>

推荐阅读