Fiddles!
What the heck are fiddles?
By Kelly Ford Founder and President
XMod Pro Fiddle in Action
One thing that many of you may have noticed when using the new site is that there is no way to put code samples in your responses.
I hope you like the NEW DNNDev.com and that you are getting a lot from the DNNDev University. There is a lot to enjoy on the new site and I'm very happy to see so many of you have started actively using the tools like Answers, Discussions, and Ideas. I also see Patrick Ryan and Steve Elsbury, and of course Ryan Moore climbing the leaderboard. We want to get more people involved so be sure to tell your DotNetNuke and XMod Pro friends.
One thing that many of you may have noticed when using the new site is that there is no way to put code samples in your responses. DNNSocial, upon which the new site is built, does not allow code to be entered. DNNSocial is not open source and does not provide the vast amounts of flexibility and customizability that XMod Pro offers. Clearly, this is not a valid option for a Code-Centric site like ours. So what are we going to do about it?
Well, we've just done it. Introducing XMod Pro Fiddles for DNNDev.com. Using XMod Pro (of course) and our own ingenuity, we've come up with a pretty helpful solution we think you'll like.
First: On the Answers, Discuss, and Ideas pages, when you click the Big Blue Add a Comment or Add an Answer Button at the bottom of the responses, you'll see an "Add Code Fiddle" button.
Select "Add an Answer" or "Add a Comment"
NOTE: The "Add Code Fiddle" Button will become available only after the first posting on the Answers, Discuss, and Ideas pages.
Second: Click on the "Add Code Fiddle" Button 
Click on the "Add Code Fiddle" Button and you'll see a dialog pop-up. This dialog will need 3 things from you:
- A Title for your Fiddle. Make it concise but it should reflect what the fiddle is about
- A Description: Here is where you can add a little more to the story of your fiddle.
- The Fiddle Contents: We've provided a syntax-colored, line-numbered editor for you to use to enter your fiddle in. This editor responds to tabs to you can easily indent your code.
You can resize the dialog to get more width in your editor, but I would recommend you try and keep your line width to a minimum. Your code will be displayed in a width-restricted area in your response. Having lines runoff the edge is not very conducive to understanding :)
OK. Now click Submit.
You're all done. Simply add your text and Save. What you'll see in your response is something like what Patrick Ryan did in the main image for this article.
You can consider this a beta implementation of the feature. It should work well for most cases, but if you run into problems let me know.
ARTICLE UPDATE & ADDITIONAL INFO
CREATING A NEW FIDDLE
You may find that, sometimes, the "Add Code Fiddle" button does not show up when selecting "Add an Answer" or "Add a Comment"
To workaround this issue, you can create a new Fiddle using MyFiddles.
- Be sure you are logged into our site.
- Go to your My-Fiddles page at http://dnndev.com/Fiddle/My-Fiddles.aspx.
- Then, Create your new Fiddle
- Copy the Fiddle URL
- Paste the Fiddle URL into the Answer, Discussion or Idea comments/answers box.
EDIT YOUR FIDDLES
Read this Article Editing Fiddles - How Do I Edit My Fiddles Code?