In this article, I will tell you about how to add coding box in your blog post. Many of the bloggers write articles on coding like they give coding for a program, giving codes to hack some programs, and writing a technical post but you can't just write coding in your post, you have to write some codes in HTML section and ask the blogger to read them as written text, not in the form of codes.
So, let's learn ho to add coding snippets in your blog post. To do this you have to follow the steps which are mentioned below.
Step 1:- First of all you have to copy the code which is given below in the box. Select the code from the box below and press Ctrl+C to copy it.
Step 2:- Then go to the HTML section of your post as shown in the picture below.
Step 3:- Then paste this code at that place where you want to show your code in your post like I wanted to show my code box above the line digital charcha. So, I will paste the code above the line digital charcha.
Step 4:- After pasting the code it will look like this and then you have to remove those letters and paste your code inside your box instead of them.
Step 5:- You have to place everywhere in the HTML section of your post where you want to show your code. For example, if you want to show code box at three places then you have to paste the code at all the three places.
Step 6:- Save and Publish your article.
Step 7:- After publishing your code box will look like this in your post.
NOTE:- you can change the background color of the box so that the code will be clearly visible to the viewers by replacing #FFFFFF by #2e4052 in the code, which is shown in Step 1 as shown in the picture. You can replace the white color with any by knowing the color code of that color.
So, let's learn ho to add coding snippets in your blog post. To do this you have to follow the steps which are mentioned below.
Step 1:- First of all you have to copy the code which is given below in the box. Select the code from the box below and press Ctrl+C to copy it.
<pre style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; line-height: 125%; margin: 0; overflow: auto; width: auto;"> past or enter your code or script here </pre>
Step 2:- Then go to the HTML section of your post as shown in the picture below.
Step 3:- Then paste this code at that place where you want to show your code in your post like I wanted to show my code box above the line digital charcha. So, I will paste the code above the line digital charcha.
Step 4:- After pasting the code it will look like this and then you have to remove those letters and paste your code inside your box instead of them.
Step 5:- You have to place everywhere in the HTML section of your post where you want to show your code. For example, if you want to show code box at three places then you have to paste the code at all the three places.
Step 6:- Save and Publish your article.
Step 7:- After publishing your code box will look like this in your post.
NOTE:- you can change the background color of the box so that the code will be clearly visible to the viewers by replacing #FFFFFF by #2e4052 in the code, which is shown in Step 1 as shown in the picture. You can replace the white color with any by knowing the color code of that color.
Features of this Code Box
- This code supports scrolling that is there may be a code with a long line, so you can scroll the cost by the bar without cutting the code.
- Users can easily copy the code present in the code box.
- this is very customizable you can change the background color, Border color as you like.
I hope you liked our article on how to add coding box in your blog then please share this with your friends on social media platforms like Whatsapp, Instagram, and Facebook.
Comments
Post a comment