Question

我目前正在开发一个小项目，我想将几个（或更多）Markdown文件转换为HTML，然后将它们附加到主文档中。我希望所有这些都发生在客户端。我选择了几个插件，如Showdown（Markdown到HTML转换器），jQuery（整体DOM操作）和Underscore（如果需要，可以进行简单的模板化）。我陷入困境，似乎无法将文件转换为HTML（转换为包含HTML的字符串）。

将Markdown转换为HTML非常简单：

var converter = new Showdown.converter();
converter.makeHtml('#hello markdown!');

我不确定如何将文件提取（下载）到代码中（字符串？）。

如何从URL获取文件（该URL是Markdown文件），通过Showdown传递，然后获取HTML字符串？ 顺便说一下，我只使用JavaScript。

Answer 1

您可以获取外部文件并使用ajax将其解析为字符串。 jQuery方式更简洁，但是一个vanilla JS版本可能看起来像这样：

var mdFile = new XMLHttpRequest();
mdFile.open("GET", "http://mypath/myFile.md", true);
mdFile.onreadystatechange = function(){
 // Makes sure the document exists and is ready to parse.
 if (mdFile.readyState === 4 && mdFile.status === 200)   
 {
    var mdText = mdFile.responseText; 
    var converter = new showdown.Converter();
    converter.makeHtml(mdText);
    //Do whatever you want to do with the HTML text
 }
}

jQuery方法：

$.ajax({
  url: "info.md",
  context: document.body,
  success: function(mdText){
    //where text will be the text returned by the ajax call
    var converter = new showdown.Converter();
    var htmlText = converter.makeHtml(mdText);
    $(".outputDiv").append(htmlText); //append this to a div with class outputDiv
  }
});

注意：这假定您要解析的文件位于您自己的服务器上。如果文件在客户端（IE用户文件）上，则需要采用不同的方法

更新

如果您需要的文件与您在同一台服务器上，则上述方法将起作用。如果它们不是那么你必须在控制远程服务器时查看CORS，如果不控制则需要服务器端解决方案。 This question提供了有关跨域请求的一些相关背景信息。

Answer 2

获得HTML字符串后，只需调用以下内容即可附加到您想要的任何DOM元素：

var myElement = document.getElementById('myElement');
myElement.innerHTML += markdownHTML;

... markdownHTML是从makeHTML中获取的html。

将多个文件转换为HTML（来自Markdown）？

2 个答案:

更新