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.

Are you sure your HTML is correct? I.e. you have `
...
`. Because this works for me...http://jsbin.com/alADiKo/1/edit — davidpauljunior, Dec 06 '13 at 01:32
Pretty sure. The code snippets are successfully getting formatted by prettify. Interesting to see that it is in fact working on that page. I wonder if the tumblr theme is somehow overriding the behaviour.The one difference I notice between your code on that page and the code in the theme is there is no container set anywhere. Not sure if that makes any difference. I should also mention, I am still just set to the default tumblr theme Optica. — Mathieson, Dec 06 '13 at 01:41
Ah ok, it's the theme I think. I just previewed the theme and tested adding your HTML. In your CSS, try adding: `white-space: pre; word-wrap: normal;`. — davidpauljunior, Dec 06 '13 at 03:19
Perfect! Thanks! Never would have gotten that. Gotta look up what is special about that combination now. Thanks a bunch! — Mathieson, Dec 06 '13 at 03:34
No problem. The code I gave in the comment above is setting the properties back to their default values. — davidpauljunior, Dec 06 '13 at 03:39
@davidpauljunior, how does that compare to `white-space: pre-wrap`? — Mike Samuel, Dec 06 '13 at 16:48
@MikeSamuel `pre-wrap` will wrap when necessary and on line breaks, `pre` will only wrap on line breaks. — davidpauljunior, Dec 08 '13 at 21:50
@davidpauljunior, does `word-wrap:normal` affect the wrapping behavior `white-space:pre`? — Mike Samuel, Dec 10 '13 at 04:53
@MikeSamuel with `word-wrap: normal` and `white-space: pre` the text will _only_ wrap when there are line breaks in the content. When using `word-wrap: break-word` and `white-space: pre`, behaviour seems to be the same as `break-word` and `pre-wrap` combo. I've listed them all out here. http://jsbin.com/OSuNatep/1/edit — davidpauljunior, Dec 10 '13 at 05:37

score 6 · Answer 1 · answered Sep 26 '14 at 08:24

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>

Horizontal scroll area for displaying code snippets on tumblr

1 Answers1