CODEWITHSUNDEEP
syntax-highlightingbloggerblogger-dynamic-views
muazfaiz
muazfaiz

Reputation: 5031

Blogger syntax highlighter does not work all the time

I am writing a blog in blogger and using syntax highlighter to highlight my code. I did that successfully last day and it was highlighting the syntax correctly. But today i viewed the same blog again but the syntax was not highlighting.

I followed this tutorial for syntax highlighting and it worked fine but now it does not do that. What could be possible reasons for that ?

This is my blog page and if you go at the very end you'll see that there is some code but it is not highlighting it. Also if you go to inspect element you'll see that the code is placed inside the specific tag described in the tutorial.

Edit

In the same page I mentioned you can see that few formulas are still working fine but the others are not. Please correct me If I am wrong that If it a protocol relative URL issue then others might not work as well ? Also what could be the way out ? I mean in blogger how can I do that ?

Upvotes: 0

Views: 580

Answers (2)

reacraf
reacraf

Reputation: 1

I had the same problem with that tutorial. The syntax highlighter only worked once but stopped working as soon as I refreshed the page.

The solution was using a different syntax highlighter:

1- Make sure you remove any/all jquery references

2- In you theme, add this before the cloasing head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/go.min.js"></script>

<script type="text/javascript">$(document).ready(function() {
        $('pre').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
</script>

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">

3- If for some reason, you get an error from the editor saying there needs to be a closing "" tag. Please remove the line:

Then, copy the css from here: http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css

And paste it inside the style tags (create them if not available in your template):

<style type="text/css">
//the copied css goes here
</style>

Last step is to save all changes and refresh the page

Upvotes: 0

Prayag Verma
Prayag Verma

Reputation: 5651

The issue is with the HTTPS version only. In the HTTP version, the code highlighting works, for example - http://lovefordatascience.blogspot.co.uk/2017/09/support-vector-machines-understanding.html

I would suggest changing all the resources used on the blog to have protocol relative URLS - Refer to Can I change all my http:// links to just //?

HTTPS Error

Upvotes: 0

Related Questions