2016-04-11 3 views
0

I Geting verwendet, um die folgenden Controller aber wie jede Zeile der README.MD RAW-Datei zu formatieren Dokumentwie eine rohe Readme-Datei konvertieren in HTML formatierte Dokument, nachdem es von Github in Winkel js

angular.module('ExampleApp', []) 
    .controller('ExampleController', function($scope, Slim,$sce) { 
    Slim.getReadme().then(function(resp) { 
     $scope.readme = $sce.trustAsHtml(resp.data); 
    }).catch(function(resp) { 
     console.log("catch", resp); 
    }); 
    }) 
    .service('Slim', function($http) { 
    return { 
     getReadme: function() { 
     return $http.get("https://api.github.com/repos/btford/angular-markdown-directive/readme", { 
      headers: { 
      "Accept": "application/vnd.github.v3.raw" 
      } 
     }); 
     } 
    }; 
    }); 

html Ich würde mich freuen, die Umwandlung der rohen Liesmich-Datei in eine formatierte HTML-Seite zu kennen

Antwort

1

..wie jede Zeile der README.MD RAW-Datei HTML-Dokument zu formatieren ..

Antwort Sie von Github API bekommen ist klar Abschlag. So müssen Sie nur:

  • die response.data machen Bibliothek mit einer geeigneten Abschlag-to-HTML, bevor Sie es tatsächlich zu Umfang binden. Hier ist ein Beispiel unter Verwendung von marked.js

    $scope.readme = $sce.trustAsHtml($scope.parseMD(resp.data)); 
    

    Wo parseMD eine Funktion, die HTML gerendert zurückgibt

    $scope.parseMD = function(md_content){ 
         return marked(md_content); 
    } 
    
  • binden die Ausgabe als HTML mit ng-bind-html

    <div ng-bind-html="readme"></div> 
    

Was Sie tun, in parseMD ist wirklich zu Ihnen, es ist nur eine Frage von c hoice. Hier sind einige beliebte Abschlags-to-HTML-Bibliotheken:

  • marked // Leicht zu verstehen/tauchen in den Code
  • markdown-js // unterstützt maruku as-gut-wie gruber Dialekt
  • showdown.js // gegabelt wie PageDown in Stack

Alle diese Bibliotheken scheinen gut zu gehen mit Github Flavored Markdown

Hier ist die DEMO

+0

Wie kann ich nur CSS zu jedem in der geparsten HTML hinzufügen, wäre es hilfreicher, wenn Sie dies hinzufügen! –

1

Ich schlage vor, Sie schauen in showdownjs, nehmen Rohtext und wandeln es wie so html.

var converter = new showdown.Converter(), 
    text  = '#hello, markdown!', 
    html  = converter.makeHtml(text);