If you add code snippets in Blogger posts without any style, then it will display in normal style as like other post content. Now, to make your code snippets different from normal post content, you can add custom CSS to blogger blog for code snippets
Add the following CSS code in your Blogger blog.
.pre-code-block{padding:10px;border:1px solid #444;background-color:#444;color:#fff;overflow-x:scroll;overflow:auto;}
Use code box class in your post:
Now, after adding code block CSS class in your Blogger blog, you can use it in your post with code snippets. Following is a pattern, which you need to use.
<pre class="pre-code-block">
// YOUR CODE SNIPPETS HERE
</pre>
For beginners manual process to generate code snippets for HTML may be confusing and complex. In that case, you can try online html encoder tool.
By using these online HTML encoder tools, you can quickly escape HTML characters from your code snippets and use them in your post content.
These encoder tools convert all HTML characters in given input. Your snippets will work if you only encode less than (<) sign, but it’s good practice to convert all characters.
Here is result output of your code snippets in your blog post:
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
No comments:
Post a Comment