The key to getting code looking good on your blog is in editing your Layout html. There are various tools for generating nicely formatted HTML out of source code, but they typically require you to add the CSS to your layout manually. Here is a step-by-step of how I did it.
- Go here and generate your HTML. Make sure to check the "embed stylesheet" option.
- In the outputted HTML, grab everything between the <style type="text/css"> and </style> tags. This is your CSS.
- Click the 'Layout' tab here on Blogger.com
- Click the 'Edit HTML' tab that comes up under 'Layout'
- Paste your CSS (from manoli.net) inside of the <head></head> tags
- Save you customized layout
- You're almost done! Take the rest of the information from your generated html and paste it directly into your blog.
- Finally, in order to protect the text inside of the code from stange formatting and cutting, place these tags around your source code in the blog:
- <pre style="background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>
- YOUR FORMATTED CODE GOES HERE
- </code></pre>
That should do it for ya! Follow this example for other sites that use custom CSS. just insert their (or your) CSS into the layout and it's available for use in your blog! Thanks are owed to:
http://formatmysourcecode.blogspot.com/
http://mygreenpaste.blogspot.com/
Posts
No comments:
Post a Comment