javascript - 在angular js中从github获取原始自述文件后如何将其转换为html格式的文档

Question

我使用了以下 Controller ，但是如何将 README.MD 原始文件的每一行格式化为 html 文档

    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 页面

Answer 1

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

您从 github API 获得的响应是​​简单的 markdown。所以你只需要:

• 在实际将其绑定(bind)到范围之前，使用合适的 markdown-to-html 库呈现 response.data。这是一个使用 marked.js 的示例

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

  其中 parseMD 是一个返回呈现的 HTML 的函数

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

• 使用 ng-bind-html 将输出绑定(bind)为 html

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

您在 parseMD 中做什么完全取决于您，这只是一个选择问题。以下是一些流行的 markdown-to-HTML 库:

• > marked//易于理解/深入代码
• > markdown-js//支持 maruku 以及 gruber 方言
• > showdown.js//在 stackexchange 中 fork 为 PageDown

所有这些库似乎都与 Github Flavored Markdown 配合得很好

这是 DEMO