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

Question

我有this fiddle。我正在尝试格式化一些代码，但在动态插入和删除行号时遇到问题。似乎在第一页加载时会出现行号，但是一旦我单击运行，我就无法取回它们。在我的网站上，它们根本不显示。我想让用户点击一个按钮并动态地转动 on/off 行号：

<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 class 添加到 pre 标签，行号会首先显示。问题是将它们 on/off 转为 jquery 不起作用。

Answer 1

通过调用 prettyPrintOne，您实际上是在绕过基于 class 的初始化。该方法具有告诉美化如何表现的参数。

您正在尝试使用 classes 修改 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 寻找您要添加的 classes，并根据它找到的 classes 进行操作。当你想切换时，你会想继续使用 prettyPrintOne 以便我们可以控制何时显示美化输出，以及何时显示原始输出 - 稍后会详细介绍。

顺便说一句，当你得到的是 HTML 在脚本标签中包含 JS 并在样式标签中包含 CSS 时，你告诉 prettify 格式化 JS。所以你会想要使用 HTML 作为 lang 扩展，而不是 JS。

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

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

瞧瞧：

至于切换，您只需要调整逻辑，以便在美化时将原始 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/

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

How can I add linenums dynamically to Google Code prettify?

javascript

jquery

css

google-code-prettify