Дополнительные линии, использующие SyntaxHighlighter только для Chrome?

Дополнительные строки вставляются, когда я использую Chrome для просмотра черновика блога (в блогере), который использует синтаксический ярлык, например.

Но в IE это выглядит нормально:

Любые идеи, что я делаю неправильно здесь?

изменить:

Конфигурация/настройка для SyntaxHighlighter, которую я использую, находится ниже:

<!-- Syntax Highlighter Additions START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushcsharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

изменить:

И сгенерированный HTML:

<pre class="brush: csharp;">using System;
<br />using System.Text;
<br />using System.Collections.Generic;
<br />using System.Linq;
<br />using Microsoft.VisualStudio.TestTools.UnitTesting;
<br />using AccountTypeFollowUp;
<br />
<br />namespace PluginsUnitTests
<br />{
<br />    [TestClass]
<br />    public class AccountTypeFollowUpTests
<br />    {
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Supplier()
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Client()
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Other)
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />    }
<br />}
<br /></pre>

Ответы

Ответ 1

Имея ту же проблему; он, по-видимому, вызван этим разделом файла shCore.css:

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}

Если я заменил 'padding' на:

padding: 0 5px  !important;

Нумерация корректно работает в Chrome (без негативного влияния на Firefox и IE), поэтому на данный момент у меня есть мой блог, указывающий на настроенный shCore.css, а не http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

Ответ 2

Вставить до <pre class="brush: js;">

<style>
    .syntaxhighlighter table td.gutter .line {
        padding: 0 !important;
    }
</style>

Ответ 3

Нет необходимости ссылаться на другой файл CSS. Вставьте следующий блок стиля после тега ссылки, который ссылается на shCore.css:

<style>
  .syntaxhighlighter table td.gutter .line {
    padding: 0 5px !important;
  }
  .syntaxhighlighter table td.code .line {
    padding: 0 !important;
  }
  .syntaxhighlighter .gutter {
    padding-right: 1em !important;
  }
  .syntaxhighlighter table {
    padding-bottom: 1px !important;
  }
</style>

.syntaxhighlighter table td.gutter .line добавляет 5 пикселей горизонтальной прокладки вокруг каждого номера строки.

.syntaxhighlighter table td.code .line удаляет все отступы из самой строки кода.

.syntaxhighlighter .gutter добавляет 1 em отступов между желобом и строкой кода.

.syntaxhighlighter table решает проблему переполнения, которую я видел с Chrome. Для блоков кода, которые переполнялись по горизонтали, Chrome показывал вертикальную полосу прокрутки, которая могла быть прокручена на 1 пиксель. Добавление 1 пикселя прокладки к таблице внутри контейнера div зафиксировало его.

Ответ 4

Я не мог заставить любое из этих решений работать. Тем не менее, комментарий в этот вопрос дал мне решение...

Открыл редактор шаблонов (редактирование html) и искал "13px". Рядом с определениями переменных было два экземпляра. Я обновил размер шрифта до 12 пикселей, и все сработало.

     <Variable name="body.font" description="Font" type="font"
     default="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

Ответ 5

У вас такая же проблема с blogger.com и последним Firefox.
Я обнаружил, что это происходит из-за перекрытия стилей в классе .container, поэтому в основном вы должны переименовать класс в нечто вроде .containerSH в SyntaxHighlighter.
См. Мой commit: change.container → .containerSH
Теперь он работает нормально для меня.