Displaying HTML Code within Your Post (the Better Way)

If you've ever tried to show code within your post by just typing it in, you know it doesn't work. The code gets interpreted and will do whatever it is you're trying to show.

I've posted instructions for getting code to display in a very simple and easy way HERE.

However, I prefer this method because I like to make mine look pretty and match my blog colors.



Adding Code for Code Box Display
First, you need to add some code to your html template.

1. From the your Blogger dashboard, click on the Layout link for the blog you want to work on, or if you're already in that blog, click on the Layout tab.
   
   
2. Click on the Edit HTML link.
   
   
3. Press CNTRL + F to bring up a Find file at the bottom of your page and type in blockquote. Click the Next Arrow until you find the code below.
   
   OR
   
   Scroll down until you find this code:
   

   .post blockquote p {
   margin:.75em 0;
   } 

4. Hit ENTER to go to a new line. Then copy the code below and paste it into your template's HTML.
   

    pre.code {
   width: 100%;
   overflow: auto;
   /*overflow:-moz-scrollbars-horizontal;
   overflow-x:scroll;*/
   border: 1px dotted #281;
   border-left: none;
   background-color: #fff;
   padding-bottom: 16px;
   font-size: 1em;
   }
   
   code {
   font: 1.1em 'Courier New', Courier, Fixed;
   }
   

   
   


5. Hit ENTER again to make another new line.
   
   
6. Save your template.

This creates the template code that will control how your code displays within your post.



Customizing Code Box Display
Next you can make adjustments to the way your code box displays in your post.

1. Change the width of your code box by changing 100% to whatever you want it to be. My code box is set to 70% because I want it to be less wide than the regular text.
   
   
2. If you want your box to be set in a bit on the left side, like mine is, add this line of code under the width code:
   

      margin-left:15px;  

   The 15px tells it how much to be set in from the left side. If you want it to be set in more, increase it to 20px or more; if less, decrease the number to 10px or less.
   
   
3. border: controls the look of the border around our code box.
   
   To change the border size, change 1px to 3px to make it bigger or 0px to have no border.
   
   To change the border style, change dotted to solid.
   
   To change the border color, change #281 to any color you want. Example: #fff to make it white; or replace it with a variable like $bordercolor
   
   
4. To change the back-ground color, replace #fff to whatever color code you want it to be; example: #FEFCF3 to make it creamy pink, like mine or you could replace it with a variable, like $bgcolor.
   
   
5. padding controls the space between the edges of your code box and the text inside. To change the space, change 15px to whatever you want; example: 10px to make it smaller.
   
   
6. font-size controls the size of the font. To make it bigger, change 1em to whatever you want; example: 2em to make it larger.
   
   
7. You can change the display font to something other than Courier if you want, but people are used to seeing that font for code, so I recommend leaving it as is.
   
   
8. color controls the color of the font. This code is set to a variable description to match the color of your post text. You can change it to whatever you want by replacing $textcolor with any color code; example: #000000 will make it black.
   
   
9. Once all your adjustments are made, Save your template.
   

After the "code" code is installed in your template and your customized changes are complete, all code posted in your blog posts will take the characteristics you've defined above.



Putting Code in Your Post
Next, put the actual code you want to show in your post.

1. Within Blogger, click on the Posting tab, then the Create link.
   
   
2. Click on the Html tab on the top right corner of your post box.
   
   
3. Type the following code into your post*, wherever you want it to display:
   
   
4. It displays like this:
   

    --TYPE YOUR CODE HERE--  

5. Save your post.
   

*The only time this doesn't work is when you're trying to display the code for the code box. Then you have to use an image.


---------
©Karlene Browning, Karlene's Cheat Sheet.