rainbow.js не запускается Rainbow.color(); на старте

Я использую - или, может быть, я пытаюсь использовать rainbow.js библиотека подсветки синтаксиса для фрагментов кода, которые я публикую в своем блоге (Google Blogger). Я думаю, что я использую это правильно:

<pre><code data-language="python">
// here goes the code
</code></pre>

И все необходимые библиотеки загружаются в HTML HEAD раздел:

<link href="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.1.8/themes/github.min.css" rel="stylesheet" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.1.8/js/rainbow.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.1.8/js/language/generic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.1.8/js/language/python.min.js"></script>
...

Вот пример поста, с которым у меня проблемы. Код обернут в теги pre/code, а фон имеет серый цвет, поэтому предполагается, что CSS загружен правильно. Но на самом деле нет подсветки. Но когда я набираю следующее:

Rainbow.color();

вручную в JavaScript консоль, цвета (подсветка синтаксиса) действительно появляется. Я не знаю, что случилось, кто-нибудь может дать мне подсказку?


редактировать:

Я добавил следующее прямо перед:

<script language='javascript' type='text/javascript'>
  window.onload=function(){ Rainbow.color(); };
  Rainbow.color();
</script>

К сожалению, ни на нагрузку, ни в ручную Rainbow.color(); работает...

2 ответа

У вас уже есть все кусочки. Из документации:

Rainbow.color

Этот метод вызывается для выделения всех блоков на странице при загрузке. Если вы хотите выделить вещи, которых нет в DOM, вы можете вызвать их самостоятельно. Есть три способа его использования.

Одним из вариантов является добавление новых блоков кода в DOM, а затем повторный вызов метода:

// alone
Rainbow.color();

// or with a call back
Rainbow.color(function() {
    console.log('the new blocks are now highlighted!');
});

Когда вы выполняете сценарии в <head> нет никаких <body> еще.

Я использовал 'window.history' в качестве одностраничного приложения (SPA) для загрузки страниц в index.php и имел ту же проблему - rainbow.js не использует цветовой код. Но если я открою страницу с кодом прямо в браузере, это сработает.

Добавление этого в конце каждой страницы после вызова rainbow.js заставило его работать при использовании 'window.history' - такая же проблема может быть в блоге:

<script src="/scripts/rainbow-custom.min.js"></script>
<script>
    setTimeout(Rainbow.color, 1000);
</script> 
Другие вопросы по тегам