0

I use SyntaxHighlighter Evolved to show code on my wordpress sites. One one site using the TwentyTwelve theme, everything works as expected. However, on another that uses Virtue, all the code is shifted down one line when line numbering is turned on. I saw one comment on this, but I couldn't figure out what they were changing. Has anyone else seen this, and if so, is there any easy fix in css or similar?

Edit: to follow up, I realized that the shift does not occur in Chrome but only in Firefox. A typical occurrence is here.

enter image description here

ARM
  • 1,520
  • 1
  • 12
  • 24

2 Answers2

2

I ran into the same problem. How you can fix it (and what was meant in the comment you are referring to) is:

Edit the CSS file you are using, e.g. .../syntaxhiglighter/styles/shCore.css

Navigate to line 44 where it says:

  vertical-align: baseline !important;

and change it to:

  vertical-align: top !important;
Nathaniel Ford
  • 20,545
  • 20
  • 91
  • 102
George
  • 256
  • 3
  • 9
1

If anyone else is still suffering from this problem. It seems that some stylesheets may suffer from a different bug than the one described in George's answer.

Some stylesheets add pseudo-elements to tables. They do this to space out the elements. However, syntaxhighlighter evolved also makes use of tables, which means, your code will also be spaced out, misaligning it with the line numbers. To fix this we just have to remove these pseudo-elements by adding the following code to our websites custom css:

/*Fix stylesheet bug with syntaxhighlighter evolved and firefox*/
.syntaxhighlighter div::before, .syntaxhighlighter div::after{
    content: none /*remove pseudo-elements*/
}
Maarten
  • 11
  • 1