Question

我在我的网络应用中使用prismjs进行代码突出显示，但是从不启用prismjs框中用于长行代码的水平滚动条。这是因为我也在使用twitter bootstrap 3（如果我删除了bootstrap css就可以正常工作），但我无法弄清楚如何修复它以使用bootstrap。

以下是代码：

<table id="views" class="table table-condensed table-striped table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Map</th>
        <th>Reduce</th>
        <th>Emit mapping</th>
        <th>Collections</th>
    </tr>
    </thead>
    <tbody>
    {% for view in views.views %}
        <tr>
            <td><a href="{{ url_for('view.get_view', name=view.name) }}">{{ view.name }}</a></td>
            <td><pre><code class="language-python">{{ view.map }}</code></pre></td>
            <td>{{ view.reduce }}</td>
            <td>{{ view.emit_mapping }}</td>
            <td>{{ view.collections }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

prismjs特定代码如下：

<pre><code class="language-python">{{ view.map }}</code></pre>

如何获得水平滚动条？在css中为pre元素设置固定宽度不能解决问题。

jsfiddle reproducing the issue

谢谢，

Answer 1

我使用以下css代码修复它：

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

然后我将代码放在这样的容器中：

<td><div class="container"><pre><code class="language-python">{{ view.map }}</code></pre></div></td>

问题是默认情况下bootstrap会覆盖空格和自动换行。

没有水平滚动条用于prismjs代码突出显示bootstrap 3

1 个答案: