Blogger SyntaxHighlighter 根本不起作用答案

【问题标题】：Blogger SyntaxHighlighter doesn't work at allBlogger SyntaxHighlighter 根本不起作用
【发布时间】：2012-09-17 18:13:49
【问题描述】：

我已经尝试在 Blogger 上安装 SyntaxHighlighter 3.0.83 几个小时了。我已经尝试了很多教程，但它仍然不起作用。我的意思是它看起来就像插入到 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>

但是同样的前置标签在博主上不起作用。

我也试过粘贴

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

在正文的末尾，在 b:skin 标签的末尾粘贴样式。两者都不起作用。而且我不会将代码粘贴到撰写部分:) 我很困惑，所以任何帮助将不胜感激。

【问题讨论】：

尝试在您的博文中仅放置预先标记的代码（用于测试目的）。此外，SyntaxHighlighter 不适用于预览和动态视图（需要调整）。

标签： blogger syntaxhighlighter blogger-dynamic-views

【解决方案1】：

与 Stefan 的回答类似，我能够在使用简单模板的博客帐户中使其工作。

我是这样做的：

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>

这是我能够使其工作的唯一方法，其中 Stefan 提到的 #2 可能是由于引导问题，因此需要将其放入主体中。这里是my blog post which uses this and successfully displays the Javascript

【讨论】：

【解决方案2】：

对于动态视图，帖子的内容似乎是在引导语法高亮过程的脚本之后加载的。你可以解决它：

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

【讨论】：

您可以在模板中短暂延迟后运行设置代码 - 请参阅我对stackoverflow.com/questions/6849890/…的回答

【解决方案3】：

我遇到了同样的问题。设置 SyntaxHighlighter 的说明看起来很简单。并且所有教程或多或少都具有可比性，包括评论“在我的博客上它有效，如果它不适合你，那么你一定做错了什么”。没有什么对我有用，我没有突出显示。

解决方案是切换到另一个 Blogger 模板。它只是不适用于我选择的动态模板。切换到一个简单的模板就可以了。突出显示现在有效。

顺便说一句：在寻找错误的同时，我还尝试了Prettify 作为替代方案。它也没有工作。似乎动态模板做了一些导致两个语法荧光笔都失败的事情。

【讨论】：

没想到。我只尝试过动态模板。谢谢。

【解决方案4】：

如果您来到这里，那么这个详细的答案可能会对您有所帮助： 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 控制台都会显示如下内容：

【讨论】：

【解决方案5】：

发布您的 sn-ps at gisthub 并像 youtube 视频一样嵌入（复制 HTML 嵌入代码

并粘贴到您的帖子中）。瞧！（图片由http://www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html提供）

【讨论】：

【解决方案6】：

虽然最初的问题得到了回答，但我偶然发现了一个导致语法突出显示失败的不同问题，并认为有人在此处提及解决方案可能会有所帮助。

我发现博主预览默认使用https://打开帖子，这会强制所有页面链接到https。当使用来自 alexgorbatchev 主机的样式表时，会导致加载失败，因此突出显示将不起作用。这些错误会显示在开发者工具控制台中。

目前该问题只能出现在 blogger domen 下的博客中，因为自定义 domen 不支持 https。此外，默认情况下禁用使用 https 的公共访问，因此这主要是发布预览的问题，可以轻松解决。但是，如果启用了 https 的公共访问，则突出显示将不起作用。

【讨论】：

TL;DR – 监听 viewitem 事件

可自定义回调的替代方案

TL;DR – 监听 `viewitem` 事件