• Home »
  • »
  • WordPress Syntaxhighlighter Evolved: No Wrap Alternating Background Colors Cut Off

WordPress Syntaxhighlighter Evolved: No Wrap Alternating Background Colors Cut Off

I have been using the WordPress Syntaxhighlighter Plus plugin to display code for quite awhile now. Today I wanted to check on recent updates and through reading on the developers site found out that the code is no longer maintained and he recommends people use the WordPress Syntaxhighlighter Evolved plugin instead. I decided to go ahead and download the Syntaxhighlighter Evolved plugin and test it on my development site. I was pleased immediately with the choice and knew that I would be moving it live as soon as I had any kinks worked out. There was only one thing holding me bac which was the fact that with the code wrap turned off the CSS for alternating colors and for the highlighting was cut off when you started to scroll to any code that spilled out past the default size. The plugin also blew out the right side of my site a bit so I needed to modify a couple CSS width parameters. I describe a workaround for the alternating colors being cut off below as well as how to set the width so it doesn’t blow out your layout.

Syntaxhighlighter Evolved Work Around For CSS Background Colors Issue:

So the work around here is to simply set the alternating colors both to the same color as the entire background color you are using. Personally I prefer to have the alternating colors but this plugin was so much better for code than the previous one I was using I decided that I would settle with one color for now until I can either find a resolution or the Syntaxhighlighter code is updated and its finds its way to the Syntaxhighlighter Evolved plugin. So to have one solid color just modify the CSS of the theme you are using and change the below four CSS color statements. This will also change the background color of the numbers so you could technically have that background a different color if you wanted to do so. The themes are in the “wp-root/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/styles” directory and start with shTheme such as shThemeDefault.css.

CSS Changes To Make One Solid Color Background:


  1. .syntaxhighlighter
  2. {
  3.         background-color: #eee !important;
  4. }
  5. .syntaxhighlighter .line .number
  6. {
  7.         color: #787878 !important;
  8.         background-color: #eee !important;
  9. }
  10. /* First line */
  11. .syntaxhighlighter .line.alt1
  12. {
  13.         background-color: #eee !important;
  14. }
  16. /* Second line */
  17. .syntaxhighlighter .line.alt2
  18. {
  19.         background-color: #eee !important;
  20. }

Modify CSS To Resolve Syntaxhighlighter Evolved Width Issues:

Now if the Syntaxhighlighter Evolved plugin is causing you any trouble with the design being blown out on the right hand side of your site you need to adjust the width in a couple places within the shCore.css file. The shCore.css file is located in the “wp-root/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/styles” directory along with the other CSS files mentioned above. There are two modifications to make to resolve the problem. The first is to remove an !important tag which will block you from modifying the width. Modify both CSS configurations below though you will have to play around with the actual width to find the right setting for your WordPress sites template. The first option where the !important tag is removed is near the top of the shCore.css file but I removed all the other elements to shorten the display below so just remember that the change is the removal of the !important option.

CSS Changes To Make In shCore.css To Resolve Width Issues:


  1. .syntaxhighlighter,
  2. .syntaxhighlighter div,
  3. .syntaxhighlighter code,
  4. .syntaxhighlighter table,
  5. .syntaxhighlighter table td,
  6. .syntaxhighlighter table tr,
  7. .syntaxhighlighter table tbody
  8. {
  9.         width: auto;
  10. }
  11. .syntaxhighlighter .lines.no-wrap
  12. {
  13.         width: 508px;
  14.         overflow: auto !important;
  15.         overflow-y: hidden !important;
  16. }

The part of the second element that was changed was modifying the width from “width: 100%;” to “width: 508”. You will need to play around with that setting on your site until you have the width correctly configured. The Syntaxhighlighter Evolved plugin is awesome so hopefully in the near future a resolution will be located for the alternating colors CSS issue.

WordPress Plugin Development (Beginner’s Guide) (Paperback)

List Price: $39.99 USD
New From: $9.90 USD In Stock
Used from: $2.16 USD In Stock

Building a WordPress Blog People Want to Read (Paperback)

List Price: $29.99
New From: $2.95 USD In Stock
Used from: $0.01 USD In Stock