如何显示 google/code-prettify onkeyup 事件的 JS function

Question

This's my code for adding eventListener of google/code-prettify what I want to achieve is displaying the code as a code when the user insert his code in the textarea it should be working but for some reason it doesn't这是我添加 google/code-prettify 的 eventListener 的代码我想要实现的是将代码显示为代码，当用户在 textarea 中插入他的代码时它应该可以工作，但由于某种原因它没有

<body onload="PR.prettyPrint()">
    <h1>Insert your code</h1>

    <form method="POST">

        <pre class="  prettyprint"> <code class=" prettyprint">   <?php echo htmlspecialchars($str); ?>      </code></pre>
        <div class="  prettyprint"> <textarea id="testcode" class=" prettyprint" id="code"> </textarea></div>

        <script lang="javascript">
            document.getElementById("testcode").addEventListener('onkeyup', PR.prettyPrint, false);
            document.getElementById("testcode").innerText = "echo";
        </script>
        <input type="submit"></input>

    </form>
</body>

The textarea and an example of printed code using the lib. textarea 和使用 lib 的打印代码示例。

Documentation Documentation If you are calling prettyPrint via an event handler, wrap it in a function.文档文档如果您通过事件处理程序调用 prettyPrint，请将其包装在 function 中。 Instead of doing:而不是这样做：

addEventListener('load', PR.prettyPrint, false);

wrap it in a closure like:将其包装在一个闭包中，例如：

addEventListener('onkeyup', function(event) { PR.prettyPrint(); }, false);

Answer 1

alternative library替代图书馆

I used a similar library that is much better.我使用了一个更好的类似库。

and is named highlight.js并命名为highlight.js

I highly suggest not using the google library because is an archived project我强烈建议不要使用谷歌图书馆，因为它是一个存档项目

it may have a lot of bugs not fixed它可能有很多未修复的错误

✅ this code have only 5 lines of JS code! ✅ 这段代码只有 5 行 JS 代码！

GIF example code in javascript, but you can use PHP or any other language you want (just see the docs) javascript 中的 GIF 示例代码，但您可以使用 PHP 或您想要的任何其他语言（请参阅文档）

 const inputArea = document.querySelector("textarea"); const outputArea = document.querySelector("pre code"); inputArea.addEventListener("input", () => { outputArea.innerHTML = inputArea.value; hljs.highlightElement(outputArea); });

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css" /> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script> <form> <textarea></textarea> <pre><code class="language-javascript"></code></pre> </form>

benefits:好处：

open-source/maintained until now.开源/维护到现在。
you can choose themes (240 in total)您可以选择主题（共 240 个）
if you really want, you can create your own theme, with CSS only如果您真的想要，您可以创建自己的主题，仅使用 CSS
190 languages syntax highlighting. 190 种语言语法高亮显示。
similar API to the google library与谷歌图书馆类似的 API

<pre><code class="language-js">...</code></pre>

so see their docs on how to use it https://highlightjs.org/usage/所以请参阅他们的文档以了解如何使用它https://highlightjs.org/usage/

如何显示 google/code-prettify onkeyup 事件的 JS function

问题描述

1 个解决方案

解决方案1
1 2022-09-24 14:14:22

alternative library替代图书馆

如何显示 google/code-prettify onkeyup 事件的 JS function

问题描述

1 个解决方案

解决方案1 1 2022-09-24 14:14:22

alternative library替代图书馆

解决方案1
1 2022-09-24 14:14:22