Question

我正在尝试使用美化和css自定义设置我的tumblr主题来显示python代码片段。我是css的新手，但我现在已经按照我想要的方式工作了（感谢网上搜索的例子）。但是，文本包装的时间太长，我无法弄清楚如何只显示滚动条。

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

这就是我现在正在使用的内容。我找到了一些页面，说我想添加空格：到这里，但经过所有选项后，它们似乎都没有用。选项nowrap使得它没有任何换行符。

如果我添加宽度：2000px或更大的东西，它会阻止文本进行包装，但它会被写入所有内容的顶部并且不会出现滚动条。

感谢您的帮助。

Answer 1

为了让它与着色语法一起使用。

转到：自定义＆gt;自定义主题（编辑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>

用于在tumblr上显示代码片段的水平滚动区域

1 个答案: