Question

我正在尝试构建一个HTML元素库（类似于Twitter Bootstrap），我希望在正确的代码标记旁边有一个实时版本的元素，以便于参考。

我正在尝试使用Prettify来显示<button>Button</button>之类的内容，但我遇到了两个问题：

似乎是在添加随机换行符。
它只是编号第一行然后停止。

以下是我在查看页面时看到的内容：

enter image description here

问题：我在这里做错了什么？

以下是相关的HTML：

<html>
<head>
<title>Common HTML Library</title>

<link type="text/css" rel="stylesheet" href="common.css" />
<link type="text/css" rel="stylesheet" href="prettify/prettify.css" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="script.js"></script>
</head>

<body>

<div class="wrapper">

    <!-- Button Section -->

    <h1>Buttons</h1>
    <p>Buttons should be used whenever something requires a clickable action which will result in a redirect, or dialog dismissal. Buttons appear in various states which are illustrated below.</p>

    <div class="live-example">
        <div class="element">
            <label for="defaultButton">Default Button</label>
            <button id="defaultButton">Button</button>
        </div>

        <div class="element">
            <label for="primaryButton">Primary Button</label>
            <button id="primaryButton" class="primary">Primary</button>
        </div>

        <div class="element">
            <label for="disabledButton">Disabled Button</label>
            <button id="disabledButton" disabled="disabled">Disabled</button>
        </div>
    </div>
    <div class="markup">
        <button>Button</button>
        <button class="primary">Button</button>
        <button disabled="disabled">Button</button>
    </div>
</div>

<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">prettyPrint();</script>

</body>
</html>

这是script.js文件：

$(function() {
    $('.markup').wrapInner('<pre class="prettyprint linenums" />');
});

$(document).ready(function() {
  $('.prettyprint').html(function(i,h){
    return h.replace(/[<>\"\'\t\n]/g, function(m) { return {
      '<' : '&lt;',
      '>' : '&gt;',
      "'" : '&#39;',
      '"' : '&quot;',
      '\t': '  ',
      '\n': '<br/>' // needed for IE
    }[m]});
  });
  prettyPrint();
});

当它取代所有的＆lt;＆gt;时，似乎正在发生一些事情。与Unicode等价物......就像它放弃换行符和/或添加新换行符一样。 这里发生了什么，我该如何解决？

Answer 1

我明白了。当jQuery彻底清除并用等效的Unicodes替换标签插入符时，就出现了这个问题。

这是我的解决方案。我决定动态添加标记块，所以你会看到我在每个实例块之后添加一个div，用实例中的代码填充它作为文本，而不是HTML（这个是让它工作的诀窍），然后将其包装在<pre>标签中。

// Add a markup block after each live example container
$('.live-example').after("<div class='markup'></div>");

// Fill the markup block with the code from the live container
$('.live-example').each(function () {
    $(this).next($('.markup')).text($(this).html());
});

// Wrap the code in the markup block with a <pre> tag for prettyprinting
$('.markup').wrapInner('<pre class="prettyprint linenums" />');

我的代码之前和之后我仍然得到奇怪的<br>，但我可以解决这个问题。

<强>结果：

enter image description here

使用<pre> and/or <code></code></pre>的HTML代码的Prettyprint问题

1 个答案: