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

  • huyz

    (@huyz)


    14 years, 11 months 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://ww.wp.xz.cn/extend/plugins/syntaxhighlighter/

Viewing 1 replies (of 1 total)
  • pjnovas

    (@pjnovas)

    14 years, 2 months 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!

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: SyntaxHighlighter Evolved] Wrap lines on mobile touch device’ is closed to new replies.