问题
I've been trying to install SyntaxHighlighter 3.0.83 on Blogger for couple hours. I've tried many tutorials but it still doesn't work. I mean it looks just as normal text inserted nto pre tag.
I created a new blog and pasted:
<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>
...just before closing head tag. The code pasted above had been generated here: generator
The strange thing is that it works in my own html document. As an example:
<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>
But the same pre tag doesn't work on blogger.
I have also tried pasting
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
at the end of body and pasting styles at the end of b:skin tag. Neither works. And I don't paste the code into Compose part :) I'm very confused so any help will be extremely appreciated.
回答1:
I had the same problem. The instructions to set up SyntaxHighlighter seemed easy enough. And all tutorials were more or less comparable including the comment "on my blog it works, if it doesn't work for you then you must be doing something wrong". Nothing worked for me, I got no highlighting.
The solution was to switch to another Blogger template. It just didn't work with the dynamic template I chose. Switching to a simple template did the trick. Highlighting now works.
By the way: While chasing for errors I also tried Prettify as an alternative. It also didn't work. Seems like the dynamic template did something which caused both syntax highlighters to fail.
回答2:
For dynamic views, the post's content seems to be loaded after the script that bootstraps the syntax highlight process. You can work around it:
<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>
回答3:
Post your snippets at gisthub and embed like youtube video (copy HTML embedding code
and paste into your post). Voila! (image courtesy http://www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html)
回答4:
Similar to Stefan's answer, I was able to make it work in my blogger account which uses the Simple Template.
I did it like this:
1.Put the tags <link> and <script> for importing the CSS and JS files in the <head>
2.Then put the JS script that initialize or calls the highlighter in the <body>:
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
This the only way I was able to make it work, wherein #2 as mentioned by Stefan is probably due to bootstrap issue, hence need to put it in the body. Here is my blog post which uses this and successfully displays the Javascript
回答5:
Though the original question is answered, I've stumbled upon a different issue causing the syntax highlighting failure, and thought it might be helpful for someone to mention the solution here.
I found that the blogger preview opens the post with https:// by default, which forces all the page links to https. When using the stylesheets from alexgorbatchev's hosting that causes a failure to load them, so the highlighting won't work. Those errors show up in the developer tools console.
At the moment that issue can only show up with blogs under blogger domen, since there is no https support with custom domens. Also, public access with https is disabled by default, so that's mainly an issue with post preview, which can easily be worked around. If public access by https is enabled, though, the highlighting will not work.
回答6:
If you've landed here, this detailed answer is probably going to help you: https://stackoverflow.com/a/14659603
TL;DR – Listen for the viewitem event
The issue is that the Blogger "Dynamic Views" theme loads blog article content after the page is ready. Fortunately, you can register a callback on the content load event.
From the Blogger console → Theme → Edit HTML → just before </head>, insert the line:
<script>$(blogger.ui()).on({ viewitem: SyntaxHighlighter.all });</script>
Click Save theme and now the highlighter will be run after the blog article content has been loaded.
Alternative with customizable callback
If you need more flexibility, create your own function:
<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>
Then whenever you view a blog article, the js console will show something like:
来源：https://stackoverflow.com/questions/12464924/blogger-syntaxhighlighter-doesnt-work-at-all