how to convert a raw readme file to html formated document after geting it from github in angular js

Issue

I used the following controller but how to format each line of the README.MD raw file to html document

    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"
          }
        });
      }
    };
  });

I would be excited to know transformation of raw readme file to a formatted html page

Solution

..how to format each line of the README.MD raw file to html document..

Response you are getting from github API is plain markdown. So you just need to:

• render the response.data using a suitable markdown-to-html library before you actually bind it to scope. Here's an example using marked.js

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

  Where parseMD is a function that returns rendered HTML

   $scope.parseMD = function(md_content){
        return marked(md_content);
   }
  

• bind the output as html using ng-bind-html

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

What you do in parseMD is really upto you, its just a matter of choice. Here are some popular markdown-to-HTML libraries:

• marked // Easy to understand/dive into the code
• markdown-js // supports maruku as-well-as gruber dialect
• showdown.js // forked as PageDown in stackexchange

All these libraries seem to go well with Github Flavored Markdown

Here's the DEMO

Answered By - nalinc