Introduction


This article demonstrates how to achieve good XML formatting in a wiki article using Notepad++ (a free Notepad editor) with the XML Tools add-in.

The Wiki code editor allows you add (and format) XML markup. However, before adding XML markup, it's important to format the source XML data before copying it to the code editor window. To ensure your XML is easy to read (in your wiki article), you need to remove unneeded line breaks, spacing and correct the tabbing. This article demonstrates how to quickly achieve this.

Downloading Notepad++


Notepad++ can be downloaded here: http://notepad-plus-plus.org/

Installing the XML Tools Plugin


  1. Open Notepad++

  2. From the menu, click Plugins > Pluggin Manager > Show Pluggin Manager

  3. Under the Available tab, scroll down and select XML Tools



  4. Click Install

  5. Once the installation is complete, you are prompted to restart Notepad++

Formatting Example


This example takes some poorly formatted XML Schema output (a SharePoint field), and demonstrates formatting it using the XML Tools add-in for Notepad++. 

Source XML:



If this XML was added directly to the Wiki code editor, this is what it will look like in an article:

<Field Type="Choice" DisplayName="multichoice" Required="FALSE" EnforceUniqueValues="FALSE" Indexed="FALSE" Format="Dropdown" FillInChoice="FALSE"
    ID="{c7149bb1-d89f-4bae-8516-a3908f4ca231}"
SourceID="{2fd51f5b-5444-4b11-a220-ebc30a40382f}" StaticName="multichoice" Name="multichoice" ColName="nvarchar13" RowOrdinal="0">
 
<Default>Homer</Default>
 
<CHOICES><CHOICE>Homer</CHOICE>
<CHOICE>Marge</CHOICE><CHOICE>Bart
    </CHOICE><CHOICE>Lisa</CHOICE><CHOICE>Maggie</CHOICE>
    </CHOICES></Field>

The code editor does a reasonable job of colourizing the markup, but it's hard to read (and on some browsers, the font will be smaller). 

To format this code so that it's readable, and has a consistent font size, follow these steps.

1. Open the code in Notepad++

2. Click on Plugins > XML Tools > Linarize XML. 
This will remove all of the line breaks and extra spacing from the code. 





3. Once the XML has been linarized, it can now be formatted with line breaks and tabs. Click Plugins > XML Tools >Pretty Print (XML Only - with line breaks).





4. Copy the formatted XML into the Wiki code editor

5. Select "Markup - (x)HTML, XML, ASPX, ..." for the language, and click OK.




6. Finally, to ensure the font sizes are consistent on all browsers, switch to the HTML view



7. Copy the HTML source into Notepad++

8. Update the styles used on the code block. Look for the following line(s) of code, <div class="reCodeBlock" style="border: 1px solid #7f9db9; overflow-y: auto;"> and replace it with <div class="reCodeBlock" style='font-family: consolas; font-size: 12px;border: #7f9db9 1px solid;'>

[TIP] To quickly find and replace text using Notepad++, highlight the text to be replaced, and use the Ctrl+H keyboard combination to open the Find and Replace dialog box



9. Copy the HTML back into the Wiki HTML editor.

10. Save your article.

Taking the above example, the code should now look like this:

<Field Type="Choice" DisplayName="multichoice" Required="FALSE" EnforceUniqueValues="FALSE" Indexed="FALSE" Format="Dropdown" FillInChoice="FALSE"      ID="{c7149bb1-d89f-4bae-8516-a3908f4ca231}"  SourceID="{2fd51f5b-5444-4b11-a220-ebc30a40382f}" StaticName="multichoice" Name="multichoice" ColName="nvarchar13" RowOrdinal="0">
    <Default>Homer</Default>
    <CHOICES>
        <CHOICE>Homer</CHOICE>
        <CHOICE>Marge</CHOICE>
        <CHOICE>Bart</CHOICE>
        <CHOICE>Lisa</CHOICE>
        <CHOICE>Maggie</CHOICE>
    </CHOICES>
</Field>



See Also