Область горизонтальной прокрутки для отображения фрагментов кода на Tumblr

Question

Я пытаюсь настроить мою тему Tumblr с помощью настройки prettify и css для отображения фрагментов кода Python. Я новичок в css, но теперь у меня все работает так, как я хочу (спасибо, что поищу в Интернете примеры). Тем не менее, текст переносится слишком долго, и я не смог понять, как заставить его просто отображать полосу прокрутки.

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

Вот что я использую прямо сейчас. Я нашел несколько страниц, в которых говорилось, что я хочу добавить пробел: сюда, но после просмотра всех параметров ни один из них, похоже, не работает. Опция nowrap позволяет избежать разрывов строк.

Если я добавлю width: 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>