Blogger SyntaxHighlighter doesn't work at all

P

6

18

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.

Pneumoencephalogram answered 17/9, 2012 at 18:13 Comment(1)

Try put only pre tagged code on your blog post(for testing purpose). Also, SyntaxHighlighter doesnt work on preview and dynamic view(need tweaks). – Signally 1/10, 2014 at 13:19

F

11

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.

Fatality answered 30/9, 2012 at 20:53 Comment(1)

Haven't thought about that. I have tried only dynamic templates. Thank you. – Pneumoencephalogram 2/10, 2012 at 18:24

S

20

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>

Symbolics answered 12/10, 2012 at 8:11 Comment(1)

You can run the setup code after a short delay in the template - see my answer to #6850390 – Lissie 10/3, 2013 at 22:46

F

11

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.

Fatality answered 30/9, 2012 at 20:53 Comment(1)

Haven't thought about that. I have tried only dynamic templates. Thank you. – Pneumoencephalogram 2/10, 2012 at 18:24

C

4

Post your snippets at gisthub and embed like youtube video (copy HTML embedding code

enter image description here

and paste into your post). Voila! (image courtesy http://www.restlessprogrammer.com/2013/02/adding-code-snippets-to-your-blog.html)

Complication answered 4/7, 2014 at 16:33 Comment(0)

U

3

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

Upstate answered 26/11, 2014 at 5:24 Comment(0)

R

1

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.

Ricercare answered 27/3, 2016 at 14:22 Comment(0)

D

1

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:

Deform answered 13/2, 2019 at 4:14 Comment(0)

TL;DR – Listen for the `viewitem` event

Alternative with customizable callback

Recommended topics

Hot tags

TL;DR – Listen for the viewitem event

Alternative with customizable callback

Recommended topics

Hot tags

TL;DR – Listen for the `viewitem` event