Как настроить подсветку синтаксиса в Blogger?

Как настроить подсветку синтаксиса в новом интерфейсе Blogger? Я попробовал много вариантов, но ничего не помогло. Пожалуйста, дайте какие-либо предложения.

Ответы

Ответ 1

1. Сначала сделайте резервную копию своего шаблона Blogger
2. После этого откройте свой блоггерский шаблон (в режиме редактирования HTML) и скопируйте все css указанные в этой ссылке, перед тем, как тег </b:skin>
3. Вставьте следующий код перед тегом </head>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Вставьте следующий код перед тегом </body>.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Сохранить шаблон Blogger.
6. Теперь подсветка синтаксиса готова к использованию, вы можете использовать ее с тегом <pre></pre>.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. Вы можете избежать вашего кода здесь.
8. Здесь - список поддерживаемого языка для атрибута <class>.

Ответ 2

Оформить заказ http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

Это очень простой учебник "SyntaxHighlighter для Blogger" со скриншотами и всем остальным.

Вы должны быть запущены и запущены всего за несколько минут.

Кроме того, учебник построен вокруг "нового интерфейса", о котором вы говорите.

Надеюсь, это поможет. Счастливое кодирование.

Ответ 3

В зависимости от вашего шаблона JavaScript-код SyntaxHighlighter может запускаться до загрузки содержимого. В этом случае изменение кода для запуска после короткого таймаута должно устранить проблему. Попробуйте это в <head> вашего шаблона HTML:

<script type="text/javascript">
window.setTimeout(function() {
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
}, 10);
</script>

Вы можете добавить дополнительную настройку значений по умолчанию перед вызовом ScriptHighlighter.all().

Если вы хотите настроить внешний вид отображения кода SyntaxHighlighter, добавьте CSS:

.syntaxhighlighter code {
  font-family: Consolas !important;
  font-size: 10px !important;
}

!important необходимо переопределить определения темы SyntaxHighlighter.