WordPress.org

Ready to get started?Download WordPress

Forums

SyntaxHighlighter Evolved
Wrap lines on mobile touch device (2 posts)

  1. huyz
    Member
    Posted 2 years ago #

    When I'm viewing my page on an iPhone, the WPTouch 2 plugin displays most things nicely. But since there are no scrollbars on a touch device, the code lines displayed by SyntaxHighlighter are just cropped.

    What would be the way to style so that we can have

    white-space: pre-wrap;
    word-wrap: break-word;

    in effect and thus have the code wrap?

    http://wordpress.org/extend/plugins/syntaxhighlighter/

  2. pjnovas
    Member
    Posted 2 years ago #

    I'm having the same issue ... I did this to fix it:

    Override this one:

    .syntaxhighlighter table td.code .line {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    And for code line numbers to not being shown when is a mobile device (cause with break word, the line numbers does not look well):

    @media screen and (max-width: 680px) {
    	.syntaxhighlighter .gutter {
    	  display:none;
    	}
    }

    Version 3 of SyntaxHighLighter

    Hope it helps!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic