3

我正在使用 - 或者我正在尝试将rainbow.js语法高亮库用于我在博客 ( Google Blogger) 上发布的代码片段。我认为我使用正确：

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

所有需要的库都加载到HTMLHEAD 部分：

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

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

4

2 回答 2

1

你已经拥有了所有的部分。从文档中：

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

于 2014-03-06T16:00:46.997 回答
0

我使用“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>
于 2014-11-26T18:49:19.637 回答