在Javascript中实时预览的文本中呈现Markdown

Question

我正在使用rails的网站工作，在那里人们可以发布文章，也可以做其他的事情。这些帖子使用Markdown来呈现文本，就像堆栈溢出一样。每当用户发布帖子时，在文本区域下面就会有一个实时预览div，显示用户的帖子将是什么样子，就像这里的堆栈溢出一样。我的问题是，我不知道如何让Markdown渲染在现场预览。

我的实时预览的javascript代码是

window.onload = function(){
var idea = document.getElementById("idea-text");
try{
    idea.onkeyup = idea.onkeypress = function(){
        document.getElementById('live-preview').innerHTML = this.value.replace(/\n/g, '<br/>');
    }
}
catch(e){
}
}  

文本将永远是纯文本，任何关于做标记渲染的指针？

编辑：

解决我的困境的方法是使用来自https://github.com/evilstreak/markdown-js的标记-js，想出如何在节点中使用这个方法是痛苦的，因为我遇到了多个问题。我在https://rails-assets.org/#/components/markdown上找到了一个解决方案，它为我的问题提供了一个简单的三步解决方案！我的代码显示呈现标记向下的文本的实时预览

window.onload = function(){
var idea = document.getElementById("idea-text");
try{
    idea.onkeyup = idea.onkeypress = function(){
        document.getElementById('live-preview').innerHTML = markdown.toHTML(this.value);
    }
}
catch(e){
}
}

Answer 1

您可以使用像标记-js这样的库来公开一个简单的方法来转换html中的标记conte，然后在预览div中直接注入您的html。

Answer 2

非常确定的是，StackOverflow使用PageDown在JavaScript中完成从标记到HTML的转换。

PageDown是用于堆栈溢出和堆栈交换网络其余部分的JavaScript Markdown预览器。它包括一个标记到HTML转换器和页面内Markdown编辑器与现场预览.

你可能最终会做这样的事情：

var converter = new pagedown.Converter();

idea.onkeyup = idea.onkeypress = function(){
    document.getElementById('live-preview').innerHTML = converter.makeHtml(this.value);
}