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

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

为了使它与着色语法一起工作.

转到:自定义>自定义主题(编辑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>