Will "the Mighty" Strohl

Formatting Code Blocks in DotNetNuke 6

Formatting Code Blocks in DotNetNuke 6.0

There are many hidden gems in DotNetNuke 6.0 that you will find once you begin using it.  You may have heard of some already.  For example, there’s creating numerous pages all at once with the page manager, the mega menu, jQueryUI plugins, module categories, standardization around module messages, and more.  There is another beauty hidden away in the new text editor provider too…

You can now copy and paste various types of code into DNN, and have it completely formatted for your website visitors in just moments.  The best part of this is that it’s already built-in to DotNetNuke 6.0!  The first step…  Enable the feature.

Enabling Code Formatting

The first thing you will need to do is login as a Host or Superuser.  Once logged in, find the HTML Editor Manager in the Host menu.  (By the way, your Host menu is now in your Control Panel.)

HTML Editor Manager in DotNetNuke Host Menu

Next, choose the Everyone configuration in the page that loads.  Or choose any other template that you might have created.  This will load the Editor Configuration and Toolbar Configuration for you.  Choose the Toolbar Configuration to edit the XML that manages your editor toolbar buttons.

Find a place that you want in the configuration to put the new Format Code Block button, and add this XML. 

Here is an example of what that might look like on your site.  Then be sure to click “Update” to save your changes.

HTML Editor Configuration

Now, the next time you load your text editor, it might look something like this.

HTML Text Editor Code Block Button

This will allow you to add the most common types of code in a very friendly and easy to read way on your site now. 

The next time you have some code to add, click the button.  If you want to guarantee that you preserve your white spaces, click the button before pasting in your code.  When the code manager window opens, paste it in the top, and choose your language.

Format Code Block Manager

You can choose to preview this before you click OK, or just “OK” your changes.  It’s up to you, but either way you will end up with your code looking super-slick!

FYI…  Full credit for me even knowing about this little gem goes to Chris Paterra.

blog comments powered by Disqus