Horizontal scroll area for displaying code snippets on tumblr

Question

I am trying to set up my tumblr theme using prettify and css customization to display python code snippets. I am brand new to css, but I have it pretty much working as I want now (thanks to scouring the web for examples). However, the text is wrapping when too long and I have not been able to figure out how to get it to just display a scroll bar instead.

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

Here is what I am using right now. I found some pages saying I wanted to add white-space: to here, but after going through all the options, none of them seem to work. The option nowrap makes it so there are no linebreaks whatsoever.

If I add width: 2000px or something huge, it stops the text from wrapping but it gets written over top of everything and no scroll bar appears.

Thanks for the help.

Answer 1

In order to get it work with coloring syntax.

Go to: Customize > Custom Theme (Edit HTML)
And in your HTML template code add this just before head tag:

<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>