Question

我正在使用 - 或者我正在尝试将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>
...

我遇到问题的示例帖子是this one。代码包含在pre / code标签中，背景为灰色 - 因此CSS应该正确加载。但实际上并没有突出显示。但是当我键入以下内容时：

Rainbow.color();

在JavaScript控制台中手动显示颜色（语法高亮显示）。我不知道什么是错的，有人能给我一个提示吗？

编辑：

我之前添加了以下内容：

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

不幸的是，无论是onload还是手动Rainbow.color();都无效......

Answer 1

你已经拥有了所有的作品。来自the documentation：

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>。

Answer 2

我使用'window.history'作为单页面应用程序（SPA）将页面加载到index.php并遇到同样的问题 - rainbow.js没有颜色代码。但是如果我直接在浏览器中打开包含代码的页面就可以了。

在使用'window.history'调用rainbow.js后，在每个页面的末尾添加它可能会在博客上出现同样的问题：

<script src="/scripts/rainbow-custom.min.js"></script>
<script>
    setTimeout(Rainbow.color, 1000);
</script>

rainbow.js不运行Rainbow.color（）;在启动时

2 个答案: