18

我已经尝试在 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>

但是相同的 pre 标签在博客上不起作用。

我也试过粘贴

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

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

4

6 回答 6

20

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

<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>
于 2012-10-12T08:11:17.517 回答
11

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

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

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

于 2012-09-30T20:53:53.820 回答
4

在 gisthub 上发布您的片段并像 youtube 视频一样嵌入（复制 HTML 嵌入代码

在此处输入图像描述

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

于 2014-07-04T16:33:33.540 回答
3

与 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 可能是由于引导问题，因此需要将其放入体内。这是我的博客文章，它使用它并成功显示了 Javascript

于 2014-11-26T05:24:46.677 回答
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控制台

于 2019-02-13T04:14:42.663 回答
1

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

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

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

于 2016-03-27T14:22:51.717 回答