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

我有this fiddle。我正在尝试格式化一些代码，并且无法动态插入和删除行号。似乎在第一页加载中出现了行号，但是一旦我单击运行，便无法将它们取回。在我的网站上，它们根本不显示。我想让用户单击一个按钮并动态地打开/关闭行号：

<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()));
  });
});

谢谢！

编辑：请注意，这不同于How to add line numbers to all lines in Google Prettify?。在我的系统中，如果我将linenums类手动添加到pre标记中，则会首先显示行号。问题是用jquery打开/关闭它们不起作用。

最佳答案

通过调用prettyPrintOne实质上是在绕过基于类的初始化。该方法的参数告诉修饰行为。

您试图修改prettify在类中的行为，但是prettify忽略了这一点，因为它只关心null的参数，因此它们会退回到内部默认值。

请参阅记录该方法的源代码：

    /**
     * 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本质上是用于解析一些以字符串形式传递给它的代码，并返回结果，这些参数由这些参数控制。相反，prettyPrint将遍历DOM来查找要添加的类，并根据找到的类来表现。在切换时，您将继续使用prettyPrintOne，这样我们就可以控制何时显示预设的输出以及何时显示原始输出-稍后再进行介绍。

顺便说一句，当您拥有HTML时，您要告诉prettify格式化JS格式，包括脚本标记中的JS和样式标记中的CSS。因此，您需要使用HTML作为lang扩展名，而不是JS。

无论如何，您需要做的就是将调用调整为以下内容，另外仅添加prettify类，以便应用美化主题CSS：

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

瞧！

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

至于切换，您只需要调整逻辑，以便将原始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);
    }
  });

这是一个显示效果的jsfiddle：https://jsfiddle.net/joshdavenport/68thqus1/27/