Display descriptions as GFM (closes #2)

lib/components/ApiInfo/api-info.html

@@ -1,5 +1,5 @@
 <h1>{{data.title}} ({{data.version}})</h1>
-<p *ng-if="data.description"> {{data.description}} </p>
+<p *ng-if="data.description" inner-html="{{data.description | marked}}"> </p>
 <p>
   <!-- TODO: create separate components for contact and license ? -->
   <span *ng-if="data.contact"> Contact:

lib/components/Method/method.html

@@ -5,8 +5,8 @@
       <span class="http-method" [ng-class]="data.method">{{data.method}}</span>
       <span class="path">{{data.path}}</span>
     </h3>
-    <p *ng-if="data.methodInfo.description" class="method-description">
+    <p *ng-if="data.methodInfo.description" class="method-description"
-      {{data.methodInfo.description}}
+      inner-html="{{data.methodInfo.description | marked}}">
     </p>
     <br>
     <params-list pointer="{{pointer}}/parameters"> </params-list>

lib/components/ParamsList/params-list.html

@@ -21,7 +21,7 @@
     <tr *ng-for="#param of data.params">
       <!--<div class="param">-->
         <td class="param-name">{{param.name}}</td>
-        <td class="param-description">{{param.description}}</td>
+        <td class="param-description" inner-html="{{param.description | marked}}"></td>
         <td>
           <span class="type" [ng-class]="param.type">{{param.type}}</span>
         </td>
@@ -30,7 +30,7 @@
     <!-- in-body parameter -->
     <tr class="param body-param" *ng-if="data.bodyParam">
       <td class="param-name">{{data.bodyParam.name}}</td>
-      <td class="param-description">{{data.bodyParam.description}}</td>
+      <td class="param-description" inner-html="{{data.bodyParam.description | marked}}"></td>
       <td>
         <schema class="body-schema param-type" pointer="{{data.bodyParam.pointer}}/schema">
         </schema>

lib/components/ResponsesList/responses-list.html

@@ -12,7 +12,7 @@
   <tbody>
     <tr *ng-for="#response of data.responses">
       <td>{{response.code}}</td>
-      <td>{{response.description}}</td>
+      <td inner-html="{{response.description | marked}}"></td>
       <td>
         <schema *ng-if="response.schema" class="schema type" pointer="{{response.pointer}}/schema">
         </schema>

lib/components/base.js

@@ -3,6 +3,7 @@ import {Component, View, OnInit, CORE_DIRECTIVES} from 'angular2/angular2';
 import {SchemaManager} from '../utils/SchemaManager';
 import {JsonPointerEscapePipe} from '../utils/pipes';
 import {JsonPointer} from '../utils/JsonPointer';
+import {MarkedPipe} from '../utils/pipes';
 
 // common inputs for all components
 let commonInputs = ['pointer']; // json pointer to the schema chunk
@@ -32,7 +33,7 @@ function safeConcat(a, b) {
 export function RedocComponent(options) {
   let inputs = safeConcat(options.inputs, commonInputs);
   let directives = safeConcat(options.directives, CORE_DIRECTIVES);
-  let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe]);
+  let pipes = safeConcat(options.pipes, [JsonPointerEscapePipe, MarkedPipe]);
 
   return function decorator(target) {
 

lib/utils/pipes.js

@@ -2,6 +2,19 @@
 
 import {Pipe} from 'angular2/angular2';
 import {JsonPointer} from './JsonPointer';
+import marked from 'marked';
+
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  gfm: true,
+  tables: true,
+  breaks: false,
+  pedantic: false,
+  sanitize: true,
+  smartLists: true,
+  smartypants: false
+});
+
 
 @Pipe({
   name: 'keys'
@@ -29,3 +42,13 @@ export class JsonPointerEscapePipe {
     return JsonPointer.escape(str);
   }
 }
+
+@Pipe({
+  name: 'marked'
+})
+export class MarkedPipe {
+  transform(str) {
+    if (!str) return str;
+    return marked(str);
+  }
+}