WordPress.org

1. huyz
   Member
   Posted 10 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://wordpress.org/extend/plugins/syntaxhighlighter/

2. pjnovas
   Member
   Posted 1 month 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!

Reply

You must log in to post.