Introduction
 |
| Add Code box in blogger |
Coding snippets are frequently required when producing blog posts or articles. Using a code box can make your material more approachable and user-friendly, whether you're a tech writer, a developer, or simply outlining a procedure. We'll talk about adding a code box to your website in this tech Tutorial blog post.
Why include a code box on your website
Your website's content can be made more readable and user-friendly by including a code box. If a code snippet is placed directly into a paragraph, it can be lengthy and difficult to read. The text and the code are separated by a code box, which makes it simpler to read and comprehend. A code box can additionally make it simpler for users to copy and paste code snippets, which can save time and lower the possibility of mistakes.
Read Also: How To Add A Code Box To Your Website
Methods for Inluding a Code Box on Your Website
A code box can be added to your website or blogger blog in a number of different ways. Two of the most widely used techniques will be covered: utilizing a plugin and using HTML and CSS.
Using a plugin is Method 1
You may add a code box to your website using a number of plugins if you're using a content management system (CMS), like WordPress. Using the SyntaxHighlighter Evolved plugin, follow these steps to add a code box:
1. From the WordPress plugin repository, install the SyntaxHighlighter Evolved plugin.
2. Turn on the plugin.
3. Edit an existing post or start a new one.
4. The code fragment you wish to enter into the code box should be highlighted.
5. In the toolbar, select the "Insert Code" button.
6. From the drop down menu, select the language for your code sample.
7. Choose "Insert" from the menu.
8. To ensure that the code box appears how you want it to, preview your post.
Method 2: Using HTML and CSS is technique
HTML and CSS can be used to manually add a code box if you're not using a CMS or would want to do so. To add a code box using HTML and CSS, follow these steps:
1. Launch your text or HTML editor.
2. Open an existing HTML document or create a new one.
3. To your HTML document, add the following code:
<pre><code>[Your code snippet here]</code></pre>
4. Add the following CSS code to your CSS document:
pre {background-color: #f9f9f9;border: 1px solid #ddd;padding: 10px;overflow-x: auto;}
5. Your code snippet should be entered in place of [Your code snippet here].
6. Conserve your HTML and CSS files.
7. To ensure that the code box appears how you want it to, preview your website.
Here's more simplified script with HTML and CSS you can simply copy and paste on your website. Incase other methods do not work use this:
<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: "Courier New", Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>Conclusion
Your website's content may become more approachable and user-friendly by adding a code box. You may make code excerpts simpler to read and comprehend by isolating them from the text. A code box can additionally make it simpler for users to copy and paste code snippets, which can save time and lower the possibility of mistakes. A code box is a quick and easy way to improve the content of your website, whether you're using a plugin or manually adding HTML and CSS.