Blogger SyntaxHighlighter вообще не работает

Я пытался установить SyntaxHighlighter 3.0.83 на Blogger пару часов. Я пробовал много учебников, но это все еще не работает. Я имею в виду, что это выглядит как обычный текст, вставленный в тег pre.

Я создал новый блог и вставил:

<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'     type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

... как раз перед закрытием тега head. Вставленный выше код был сгенерирован здесь: generator

Странно то, что это работает в моем собственном html-документе. Например:

<html>
<head>
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class='brush:java;'>import gt.memorize;
public class Test
{
    private static final String test = "test";
}</pre>
</body>

</html>

Но тот же тег pre не работает на blogger.

Я также пробовал вставлять

<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

в конце тела и вставки стилей в конце тега b:skin. Ни то, ни другое не работает. И я не вставляю код в часть Compose :) Я очень запутался, поэтому любая помощь будет очень признательна.


blogger syntaxhighlighter blogger-dynamic-views
person g-t    schedule 17.09.2012    source источник
comment
Попробуйте разместить в своем блоге только предварительно помеченный код (для целей тестирования). Кроме того, SyntaxHighlighter не работает при предварительном просмотре и динамическом просмотре (требуются настройки).   -  person Syaiful Nizam Yahya    schedule 01.10.2014

Ответы (6)


arrow_upward
11
arrow_downward

У меня такая же проблема. Инструкции по настройке SyntaxHighlighter кажутся достаточно простыми. И все уроки были более или менее сопоставимы, включая комментарий «в моем блоге это работает, если это не работает для вас, значит, вы делаете что-то не так». У меня ничего не работало, у меня не было подсветки.

Решением было переключиться на другой шаблон Blogger. Это просто не сработало с выбранным мной динамическим шаблоном. Переход на простой шаблон помог. Подсветка теперь работает.

Кстати: в погоне за ошибками я также попробовал Prettify в качестве альтернативы. Это также не сработало. Похоже, что динамический шаблон сделал что-то, что привело к сбою обоих подсветчиков синтаксиса.

person Heinrich Ulbricht    schedule 30.09.2012
comment
Не думал об этом. Я пробовал только динамические шаблоны. Спасибо. - person g-t; 02.10.2012

arrow_upward
20
arrow_downward

Для динамических представлений содержимое сообщения, кажется, загружается после сценария, который запускает процесс подсветки синтаксиса. Вы можете обойти это:

<pre class="brush: js" title="test" id="sh3-123">
var f = function () {
    return 1;
};
</pre>

<script type="text/javascript">
// code snippet is loaded here, use SH3 API to highlight it
var element = document.getElementById('sh3-123');
SyntaxHighlighter.highlight(undefined, element);
</script>
person Stefan    schedule 12.10.2012
comment
Вы можете запустить код установки после небольшой задержки в шаблоне — см. мой ответ на stackoverflow.com/questions/6849890/ - person grkvlt; 11.03.2013

arrow_upward
4
arrow_downward

Размещайте свои фрагменты на gisthub и встраивайте как видео на YouTube (скопируйте HTML-код для встраивания

введите здесь описание изображения

и вставить в свой пост). Вуаля! (изображение предоставлено http://www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html)

person Val    schedule 04.07.2014

arrow_upward
3
arrow_downward

Подобно ответу Стефана, я смог заставить его работать в своей учетной записи блоггера, которая использует простой шаблон.

Я сделал это так:

1. Поместите теги <link> и <script> для импорта файлов CSS и JS в <head>

2. Затем поместите JS-скрипт, который инициализирует или вызывает подсветку, в <body>:

<script language="javascript">     
            SyntaxHighlighter.config.bloggerMode = true;
            SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
            SyntaxHighlighter.all(); 
</script>

Это единственный способ, которым я смог заставить его работать, при этом № 2, как упомянул Стефан, вероятно, связан с проблемой начальной загрузки, поэтому его необходимо поместить в тело. Вот моя запись в блоге, в которой используется это и успешно отображает Javascript

person Carlos Jaime C. De Leon    schedule 26.11.2014

arrow_upward
1
arrow_downward

Хотя на исходный вопрос дан ответ, я наткнулся на другую проблему, вызывающую сбой подсветки синтаксиса, и подумал, что кому-то может быть полезно упомянуть здесь решение.

Я обнаружил, что предварительный просмотр блоггера по умолчанию открывает сообщение с https://, что заставляет все ссылки на страницы использовать https. При использовании таблиц стилей с хостинга alexgorbatchev это приводит к невозможности их загрузки, поэтому подсветка работать не будет. Эти ошибки отображаются в консоли инструментов разработчика.

На данный момент эта проблема может проявляться только в блогах под доменом blogger, так как нет поддержки https с пользовательскими доменами. Кроме того, публичный доступ через https отключен по умолчанию, так что в основном это проблема с предварительным просмотром публикации, которую можно легко обойти. Однако, если включен публичный доступ по https, выделение не будет работать.

person sichevoid    schedule 27.03.2016

arrow_upward
1
arrow_downward

Если вы попали сюда, этот подробный ответ, вероятно, поможет вам: https://stackoverflow.com/a/14659603

TL;DR Прослушайте событие viewitem

Проблема заключается в том, что тема Blogger «Динамические представления» загружает содержимое статей блога после того, как страница готова. К счастью, вы можете зарегистрировать обратный вызов для события загрузки содержимого.

В консоли Blogger Theme Edit HTML непосредственно перед </head> вставьте строку:

<script>$(blogger.ui()).on({ viewitem: SyntaxHighlighter.all });</script>

Нажмите Save theme, и теперь подсветчик будет запускаться после загрузки содержимого статьи блога.

Альтернатива с настраиваемым обратным вызовом

Если вам нужно больше гибкости, создайте собственную функцию:

<script>
   const onArticleLoad = (event, post, elem) => {
      const title = $('h1.entry-title').text().trim();
      console.log('Article: %c' + title, 'color: purple;');
      console.log(event, post, elem);
      };
   $(window.blogger.ui()).on({ viewitem: onArticleLoad });
</script>

Затем всякий раз, когда вы просматриваете статью в блоге, консоль js будет показывать что-то вроде: js console

person Dem Pilafian    schedule 13.02.2019