html - 在 HTML 中为 remark.js 包含 Markdown 文件内容

标签 html remarkjs

是否有(最好是轻量级的方式)在 HTML 中包含 Markdown 文件的原始内容?

我正在使用 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>

理想情况下,它可以离线运行并在本地计算机上运行(无需运行网络服务器)。 “粘贴” Markdown 文件 test.md' 的位显然不起作用(因此我的问题)。我试过:

  • object data="test.md" 但是会生成丑陋的 iframe
  • This solution但我只有一个空白页面(我使用了 jQuery 的 CDN)。

最佳答案

根据 remarkjs wiki您需要添加以下行以包含您的 Markdown 文件

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 - 在 HTML 中为 remark.js 包含 Markdown 文件内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41607371/

相关文章:

javascript - jQuery 通过选择不同的复选框显示动态 div

javascript - 当导航栏固定到屏幕顶部时停止从 'jumping' 开始的内容

html - 如何添加箭头 Bootstrap 导航栏品牌

css - 使用 xaringan 设置默认内容类

markdown - 如何更改 Markdown 链接相对路径作为 gatsby-transformer-remark 的预处理

javascript - 如何通过remark从markdown获取AST树

html - 使用 bootstrap 3 将 div 中的文本对齐到底部

Javascript 按键 addEventListener

css - xaringan:减少输入和输出之间的垂直空间?