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-asgruber
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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.