Change Source code format for Blogger

When I start blogging and publishing my source code for any language it was simply to past my code here in my post editor, but I face a problem that my code shouldn't be like paragraph with a default font color black, another problem appear that I have to change the tags of HTML code to not let the blogger page deal with it as a part of the post inside HTML code, that simply done by changing some character of HTML tages like this

(<) will replace by (<)
(>) will replace by (>)

after that I can get my code listed in my post

<html dir="ltr">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p>my first webpage</p>
</body>
</html>

But I feel that it is hard to read and recognize my code between the complete post lines, so I have to change the format and colors and it would be great to put my code in a box with borders and different background color.

I found some sites help me to change the HTML code and put it in a box
Format My Source Code for Blogging

So my code became like this.

<html dir="ltr">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p>my first webpage</p>
</body>
</html>

that is not enough for me, so I found this simple site which work for many languages and give me a list of various great styles to chose from.
http://hilite.me/

<html dir="ltr">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p>my first webpage</p>
</body>
</html>

Or like this style

<html dir="ltr">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p>my first webpage</p>
</body>
</html>

I found another way to Add syntax highlighting to blogger, it looks great but it asks me to change my blog Layout by editing its HTML and add some code there, so the code will looks like this