在 HTML 中为 remark.js 包含 markdown 文件内容
Posted
技术标签:
【中文标题】在 HTML 中为 remark.js 包含 markdown 文件内容【英文标题】：Include markdown file contents in HTML for remark.js 【发布时间】：2017-05-27 05:13:20 【问题描述】：是否有（最好是轻量级的方式）在 html 中包含降价文件的原始内容？
我正在使用 remark.js 创建幻灯片，我希望将 markdown 文件与 HTML 分开，以便 HTML 非常简单（并且不会更改）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
</head>
<body>
<textarea id="source">
>>'paste' markdown file test.md<<
</textarea>
<script>
var slideshow = remark.create(
highlightStyle: 'darkula',
highlightLines: true
);
</script>
</body>
</html>
理想情况下，它在本地机器上离线运行（不运行 Web 服务器）。带有“粘贴”降价文件 test.md 的位显然不起作用（因此我的问题）。我试过了：
object data="test.md" 但这会生成丑陋的 iframe
This solution 但我只是得到一个空页面（我为 jQuery 使用了 CDN）。
【问题讨论】：
【参考方案1】：根据remarkjs wiki，您需要添加以下行以包含您的降价文件
var slideshow = remark.create(
sourceUrl: 'markdown.md'
);
下面是一个完整的例子
<!DOCTYPE html>
<html>
<head>
<title>A title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body font-family: 'Droid Serif';
h1, h2, h3
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
.remark-code, .remark-inline-code font-family: 'Ubuntu Mono';
</style>
</head>
<body>
<script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create(
sourceUrl: 'your_file.md'
);
</script>
</body>
</html>
【讨论】：
以上是关于在 HTML 中为 remark.js 包含 markdown 文件内容的主要内容，如果未能解决你的问题，请参考以下文章
将本地目录中的本地图像包含并调整大小到 Xaringan (remark.js) 演示文稿中...（通过 Mac 上的 Rstudio 使用）