javascript - 在 JavaScript 模板引擎中使用 Markdown

标签 javascript markdown template-engine

如何在模板中使用 markdown(或任何其他标记 -> HTML 语言)。是否可以使用可用的 JavaScript 模板引擎?

模板:

This is a *sample* question?
![some_image](image/path)
{{screenshot}}

最佳答案

  • 首先运行您的模板引擎。
  • 将渲染的 HTML 传递给 Markdown 解析器。
  • 运行您的 Markdown 解析器。

我给你留下了一个使用Mustache的片段作为模板引擎和 CommonMark 的 JavaScript 实现对于 Markdown。

在上面的链接中,您可以找到我用于示例的代码。

function loadUser() {
  var template = $('#template').html();
  var rendered = Mustache.render(template, {
    name: "*Luke*"
  });
  $('#target').html(rendered);

  var reader = new commonmark.Parser();
  var writer = new commonmark.HtmlRenderer();
  var parsed = reader.parse($('#target').html());
  var result = writer.render(parsed);
  $('#target').html(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.28.1/commonmark.min.js"></script>

<body onload="loadUser()">
  <div id="target">Loading...</div>
  <script id="template" type="x-tmpl-mustache">
This is an example of **markdown** in a *template*.  
Hello {{ name }}!
  </script>
</body>

关于javascript - 在 JavaScript 模板引擎中使用 Markdown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52562508/

相关文章:

javascript - 在 CoffeeScript 中,是否有一种 'official' 方法可以在运行时而不是在编译时插入字符串?

javascript - 无法迭代某些页面中的数组

javascript - 如何从浏览器向 Node.js 服务器发送大文件?

javascript - 在新选项卡中打开 iframe,如果 iframe 页面使用 _parent 目标

markdown - 如何禁用 Kramdown 中的表?

java - 读取 XML 模板时 StringTemplate 无效字符 '<'

javascript - 下划线模板接受哪些设置?

javascript:查找与模式匹配的对象键的最短代码

newline - 模仿 Markdown 中的换行符

Markdown 和换行