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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3058 天前的主题，其中的信息可能已经有所发展或是发生改变。

目的

如题

想法

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

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

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

自己

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

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

7 条回复 • 2016-08-12 15:56:10 +08:00

mufeng

2016-08-12 12:40:18 +08:00

https://github.com/chjj/marked

ss098

2016-08-12 12:50:49 +08:00 via Android

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

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

ss098

2016-08-12 12:58:34 +08:00

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

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

learnshare

2016-08-12 13:04:51 +08:00

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

Laynooor

2016-08-12 14:55:50 +08:00

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

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

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

huihuimoe

2016-08-12 15:29:56 +08:00 via Android

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

ss098

2016-08-12 15:56:10 +08:00

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