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 (&lt;)
(>) will replace by (&gt;)

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/



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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



you can read more about this method at these sites.
Adding Syntax Highlighting to Blogger
Using SyntaxHighlighter on BLOGGER
Publish Source code in Blogger
SyntaxHighlighter

If this post was good and helpful for you, Please give it Like.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment