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?
Blogger.com: How to embed formatted code snippet in a blog post? [duplicate]
Asked Answered
Check the post out here. I used it create this blogpost –
Mistrust
sagapatra.in/2020/04/… –
Morphosis
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.
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. –
Ripe 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: "code"});
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: "code"});
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 this article in my blog
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
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.
You can try: Carbon
I'm using it, and it's the best & fast & editable tool that I used for this purpose.
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 –
Grammer
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.
© 2022 - 2025 — McMap. All rights reserved.