Blogger SyntaxHighlighter根本不起作用

时间：2012-09-17 18:13:50

标签： blogger syntaxhighlighter blogger-dynamic-views

我一直试图在Blogger上安装SyntaxHighlighter 3.0.83几个小时。 我已经尝试了很多教程，但它仍然无效。我的意思是它看起来像正常文本插入到标签之前。

我创建了一个新博客并粘贴了：

<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标签末尾的粘贴样式。两者都不起作用。 而且我不会将代码粘贴到Compose部分:) 我很困惑所以任何帮助都会非常感激。

6 个答案:

答案 0 :(得分：19)

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

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

答案 1 :(得分：10)

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

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

顺便说一句：在追逐错误的同时，我也尝试Prettify作为替代方案。它也没用。似乎动态模板做了一些导致语法高亮显示失败的事情。

答案 2 :(得分：4)

发布您的代码段at gisthub并嵌入像youtube视频（复制HTML嵌入代码

enter image description here

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

答案 3 :(得分：2)

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

我是这样做的：

1.将标签<link>和<script>用于导入<head>

中的CSS和JS文件

2.然后在<body>中放置初始化或调用荧光笔的JS脚本：

<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

答案 4 :(得分：1)

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

我发现博主预览默认使用https：//打开帖子，这会强制所有页面链接都为https。当使用来自alexgorbatchev托管的样式表导致无法加载它们时，突出显示将不起作用。这些错误显示在开发人员工具控制台中。

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

答案 5 :(得分：1)

如果您已经登陆这里，这个详细的答案可能会为您提供帮助： 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

相关问题
最新问题