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

Question

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

Answer 1

..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