3

我正在尝试使用美化和 css 自定义设置我的 tumblr 主题以显示 python 代码片段。我对 css 是全新的，但我现在几乎可以按照我的意愿工作（感谢在网上搜索示例）。但是，文本太长时会换行，我无法弄清楚如何让它只显示滚动条。

        pre code {
            overflow-x: scroll;
            overflow-y: hidden;
            display: block;
            line-height: 1.6em;
        font-size: 11px;
        }

这是我现在正在使用的。我发现一些页面说我想在这里添加空格：但是在浏览了所有选项之后，它们似乎都不起作用。选项 nowrap 使得它没有任何换行符。

如果我添加 width: 2000px 或一些巨大的东西，它会阻止文本换行，但它会被覆盖在所有内容之上，并且不会出现滚动条。

谢谢您的帮助。

4

1 回答 1

6

为了让它与着色语法一起工作。

转到：自定义 > 自定义主题（编辑 HTML）
并在您的 HTML 模板代码中将其添加到 head 标记之前：

<style type="text/css" media="screen">

    pre code {
        overflow-x: scroll;
        overflow-y: hidden;
        display: block;
        line-height: 1.6em;
        font-size: 11px;
        white-space: pre; 
        word-wrap: normal;
    }
</style>

<!-- For Syntax Highlighting -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>  
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>  
<script>
    function styleCode() {
        if (typeof disableStyleCode != 'undefined') { return; }

        var a = false;

        $('code').each(function() {
            if (!$(this).hasClass('prettyprint')) {
                $(this).addClass('prettyprint');
                a = true;
            }
        });

        if (a) { prettyPrint(); } 
    }

    $(function() {styleCode();});
</script>
于 2014-09-26T08:24:19.907 回答