Skip to main content

Related Articles

How to add code snippet in Blogger

 

how to add code snippet in blogger

Blogger is very powerful and widely used blogging platform developed by Google Inc. You can create very attractive and user-friendly blogs using Blogger platform almost zero cost. Blogger can be easily connected with Google AdSense to monetize your blog. Due to simplicity and overall performance of the Blogger platform, many tech guys use this platform to create their technical blogs. If you want to add programming language code snippet into Blogger, many users face issues. Since you can’t simply copy and paste or type code snippets into edit post page. Not like normal text, code snippets should be well formatted and apply correct color combinations to have good look and feel to the readers. Different programming languages use different formats and different color combinations like this.


code snippet in blogger

In this post I will introduce easy method to add code snippet into your blog post while you are editing your post itself. There are two methods you can use; you can include your code snipper into your blog post and format accordingly or use external system to embed code snippet into your blog such as GitHub Gist. But add your code snippet into your post and manually format it not practical solution. So that, I will show you how to add code snippet into your blog post and automatically identify the language you have used in the code snippet and format accordingly.

 

Highlight.js (Syntax highlighting for the Web), is used to automatically highlight your code syntax and format accordingly. This library supports for 190 languages and 97 styles, automatic language detection, multi-language code highlighting, available for node.js, works with any markup and compatible with any JavaScript framework.

 

First you need your blog to link the library along with one of the styles and calling initHighlightingOnLoad method. There are several methods you can achieve this. But with Blogger I would suggest to use CDN Hosted method, since it is straight forward less complex. In this blog also I have used same method to show code snippets.

 

Go to Theme and CUSTOMISE.


theme and customize blogger

Go to Edit HTML.


edit html blogger theme


Find

<title><data:view.title.escaped/></title>
by pressing Ctrl + F and add CDN code just below this line.
<link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->

<script charset="UTF-8"

 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/languages/go.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>


add highlight.js to blogger theme


Save edited HTML code by clicking on Save button.


save blogger theme html

Now you have setup your Blogger platform to add code snippet. Then you can write your blog post and add code snippet.

  

Go to add new post or edit post page of blogger.


blogger edit post page


Go to HTML View.


go to html view


Click HTML View button.


click HTML View button

In HTML code you can code snippet to your blog post. To identify the code snippet part and automatically highlight the syntax you have to wrap your code snippet using

 

<pre><code> {code snippet} </code></pre>

 

tags.


pre code code snippet


Then Publish or Update your blog post.

 

You are done. Go to your blog post and see how your code snippet looks like.


this is how your code snippet look like after highlight


Here system automatically detects the language and format accordingly. If automatic detection doesn’t work, you can specify the language in the class attribute.

<pre><code class="html">...</code></pre>

 

I think I explained everything and complete. However, if you find any difficulties you may specify under comments section and I will look into that.


Comments

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on

How to generate component and define routings in Angular

  Things we learned so far How to set up environment             How to create Angular project   Today we will understand how you can create component using Angular CLI and how you can define routing to each component. You can run below command to generate the component using Angular CLI CD <<folder where you want to have the component>>   Run  ng g c <<component name>>     ng g c <<component name>> Angular CLI will create for files and also update the app.module.ts file by adding new entry to the import section. Next we will create the component for home page.

Introduction to Angular

Google release AngularJS in year 2010. It got popular immediately because it made static HTML interactive. However, with other latest web development technologies developers started to see drawbacks of AngularJS. Google then start to rewrite framework again and decided to shift from Java Script to Type Script. Type Script is helpful to avoid drawback of AngularJS Angular 2 was then introduced in 2016 and it evolves up to Angular 9. How to install Angular To setting up the angular framework you need  1. Node To install node go to official site of node to download the version you need ( nodejs ) Run the downloaded Node.js .msi Installer  If you want to know the node version installed in your computer run following command  node -v