'Blogger.com: How to embed formatted code snippet in a blog post? [duplicate]

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?

javascriptcsshtmlblogsazure-devops-extensionstfx


Solution 1:[1]

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.

Solution 2:[2]

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

Solution 3:[3]

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.

Solution 4:[4]

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/[email protected]/styles/default.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/[email protected]/highlight.min.js'/>
<script src='https://unpkg.com/@highlightjs/[email protected]/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/[email protected]/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 the result in my blog

Solution 5:[5]

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.

Solution 6:[6]

You can try: Carbon

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

Solution 7:[7]

I had the same issue. I guess the postbuild command is wrong:

"postbuild": "npm run package-extension -- --rev-version"

This works:

"postbuild": "npm run package-extension --rev-version"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 BigName
Solution 3 cdev
Solution 4
Solution 5
Solution 6
Solution 7 Nico

Related Questions