[Plugin: SyntaxHighlighter Evolved] Wrap lines on mobile touch device

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

    https://www.ads-software.com/extend/plugins/syntaxhighlighter/

Viewing 1 replies (of 1 total)

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

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: SyntaxHighlighter Evolved] Wrap lines on mobile touch device’ is closed to new replies.