5

I have a blog on blogger.com and would like to format my code example in my post.

What do I need to use to format the code snippet in my blog post?

mekbib.awoke
  • 1,094
  • 1
  • 9
  • 16
  • Check the post out [here](https://stackoverflow.com/questions/679189/formatting-code-snippets-for-blogging-on-blogger/5615444#5615444). I used it create this [blogpost](http://codersspot.blogspot.com/2020/04/httpwebrequest-stringjoin-and.html) – R.S.K Apr 19 '20 at 06:47
  • https://www.sagapatra.in/2020/04/how-to-insert-code-snippet-in-blogger-articles.html – Arrow Apr 21 '20 at 11:48

6 Answers6

2

Here is a Blogger.com blog with a tutorial post on how to do it Syntax Highlighting with Blogger Engine Either try using Hilite for converting the code to embedable one or use Gist - this would be the easiest solution.

If by any chance it's outdated solution for your needs then read this: Formatting code snippets for blogging on Blogger

Add syntax highlighter in your template just above the tag:

<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/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

And then just add the code snippet.

richardev
  • 976
  • 1
  • 10
  • 33
  • This works fine, when our blog also uses `http` instead of `https` protocol. Chrome blocks all the calls from secure host (https) to http calls. Is there any other choice to use syntax highlighters for `https` blogs. – Paramesh Korrakuti Sep 01 '21 at 16:10
1

Syntax highlighting depends on what programming language code you are trying to highlight. Different languages will have to be highlighted differently.

It's best to use a third party library to take care of that for you.

Here's a tutorial on how to do that in Blogger: How To Format Code Snippets In Blogger Posts

BigName
  • 1,018
  • 2
  • 14
  • 29
1

You can use Highlight JS.

Go to themes and edit html, place below codes in .

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>

Write your code under <pre><code></code></pre>

Or you can use gist.github.com to create gists and copy embeded code to your blog.

cdev
  • 5,043
  • 2
  • 33
  • 32
1

The answer given by @cdev is correct but outdated. June, 2021 the code that is working for me is:

<link href='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/default.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/highlight.min.js'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/languages/dart.min.js'/>
<script>
    hljs.configure({cssSelector: &quot;code&quot;});
    hljs.highlightAll();
</script>

This previous code has to be added just before the <head> tag.

By the default the highlighted code has to be written under <pre><code></code></pre> if you also want to be able to hightlight code bettwen <code></code> you have to add this line hljs.configure({cssSelector: &quot;code&quot;});

This line <script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/languages/dart.min.js'/> will make dart code to be highlighted. If the language you are using is not highlighted by default you may need to add a similar line. Check the supported languages

You can see this article in my blog

Yayo Arellano
  • 3,575
  • 23
  • 28
0

Syntax highlighting works perfectly at blogger

But I suggest you to NOT use Blogger, there are better alternatives available now a days (all free like blogger). proof: Search on google "Top Blogging sites", blogger will be seen NO Where.

0

You can try: Carbon

I'm using it, and it's the best & fast & editable tool that I used for this purpose.

Michael Tsioni
  • 11
  • 2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/31835828) – no ai please May 26 '22 at 22:13