使用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

回答

相關問題