Pages

How to Add an HTML Source Code Box in Your Blog Post

I am not a coder. I can manipulate it all day long, but actually writing code frustrates me to no end (although hubby says I should just get over myself and learn it...but he says it in a much nicer way). Sometime, I'll tell you about how I got out of all my college web classes. Or, maybe I won't so I won't be found out and have my degree taken away...

Thankfully, there are people in this world that are exceptional at it and even (shudder) enjoy it. So, I benefit from their knowledge and give credit where credit is due (they did the work after all!).





I have come across a lot of tutorials on how to add code boxes via html, inserting links and all that fun copy and pasting...But, that was too much work. Because in truth, I am lazy. So, I found a code formatting engine that will do it for me! (Thank God for smart people!)
Because I do a lot of this:


Here is the link so you can use it in your tutorials (or whatever you use it for). Thank you Codeformatter!

Just add whatever code you want to format in the first box, click on the "format source code" button and you magically have formatted code! Just be sure to paste your formatted code into HTML rather than Compose when you are writing your post.


If you want to change the color of the background change the #f0f0f0 to whatever HTML color you like. I use this HTML Color Picker. All my source code is in #fff2cc (I think). In case you wanted to know.


Be sure to bookmark this post so you can find the engine again (and all my other blogging goodies!)