Hightlight Syntax With Background Colors in BlogSpot Posts

Most Bloggers use Standard blockquote to highlight syntax or codes and scripts in their posts. Now you can do this with a cool hover effect. This will help you to present your code more professionally to attract more attention of readers. Just follow following steps to add Blockquote with Hover effect.

Backup Your Template before highlighting syntax with background colors

Steps:

1. Go to Blogger > Design > Edit HTML
2. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code below,

.myCode {
padding: 10px;
border-left:6px solid #336699;
color: #000;
width: 85%;
font-style: italic;
margin: 5px auto 15px;
background: # f7f7f7 ;
}

Usage

Use the following code to highlight syntax with background colors.

<div class=’mycode’> Insert Your Syntax (code or script ) here <div>

Customization

To add background color to highlighter. Replace F7f7f7 with your desired color code.

Here are some must commonly used colors for highlighting codes or script.#DDDDD (For Black+White)
#F7F7F7 (For half white)
#FFFFFF (For white)
#111111 (For Black)

That’s all. If you face any problem above tutorial about highlighting syntax just drop your comment below!