Simple Syntax Highlighter

Scripts for Syntax Highlighters are found in large number on the Internet. In this article let me show you, how to create a simple CSS Syntax highlighter.

1. .syntax{
   background-color:black;
   color:white;
   border-style:outset;
   border-width:3px;
   border-color:black;
   opacity:0.75;
   -moz-border-radius:10px;
   -goog-ms-border-radius:10px;
   -ms-border-radius:10px;
   -o-border-radius:10px;
   border-radius:10px;
   padding:10px;
   background-size:100% 150%;
   background-repeat:no-repeat;
   }
2. The above code generates you a simple Syntax Highlighter.
   • background-color  :is a CSS property that gives the background a mentioned color.
   • color :
     is a CSS property that gives the text inside the <div> a mentioned color.
   • border properties are explained here : http://css.krishnainfotron.com/2012/05/border-styles.html
   • browser specific definitions are also explained :  http://css.krishnainfotron.com/2012/04/browser-specific-definitions-css.html
     padding is explained here : http://css.krishnainfotron.com/2012/12/padding.html
3. You can know how to use this CSS in your blogger blog here : http://css.krishnainfotron.com/2012/04/how-to-define-css-in-blogger-blog.html and in general html here : http://css.krishnainfotron.com/2012/04/how-to-define-css-in-general-html.html

Padding

Padding is a property used in CSS to fix the content of the division at a particular distance from the borders.
Lets take up a simple example :

.padd{
border:3px solid red;
}

The above code's result will be like this.

A bit altered :

.padd{
border:3px solid red;
padding:10px;
}

The above code's result will be like this. Here the content is 10px away from each border.

.padd{
border:3px solid red;
padding:20px 10px;
}

The above code's result will be like this. Here the content is 10px away from left and right borders and 20px away from top and bottom borders. Changing the places of 10 and 20 px in the code would get a reverse effect.

Therefore, padding has four attributes :

1. padding-top
2. padding-bottom
3. padding-left
4. padding-right

Border styles

We saw solid as a border style while seeing about Square and Rounded Borders. Now, I'll explain some other styles and how to define it.

Square and Rounded Borders

Read : Browser Specific Definitions.
The post is created in Example and Explanations order.
Let's start with,

1. .krish{
   border:3px solid white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   Output
2. .krish{
   border:3px solid white;
   -moz-border-radius-topleft:35px;
   border-radius-topleft:35px;
   }
   

   Output
3. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35em;
   border-radius-bottomright:35em;
   }
   

   Output
4. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35pt;
   border-radius-bottomright:35pt;
   }
   

   Output
5. .krish{
   border:3px solid white;
   -moz-border-radius:35px 0px 35px 0px;
   border-radius:35px 0px 35px 0px;
   }
   

   Output
6. .krish{
   border:3px solid white;
   }
   

   Output

Explanations :-

1. border-radius:35px; will yield rounded border for all sides
2. border-radius-topleft:35px; will yield rounded border at the Top left side and note that the type is "px" pixel.
3. border-radius-bottomright:35em; will yield rounded border at the Bottom Right and note that the type is em where 1em = 16pt "pt" is points
4. border-radius:35px 0px 35px 0px; will yield rounded borders at topleft and bottom right postitions. the general syntax is
   border-radius:topleft topright bottomright bottomleft;
   It can be in any type.
5. When you don't mention border-radius property, there will be no rounds, but there will be square borders

Browser Specific Definitions - CSS

Read : How to define CSS in General HTML and Blogger and as tag?

Lets take the following example,

.textborder{-moz-border-radius:0.5px}

In the above code, I've mentioned something -moz- before border attribute. Why?
All browsers doesn't support basic codes. Each browser has their own attribute definition.

Attribute to be added	Browser	Example
-moz-	Mozilla	-moz-border-radius:0.5px;
-o-	Opera	-o-border-radius:0.5px;
-ms-	Internet Explorer	-ms-border-radius:0.5px;
-webkit-	Safari & Google Chrome	-webkit-border-radius:0.5px;

So? What If my webpage will be viewed in all of these browsers? How will I define  for all browsers?
Yes! You can define for all browsers. You should define the CSS as follows,

.textborder{
border:0.5px solid black;
-moz-border-radius:0.5px;
-o-border-radius:0.5px;
-ms-border-radius:0.5px;
-webkit-border-radius:0.5px;
border-radius:0.5px;
}

I have mentioned border-radius at the end. Why?
When we've left any of the browser in browser specific definition, the one without browser specific definition may take effect.

Now, the CSS result can be viewed in all browsers as below.

The TroubleShooters Forum - https://groups.google.com/forum/?fromgroups#!forum/thetroubleshooters

For any suggestions for this article, feel free to suggest via comments.

CSS as tag.

Read : How to define CSS in General HTML & in Blogger.

Removing a dot while defining CSS will help you to use CSS style as tag.
For example :
We defined CSS with a prefixed dot as,

.textborder{border:0.5px solid black}

and used as,

<div class="textborder">Something here</div>

Now, we will define the CSS in the same way, but without a dot as

textborder{border:0.5px solid black}

and use as,

<textborder>Something here</textborder>

The result will be as follows :-
Something here and when your text expands, the border will expand
And, when you come to next line, It will look like this. Border for each line.

How to define a CSS in Blogger Blog?

We saw How to define a CSS in general HTML?.In blogger,
Places where CSS and HTML used together?

• In posts.
• In HTML/Java Script Gadgets.
• In Overall Template.

In Posts :-

1. The CSS is defined in the HTML part of the post at the top. For example,
   
   <style type="text/css">
   .textborder{border:0.5px solid black;}
   </style>
2. The above code should be pasted at the top of the post. Therefore the post will look like,
   
   <style type="text/css">

   .textborder{border:0.5px solid black;}

   </style>

   <div>
   <div class="textborder">body of the post</div>
   </div>
3. The life span of the style is the life span of the post.

In HTML/ Java Script Gadgets:-

1. Same way as first step, but the you needa place the style in a HTML gadget.
2. HTML/Java Script Gadget? :-
   
   • Dashboard => Design => Page Elements(if necessary) => Add a gadget => HTML/Java Script [Old UI]
   • Dashboard => Layouts => Add a gadget => HTML/Java Script [New UI] 
3. Place the code as below in the gadget.
   
   <style type="text/css">

   .textborder{border:0.5px solid black;}

   </style>

   <div>
   <div class="textborder">body of the HTML Gadget</div>
   </div>
4. The Life span of the style is the life span of the HTML/Java Script Gadget.

In Overall Template:-
   Two ways again :-

1. Go to Add CSS option:-
   
   • Dashboard => Design => Template Designer => Advanced => Add CSS [Old UI]
   • Dashboard => Template => Customize => Advanced => Add CSS[New UI]
   Just Paste the code without <style/> tag. Like below
   
   .textborder{border:0.5px solid black;}
   Click Apply to Blog. 
2. Go to HTML Template Editor. Press Ctrl + F. Find the following code.
   
   ]]></b:skin>
   Paste the CSS that you pasted in previous step just above the found code. Save Template.

How to use the css?

• When you place the CSS in a template, you can use it anywhere inside the Blog. You should just enclose with <div/> tag.
• Like this:-
  
  <div class="textborder">Body of the HTML gadget/Post/Template</div>
• The life span of the style is the life span of the blog.
  

How to define a CSS in general HTML?

Am not very good in explaining things. So, Instead of Explaining CSS(Cascading Style Sheet), let me straight away start with HOW TOs'?

The following is a basic style

<style type="text/css">
.textborder{border:0.5px solid black;}
</style>

The above code will be placed inside in two ways.Head section like the below:-

Method 1:- Placing directly inside <head/> section.

<html>
<head>

 <style type="text/css">

.textborder{border:0.5px solid black;}

</style>

</head>
<body>
<div class='textborder'>INFOTRON Krishna - http://www.krishnainfotron.blogspot.com</div>
</body>
</html>

Method 2:-
Step 1:- Place the code in a single notepad and save it as anything.css. The code should not be enclosed with (i.e) In the anything.css the notepad should be just like below:-

.textborder{border:0.5px solid black;}

and the HTML section should contain the following code.
Step 2:- Embedding the style into a HTML. Place the following code inside <head/> section.

<link rel="stylesheet" type="text/css" href="anything.css" />

There fore the HTML looks like this:-

<html>
<head>
<link rel="stylesheet" type="text/css" href="anything.css" />
</head>
<body>
<div class='textborder'>INFOTRON Krishna - http://www.krishnainfotron.blogspot.com</div>
</body>
</html>

The above code will yield the result as below :-

INFOTRON Krishna - http://www.krishnainfotron.blogspot.com