iStock_000008392391Small Kevin wrote an article called Simple ASP.NET & VB.NET example code for's AIM API for a new Web Programming Tips & Tricks section of our website. He wanted to provide some code examples to accompany the article. Sure, that would be easy (I thought). After about 8 hours of digging, making configuration changes to fckeditor, monkeying around with <code></code>, <pre></pre> and <textarea></textarea> and even iframes to no avail, I finally found a workaround that, well... works.

The problem was, I could get the code pasted into the HTML editor to display correctly by copying/pasting the code, choosing "Raw" for rendering, and clicking update. Fine. Done. BUT, if you went to edit the content of that code at all, fckeditor would muck up the code so that it no longer displayed in a way that was helpful or coherent. The rabbit trail was long and drawn out as I tried different configuration options in the fckeditor.js file, but nothing worked. At that point, I didn't know whether the problem was with fckeditor or DNN's implementation of the fckeditor, and Googling dozens of phrases and following many potential leads turned up nothing of use. There are some HTML and "script injector" modules, but I didn't really want to go that route.

My initial workaround was using an iframe or object tag to link to a text file. It worked OK for the web.config code and .vb code, but IE didn't want to render the code of the example ASPX file. Rats.

Then, not sure how or why, a lightbulb went off. I had already divided the three different code sections into 3 separate modules earlier when I was messing around to keep things simple. Hey, guess what? Modules have HEADERS and footers. And guess what else, those header sections completely bypass any built-in text/html editors in DNN and RENDER THE CODE THE WAY YOU WANT IT TO DISPLAY! Woo HOO.

So, instead of banging your head against the wall if you want to insert code/html snippet examples for HTML tutorials, skinning tutorials, etc. you can use the trusty header. OK, maybe not the best solution ever, but it made me happy today. There has GOT to be a better way to do it out there somewhere, and I'd be thrilled if someone could point me in the direction of that elusive solution.

If you want your code to display nicely like it would for real, I found this great site: You copy/paste your code snippet into the top dialog box, hit "process" and voila! ... nicely formatted code to copy/paste into the header of your module. Don't worry, your code example can easily be copied/pasted withOUT all of the extra formatting stuff. Then throw a heading tag in at the top to identify it, and you're ready to educate the world with your clever code examples.