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

  1. huyz
    Posted 5 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?


  2. pjnovas
    Posted 4 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 {

    Version 3 of SyntaxHighLighter

    Hope it helps!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • SyntaxHighlighter Evolved
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic