How to put Syntax Code box in Blogger - BLOGGYANI

Latest

Post Top Ad

Thursday, October 29, 2020

How to put Syntax Code box in Blogger




What is a syntax code box and how to put in a website? We are going to read about it and see how you can put it in your Blogger.

You may have noticed that many bloggers use code box inside their post article, which can be very useful for any tech website.


What is Syntax Code Box?


A Syntax code box is a text area box that looks like a comment box on a website. But it is used to share language such as coding or programming in the website.

Although there are many reasons for which we use code box, but usually many bloggers write post articles about programming language in their blogging site posts - such as Html, Css, JavaScript, Php, MySQL, Python , C ++, Java. Then they need a code box.

But here some bloggers do not write those coding languages ​​in the code box, but write them in the articles in simple text. Which does not look right. This can also make it difficult for visitors to your website to understand.

Therefore, one should use code box which looks stylish in appearance and also helps the visitors to understand, which you can see in this image.

What is a syntax code box?

Any visitors can easily understand the html code written inside this code box and can copy it if they want.

Advantages of installing Syntax code box 

1 This will make it easy for visitors to your website to understand where the code starts and where it ends.

 2 Your visitors will be able to easily copy every code that progresses into the code-box.

 3 If you use the code box in your post to provide any coding or programming like language, then your website looks clean and beautiful.

 4 The authority of your website will increase in the eyes of people, because by using the code box, the visitors feel a professional website.

As we know that more bloggers like Google's Blogger  so we will learn How to put Syntax Code box in Blogger In Two Ways.

How to put Syntax Code box in Blogger?


In Blogger you can put cyntax code box in two ways, out of which the first way which you can say is by own coding, but the same method is adopted by you, then in this you will get the third party website The code has to be generated, after which you can copy and apply it in the website, it is also very attractive to see.

First way - let's say you have to put any code in your post. 


Step-1  First of all, open that article in Blogger in which you want to put this code.

 Step-2 You will get two options in it [Compose / HTML] You have to click on  HTML.

Step-3  After clicking on HTML you will go to the Back-end editor, inside which you copy the code given below .

 <textarea style="background-color:black; color:#ADD8E6; font-weight:bold; width:100%; margin:5px 0; padding:7px;" cols="2" rows="10"> 
I'm Code!
</textarea>

Write The Code You Want To Display In Place of "I'm Code! "

Step-4 After that it has to paste this in your post where you want to put the  syntax code box.

 Step-5 Now remove the code where I'm code is written, and paste the code that you want to replace, but in our case we will paste the code given above.


Second way - Now we will learn to set up a code box with the help of a third party website.


First of all you have to go to hilite.me site.

After going to the hilite.me site, you will see 1.Step Source code: option in the page under which you have to paste the code that you want to put in your blogger's post.

In it you will see the option of 2.Step Style. In which you will get to see more than 15 different styles, which you can select according to your choice and in my case I have taken the default.

Once you have done all these basic steps, then another one in the same page.

Step will appear under the name of Highlight. Which you have to click on it. A code will be generated by clicking on it.

Which you will find under  HTML: option. Simply copy and paste it into your blogger's post where you want to put the code box.

 After which you will see a code box like this.



I hope you understood How to Add Syntax Code Box In Blogger , if you are facing any problem just let us know . You can Write comment or you can Contact Us through Contact Form. This is how  you can add Syntax Code Box in Blogger.