Textarea中的Markdown实时预览？答案

【问题标题】：Markdown live preview in Textarea?Textarea中的Markdown实时预览？
【发布时间】：2009-12-08 15:23:38
【问题描述】：

是否有任何 Javascript Markdown 编辑工具栏或库可以在文本区域中显示实时预览并隐藏格式标记（**、___ 等），类似于 TinyMCE's 实现？

如果没有，我将如何在 jQuery 中实现它？

我目前正在使用MarkItUp，它仅在文本区域之后或在弹出窗口中显示预览。

This post 提到“BlueCloth”听起来很接近，但尽管我对一般实现感兴趣，但 RoR 版本在现阶段并不是很有用（我正在使用 Python/Zope）。

我知道 Markdown 的大部分优点在于它是简单的文本格式化字符，但有问题的网站是相当非技术性的，我主要使用 Markdown Python 库来实现它的“邪恶”html stipping 能力。

更新：为了响应 cmets，我想如果 typed 会显示格式标记，但如果使用工具栏则不会（即我假设 GUI 用户较少技术用户）。

或者，其他工具栏有一个“源”视图，这可能是一个选项。

【问题讨论】：

你检查过这些js插件吗？ jqueryscript.net/tags.php?/markdown%20editor

标签： javascript markdown

【解决方案1】：

如果您需要 textarea 中的 markdown 支持而无需额外的 GUI，那么 textarea-markdown 可能会有所帮助

【讨论】：

【解决方案2】：

CKEditor 可能太重了，但很好。

【讨论】：

它使用 Markdown 吗？在网站上找不到任何明显的参考。
在相关说明中，很高兴看到 FCKEditor 终于改名了；)
CKEditor 是一个使用 iFrame 的完全 JS 实现。没有基础技术或软件。（他们甚至有自己的 JS 函数库。）

【解决方案3】：

我找到了this library，这是js file。
非常好用，只需在script标签中添加库，并使用marked.parse()函数

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
        target.innerHTML = marked.parse("#Example");
  </script>

示例

运行sn-p并在textarea写一些东西

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>

<body>
  <textarea id="textareaID">
# Example Title
## list
1. one
1. tow
1. three

  </textarea>
  <div id="content"></div>
  
  <script>
    $("#textareaID").on('input', function (e) {
        document.getElementById('content').innerHTML =
          marked.parse(e.target.value);
    });

  </script>
</body>

</html>

【讨论】：

【解决方案4】：

实现它的唯一方法是使用iframe。

【讨论】：

但不在 Internet Explorer @ Jon Hadley 中