网页中如何引用 Markdown 文件并把它转换成 HTML 显示出来

This topic created in 3593 days ago, the information mentioned may be changed or developed.

目的

如题

想法

在头部引用 marked.js，点击 h1 时加载 md 文件并解析成 HTML 。但到了这里就不知道如何继续了……

Google 过一些关键词，基本都是实时解析网页编辑栏中输入的 Markdown 格式，然后显示在右边。

README 中举的例子
自己写的 HTML
自己写的 jQuery

自己

刚入前端坑不久，跟着 Codecademy 学了基本的 HTML / CSS / JavaScript / jQuery ，但不知道如何去运用，就打算做一个网站边做边解决遇到的问题，感觉这样学得比较快。

大部分的问题都通过搜索引擎解决了，有些问题经过搜索还是处于懵逼的状态，所以希望能够有人指点一下。

7 replies • 2016-08-12 15:56:10 +08:00

mufeng

Aug 12, 2016

https://github.com/chjj/marked

ss098

Aug 12, 2016 via Android

你需要先通过其他的 Ajax 方法获取文件内容并设定为变量 markdown ，例如 $.get 。

$("#content").html(marked(markdown))

ss098

Aug 12, 2016

补充一下细节吧， marked 库会引入一个 marked 函数，这个函数的功能是将你提供的 markdown 文本转换为 HTML 。而你需要通过 Ajax 拿到这个文件，那么有了如下代码。

$.get("content/essential.md", function(response, status, xhr){
$("#content").html(marked(response));
});

learnshare

Aug 12, 2016

https://github.com/LearnShare/wo-markdown-pages

ripe

Aug 12, 2016

@ss098 function 中的字段哪里有相关文档可以查看？

翻了下 jQuery 的手册，里面只写明了
success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )

http://api.jquery.com/jQuery.get/

huihuimoe

Aug 12, 2016 via Android

@Laynooor 清楚寫了 data,textStatus, jqXHR 三個吶…如果你不知道它們分別是什麼的話就 console.log()出來看不就好了…

ss098

Aug 12, 2016

@Laynooor 给你一个中文版本的 http://w3school.com.cn/jquery/ajax_get.asp