How do I set up a syntax highlighter on Blogger?

Question

How do I set up a syntax highlighter on Blogger's new interface? I did try with many options but nothing has worked. Please give any suggestions.

Why close the question? If the question is vague, it can be edited. The answers are good, and helped to solve the problem that is asked. Perhaps move this to webapps.stackexchange.com? — Hanxue, Mar 26 '14 at 09:28
Absolutely stupid and self-contradictory close reason, very normal for the SO. For syntax highlighting in blogger, use github gist code embedding, the way you post on youtube and embed videos. — Val, Jul 04 '14 at 16:00
I think its guide available at their own site.. by the way you should look at social content locker for blogger here---http://stackoverflow.com/questions/27619171/social-content-locker-for-blogger-com-blogs-is-it-possible — craig lerr, Jan 03 '15 at 09:22
You can make use of https://gist.github.com for it, putting your code in blog is not always a great idea if you can't update it ;) — Vinod Srivastav, Dec 10 '16 at 10:20
@VINOTHENERGETIC you can see it working here http://stackoverflow.com/questions/10560435/change-githubs-default-gist-styles/41550307#41550307 — Vinod Srivastav, Apr 28 '17 at 04:09
@VinodSrivastav I think we cannot create a secret gist and link to blogger and how do you say it will be SEO friendly when I create a gist as public gist? — VINOTH ENERGETIC, Apr 28 '17 at 16:05
@VINOTHENERGETIC Just try once, secret gist will not come in search results and what you mean by SEO friendly actually ? — Vinod Srivastav, Apr 30 '17 at 10:15
I would like to give an updated (new) answer but I can't... I used to use the old SyntaxHighlighter, but they made it way more complicated to use and include all of the files now... I found https://highlightjs.org https://github.com/highlightjs/highlight.js https://highlightjs.readthedocs.io/en/latest/index.html, which works even better! It supports loooads of languages and styles/themes and is easy to use. You put your code in e.g. `
` blocks. See its Github for themes and languages to use in the code below. — Andrew, Oct 16 '19 at 04:29
Before `` (I used the VS2015 theme, you can pick your own): `` Before `
`: `` Maybe that will help someone... This works seamlessly and loads very quickly for me in Blogger. — Andrew, Oct 16 '19 at 04:31
Voting to reopen. This is a good question and helped a lot of people including me. Changes keep on happening and its important questions are open to incorporate new answers. Thanks. — Aniket Thakur, May 16 '20 at 15:27

Mahesh Meniya · Answer 1 · 2012-06-01T12:00:12.700

1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css given in this link before </b:skin> tag
3. Paste the followig code before </head> tag

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Paste the following code before </body> tag.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. You can Escape your code here.
8. Here is list of supported language for <class> attribute.

Removing some .js like "" speed up page loading time drastically — Deepscorn, Sep 06 '15 at 08:35
Google code is going to shutdown. So this might not work anymore — Jalal, Oct 22 '15 at 09:14
Talking about step 3, if you put any link (suppose hit this url http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js in browser) then its given error message 404. That’s an error. The requested URL /svn/trunk/Scripts/shCore.js was not found on this server. That’s all we know. Anyone know about this incident. — Anjan Kant, May 18 '16 at 11:51
yes, links are changed, mine blog also broken, but i fixed it via new css and js links, if anyone wants i can guide — Ehsan Sajjad, Jun 26 '16 at 06:14
@Gunaseelan , I have successfully configured using the link http://oneqonea.blogspot.com.br/2012/04/how-do-i-add-syntax-highlighting-to-my.html as said in http://stackoverflow.com/a/10374470/3424212 What have changed was to use a CDN (step 5): https://cdnjs.com/libraries/SyntaxHighlighter — mqueirozcorreia, Jan 28 '17 at 21:58

score 23 · Answer 2 · answered Apr 29 '12 at 17:52

23

Checkout http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

It's a really easy "SyntaxHighlighter for Blogger" tutorial with screenshots and everything.

You should be up and running in only a few minutes.

Also, the tutorial is built around the "new interface" you're referring to.

Hope this helps. Happy coding.

answered Apr 29 '12 at 17:52

John Erck

9,478
8
61
71

This link is great. I've used it to incorporate code highlighting in my [Software Development Blog](http://www.ayp-sd.blogspot.com). The only thing you should aware of is that the highlighted code will appear only after you publish the post. If you just preview it the code will not be highlighted. This behavior confused me a bit in the beginning. – Andrii Polunin Dec 09 '12 at 13:00
I had issues, and this one worked for me. I just wish it was a guide using the autoloader. – Xarcell Apr 28 '13 at 15:08
Link only answers are discouraged. It would be great if you can add a gist of it in the answer and redirect it to the link for more details. – Aniket Thakur May 16 '20 at 15:30

score 1 · Answer 3 · answered Mar 10 '13 at 22:40

Depending on your template, the SyntaxHighlighter JavaScript code may run before the content has loaded. In that case, changing the code to run after a short timeout should fix the problem. Try this in the <head> of your template HTML:

<script type="text/javascript">
window.setTimeout(function() {
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
}, 10);
</script>

You can add further customisation of defaults before the call to ScriptHighlighter.all().

If you want to customise the look and feel of the SyntaxHighlighter code display, add some CSS like this:

.syntaxhighlighter code {
  font-family: Consolas !important;
  font-size: 10px !important;
}

The !important is necessary to override the SyntaxHighlighter theme definitions.

How do I set up a syntax highlighter on Blogger?

3 Answers3

Linked