Saturday, October 27, 2012

Syntax highlighter issue with google chrome

The code with SyntaxHighlighter shows wrong line formatting in google chrome. Screen Shot 2012 10 27 at 10 10 36 AM
I found that this is a known issue with of line formatting, check this site.

The http://alexgorbatchev.com/pub/sh/current/styles/shCore.css source has the line that causes this problem.
Screen Shot 2012 10 27 at 10 16 49 AM

There are easy two solutions.

Solution 1

Modify the shCore.css : replace this line.
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important; <-- Replace this line
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 5px  !important;
}
Or make it point to where the bug is fixed. : http://codeoncloud.co.cc/shCore.css

Solution 2

Add following line after Configure HTML/JavaScript edit. Screen Shot 2012 10 27 at 10 19 03 AM

Following code should be added.


1 comment:

  1. This explains the concept really well and thanks for sharing. hope this will also help u to make it more effective:
    http://stackoverflow.com/questions/11804789/extra-lines-using-syntaxhighlighter-for-chrome-only/23602138#23602138

    ReplyDelete