使用 <code> 和/或 <pre> 显示 HTML 片段时出现问题答案

【问题标题】：Problems Displaying HTML Snippets with <code> and/or <pre>使用 <code> 和/或 <pre> 显示 HTML 片段时出现问题
【发布时间】：2013-05-23 15:06:42
【问题描述】：

我正在尝试构建一个 HTML 元素库（例如 Twitter Bootstrap），并且我希望在正确的代码标记旁边有一个实时版本的元素（例如按钮）。

我正在尝试使用Prettify 来显示类似<button>Button</button> 的内容，但它似乎不起作用。

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

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

以下是相关的 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 type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        prettyPrint();
    });
</script>
</head>

<body>
<h1>Buttons</h1>
<table>
    <thead>
        <tr>
            <th>Element</th>
            <th>Description</th>
            <th>Markup</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button>Button</button>
            </td>
            <td>Standard Button</td>
            <td>
                <code class="prettyprint">
                    <button>Button</button>
                </code>
            </td>
        </tr>
        <tr>
            <td>
                <button class="primary">Button</button>
            </td>
            <td>Primary Button</td>
            <td>
                <code class="prettyprint">
                    <button class="primary">Button</button>
                </code>
            </td>
        </tr>
        <tr>
            <td>
                <button disabled="disabled">Button</button>
            </td>
            <td>Disabled Button</td>
            <td>
                <code class="prettyprint">
                    <button disabled="disabled">Button</button>
                </code>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

编辑：

我尝试设置语言并像这样使用<pre> 并得到以下结果：

<pre class="prettyprint lang-html">
    <button>Button</button>
</pre>

【问题讨论】：

标签： jquery html pre pretty-print

【解决方案1】：

尝试设置语言并转义括号/引号：

<code class="prettyprint lang-html">
    &lt;button class=&quot;primary&quot;&gt;Button&lt;/button&gt;
</code>

更新：

~~嗯，其实我觉得你需要用<pre>而不是<code>~~

更新 2：试试这个代码 (demo)：

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

【讨论】：

Prettify 的目的不是为我避开引号和括号吗？