docs(kebab-case.md): fix indentation, add links and other small changes

modules/angular2/docs/migration/kebab-case.md

@@ -4,7 +4,9 @@ Angular2 templates are now case-sensitive and use camelCase in many places where
 
 Where you used to write:
 
+```
 <my-cmp (some-event)="someAction()" [some-property]="expression" #some-var>
+```
 
 in order to:
   - bind to the `someEvent` event,
@@ -13,7 +15,9 @@ in order to:
 
 You should now write:
 
+```
 <my-cmp (someEvent)="someAction()" [someProperty]="expression" #someVar>
+```
 
 Notes:
   - while tag name are case sensitive, the best practice is to use dash case for component elements so that the browser
@@ -36,8 +40,9 @@ Examples:
   - `<input #my-input>` should be changed to `<input #myInput>`,
   - `<template ng-for #my-item [ng-for-of]=items #my-index="index">` should be changed to `<template ngFor="#my-item" [ngForOf]=items #myIndex="index">`,
 
-Note: while the tag names are now case sensitive the best practice is to keep them lower dash cased so that the browser 
-treat them as custom elements. This explains why the `<router-outlet>` component is left unchanged.
+  Note: while the tag names are now case-sensitive the best practice is to keep them lower-dash-cased so that the browser
+  treat them as custom elements. Using dashes in custom element names is required by the [Custom Element HTML Spec](http://www.w3.org/TR/custom-elements/#concepts).
+  This explains why the `<router-outlet>` component is left unchanged.
 
   `on-`, `bindon-`, `bind-` and `var-` prefixes are still part of the canonical syntax and should remain unchanged (lower cased):
   - `on-some-event` should be changed to `on-someEvent`,
@@ -60,9 +65,10 @@ Note that both angular directives and your own directives must be updated in the
 Take the following steps to upgrade your directives and components:
 
 1. Update the selector:
-
+  ```
   @Directive({selector: 'tag[attr][name=value]'})
   @Component({selector: 'tag[attr][name=value]'})
+  ```
 
   Tag and attributes names are case sensitive:
   - For tag names, the best practice is to keep them lower dash cased, do not update them,
@@ -77,13 +83,16 @@ Examples:
   Note: attribute values and classes are still matched case insensitive.
 
 2. Update the inputs
-
+  ```
   @Directive({inputs: ['myProp', 'myOtherProp: my-attr-name']})
+  ```
 
   As attribute names are now case sensitive, they should be converted from dash to camel case where they are specified.
   The previous decorator becomes:
 
+  ```
   @Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})
+  ```
 
   Notes:
     - only the long syntax (with ":") needs not be updated,
@@ -92,36 +101,49 @@ Notes:
 
   The same applies for the `@Input` decorator:
 
+  ```
   @Input() myProp;
   @Input('my-attr-name') myProp;
+  ```
 
   That is they only need to be updated when the attribute name is specified:
 
+  ```
   @Input() myProp;               // Nothing to update
   @Input('myAttrName') myProp;   // Convert the attribute name to camel case
+  ```
 
 3. Update the outputs
 
   Update the outputs in the same way the inputs are updated:
 
+  ```
   @Directive({outputs: ['myEvent', 'myOtherEvent: my-event-name']})
+  ```
 
-should be updated to 
+  should be updated to:
 
+  ```
   @Directive({outputs: ['myEvent', 'myOtherEvent: myEventName']})
+  ```
 
   If you use `events` instead of `outputs` you should update in the same way and switch to `outputs` as `events` is deprecated.
 
+  ```
   @Output() myEvent;
   @Output('my-event-name') myEvent;
+  ```
 
-should be changed to   
+  should be changed to:
 
+  ```
   @Output() myEvent;
   @Output('myEventName') myEvent;
+  ```
 
 4. Update the host bindings
 
+  ```
   @Directive({
     host: {
       '[some-prop]': 'exp',
@@ -131,9 +153,11 @@ should be changed to
       'some-attr': 'value'
     }
   })
+  ```
 
   should be changed to:
 
+  ```
   @Directive({
     host: {
       '[someProp]': 'exp',
@@ -143,20 +167,23 @@ should be changed to:
       'some-attr': 'value'
     }
   })
+  ```
 
   The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a
   template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
 
 5. Update export name
 
+  ```
   @Directive({
     exportAs: 'some-name'
   })
+  ```
 
-should be changed to     
+  should be changed to:
 
+  ```
   @Directive({
     exportAs: 'someName'
   })
-
-
+  ```