How to add documentation to lightning component?

Component:

<aura:component controller="MyContactListController">
	<aura:handler name="init" action="{!c.myAction}" value="{!this}" />
    <aura:attribute name="contacts" type="Contact[]" />
    <ul>
<aura:iteration items="{!v.contacts}" var="contact">
<li class="minli"> <h3>{!contact.Name}</h3> </li>
</aura:iteration>
</ul> 
</aura:component>

JS controller:

({
	myAction : function(component, event, helper) {
		var action = component.get("c.getContacts");
action.setCallback(this, function(data) {
component.set("v.contacts", data.getReturnValue());
});
$A.enqueueAction(action);
	}
})

Documentation:

<aura:documentation>
    <aura:description>
        <p>An <code>np:MyContactList</code> component represents an element that executes an action defined by a controller.</p>
        <!--More markup here, such as <pre> for code samples-->
    </aura:description>
    <aura:example name="myComponentExample" ref="np:myComponentExample" label="Using the np:MyContactList Component">
	<p>This example shows a simple setup of <code>MyContactList</code>.</p>
    </aura:example>
    <aura:example name="mySecondExample" ref="np:mySecondExample" label="Customizing the np:MyContactList Component">
       <p>This example shows how you can customize <code>MyContactList</code>.</p>
    </aura:example>
</aura:documentation>