使用Javascript进行实时预览的文本中渲染Markdown

我正在使用Ruby on Rails的网站工作，人们可以在这些网站上发布帖子，但不能发布帖子。这些帖子使用Markdown来渲染文本，就像Stack Overflow一样。无论何时用户发布帖子，在文本区域下方都会有一个实时预览div，向用户展示他们的帖子的外观，就像堆栈溢出一样。我的问题是我不知道如何让Markdown在实时预览中呈现。使用Javascript进行实时预览的文本中渲染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){ 
} 
}

文本将始终是纯文本，就使得降价提供任何指针？

编辑：

我解决我的困境是使用降价-JS从https://github.com/evilstreak/markdown-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){ 
} 
}

来源

2016-04-22 Enigma

您可以使用图书馆像markdown-js，揭露出一个简单的方法来转换成HTML减价小故事，然后直接注入你的HTML你的预览div。

来源

2016-04-22 20:41:27

谢谢我会研究这一点。我必须要求我的团队负责人在服务器上安装npm，然后我会看看这种方法是否可行。 – Enigma

有一个客户端在同一个库[这里]（https://github.com/evilstreak/markdown-js/releases）我还是主要推荐使用节点。对于富裕开发者来说，这是一个非常棒的工具。 ;） –

再次感谢Davide的建议，我在我的主要帖子中发布了我的完整解决方案。 – Enigma

很肯定的StackOverflow使用PageDown从降价做翻译到HTML中的JavaScript。

PageDown是Stack Overflow和Stack Exchange网络其余部分使用的JavaScript Markdown预览器。它包括一个Markdown-to-HTML转换器和一个带有实时预览的页面内Markdown编辑器。

你可以想见，这样做到底：

var converter = new pagedown.Converter(); 

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

来源

2016-04-22 20:37:56 Quantastical

使用Javascript进行实时预览的文本中渲染Markdown

回答

相关问题