Question

此代码可以正常工作：

<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 name="text" class="language-html">
    <span>one</span>
</textarea>

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

Answer 1

我通过在 <pre>/<code> 上覆盖 <textarea> 块并镜像 <textarea> 中的内容解决了这个问题。像这样的东西。确实是 CSS 在这里做了繁重的工作，因此您可能需要调整样式以满足您的需要。关键只是将 <textarea> 样式匹配到 <code> 样式，以便插入符号保持在正确的位置。

HTML：

<div class='code-editor>
  <textarea></textarea>
  <pre><code></code></pre>
</div>

JS：

var editor = document.querySelector(".code-editor textarea"),
    visualizer = document.querySelector(".code-editor code");

editor.addEventListener("input", (e) => {
   visualizer.innerHTML = e.target.value;
   Prism.highlightAll();
})

CSS：

.code-editor {
    display: block;
    position: relative;
    font-family: monospace;
    line-height: 1.5;
    width: 500px;
    border: solid 1px;
    background-color: #f5f2f0; // default prismjs theme background color
}

.code-editor textarea {
    background-color: transparent;
    color: transparent;
    caret-color: black;
    padding: 10px;
    margin: 0px;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    width: 100%;
    border: none;
}

.code-editor code {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 0px;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: transparent;
}

Answer 2

PrismJs指定仅使用<pre>和<code>标签，因此<textarea>将不起作用。

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

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

完整和最新的说明在网站上，但是基本上您需要在prismjs-live.js之后加上prism.js，并在标准prism-live.css。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>

如何将棱镜.js连接到textarea

2 个答案: