如何将 linenums 动态添加到 Google Code 美化？

Question

I have this fiddle .我有这个小提琴。 I am trying to format some code and am having trouble inserting and removing line numbers dynamically.我正在尝试格式化一些代码并且在动态插入和删除行号时遇到问题。 It seems on the first page load the line numbers appear but once I click run then I can't get them back.似乎在加载的第一页上出现了行号，但是一旦我单击运行，就无法将它们取回。 On my website they don't show at all.在我的网站上，它们根本不显示。 I would like to let users click a button and turn on/off the line numbers dynamically:我想让用户单击一个按钮并动态打开/关闭行号：

<body>
  <pre id="pre">
    &lt;script type=&quot;text/javascript&quot;&gt;
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
      for (var i = 42; --i &gt;= 0;) {
        alert('Hello ' + String(world));
      }
    }
    &lt;/script&gt;
    &lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: &quot;umber&quot; }
    &lt;/style&gt;
</pre>


<button id="button">My button</button>
</body>

$(document).ready(function(){
  $("#button").on("click", function(){
         $("#pre").addClass("prettyprint").addClass("linenums").addClass("lang-js");
     $("#pre").html(PR.prettyPrintOne($("#pre").html()));
  });
});

Thanks!谢谢！

EDIT: Note that this is different than How to add line numbers to all lines in Google Prettify?编辑：请注意，这与如何将行号添加到 Google Prettify 中的所有行不同？ . . In mine, the line numbers show up at first if I add linenums class to the pre tag manually.在我的情况下，如果我手动将linenums class 添加到pre标记，则首先显示行号。 Problem is turning them on/off with jquery doesn't work.问题是用 jquery 打开/关闭它们不起作用。

Answer 1

By calling prettyPrintOne you're essentially circumventing the class based initialisation.通过调用prettyPrintOne ，您实际上是在绕过基于 class 的初始化。 That method has arguments that tell prettify how to behave.该方法有 arguments 告诉美化如何表现。

You're trying to modify how prettify behaves with classes but prettify ignores that because it only cares about the arguments which are null, therefore they fallback to internal defaults.您正在尝试修改 prettify 对类的行为方式，但 prettify 忽略了这一点，因为它只关心 arguments 即 null，因此它们回退到内部默认值。

See the source documenting the method:请参阅记录该方法的源：

    /**
     * Pretty print a chunk of code.
     * @param {string} sourceCodeHtml The HTML to pretty print.
     * @param {string} opt_langExtension The language name to use.
     *     Typically, a filename extension like 'cpp' or 'java'.
     * @param {number|boolean} opt_numberLines True to number lines,
     *     or the 1-indexed number of the first line in sourceCodeHtml.
     * @return {string} code as html, but prettier
     */

prettyPrintOne is essentially for parsing some code passed to it as a string, and returning the result, with the options controlled by those arguments. prettyPrintOne本质上是用于解析作为字符串传递给它的一些代码，并返回结果，这些选项由 arguments 控制。 Conversely prettyPrint will traverse the DOM looking for the classes you're adding, behaving according to the classes it finds.相反， prettyPrint将遍历 DOM 以查找您正在添加的类，并根据它找到的类进行行为。 As you want to toggle, you'll want to keep using prettyPrintOne so that we can have control of when to show prettified output, and when to show the original - more on that later.当您想要切换时，您需要继续使用prettyPrintOne ，以便我们可以控制何时显示美化的 output，以及何时显示原始文件 - 稍后会详细介绍。

As an aside, you're telling prettify to format JS when what you've got there is HTML including JS in script tags and CSS in style tags.顺便说一句，当你有 HTML 包括脚本标签中的 JS 和样式标签中的 CSS 时，你告诉 prettify 格式化 JS。 So you'll want to use HTML as the lang extension, not JS.因此，您需要使用 HTML 作为语言扩展，而不是 JS。

Anyway, all you need to do is adjust your call to the below, additionally adding the prettify class solely so your prettify theme CSS applies:无论如何，您需要做的就是将您的调用调整为以下内容，另外添加prettify class 以便您的美化主题 CSS 适用：

$("#pre").html( PR.prettyPrintOne($("#pre").html(), "html", true) )
    .addClass("prettyprint");

Et voila:瞧：

As for toggling, you just need to adjust the logic so that you store the original HTML somewhere on prettify-ing and restore it next time the button is clicked:至于切换，您只需要调整逻辑，以便将原始 HTML 存储在美化的某个地方，并在下次单击按钮时恢复它：

  $("#button").on("click", function() {
    // Cache jquery object
    var $pre = $("#pre");
    // If the element has a prettyprint class, it's already been manually
    // prettified
    if (!$pre.hasClass("prettyprint")) {
      // Element hasn't been prettified, store the html in jQuery data
      $pre.data("original-html", $pre.html());
      // Manually prettify
      $pre.html(PR.prettyPrintOne($pre.html(), "html", true))
        .addClass("prettyprint");
    } else {
      // Element has been prettified, restore the orginal html stored in jQuery
      // data and remove the prettyprint class, back to where we started
      $pre.html($pre.data("original-html"))
        .removeClass("prettyprint");
      // Remove the jQuery data entry for our original HTML, so next time we
      // start fresh
      $pre.data("original-html", null);
    }
  });

Here's a jsfiddle showing that in action: https://jsfiddle.net/joshdavenport/68thqus1/27/这是一个 jsfiddle 显示在行动中： https://jsfiddle.net/joshdavenport/68thqus1/27/

如何将 linenums 动态添加到 Google Code 美化？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-05-05 20:56:33

如何将 linenums 动态添加到 Google Code 美化？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-05-05 20:56:33

解决方案1
2 已采纳 2020-05-05 20:56:33