marked.jsでのマークダウン表示

textareaの中にマークダウン形式で書いた文章を、marked.jsで同じページ内にで表示させたいです。プレビューのような感じ見れることを想定しています。以下の通り書いていますが、marked.jsの結果が表示されません。
ご教示いただけると幸いです。

<div id ="markdown">
<textarea class="form-control" name="description" id="description" rows="10" tabindex="4" data-validation="validateDescription" data-validation-error-msg="相談内容を入力してください。"></textarea>	

<!--markup editer形式の入力-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

<script>
var simplemde = new SimpleMDE({
element: document.getElementById("description").value,forceSync: true});
</script>
</div>

<!--marked.jsでの表示-->
<script src="../marked-master/lib/marked.js"></script>
<script>document.getElementById('markdown').innerHTML =	marked();
</script>

（参考）
マークアップエディターのプラグイン
https://simplemde.com/

kei344

2017/11/14 15:49

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

rumi

2017/11/14 15:54

ありがとうございます。追記しました。

kei344

2017/11/14 16:10

marked.js は関係無いのでしょうか？

行動規範の内容に同意します

回答2件

自己解決

デフォルトで、項目の中にプレビューがありました

投稿2017/11/14 23:46

rumi

総合スコア46

質問者さんが想像している動作は以下のような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css">
6    <title>タイトル</title>
7</head>
8<body>
9<div id="markdown">
10    <textarea class="form-control" name="description" id="description" rows="10" tabindex="4"
11              data-validation="validateDescription" data-validation-error-msg="相談内容を入力してください。"></textarea>
12</div>
13<div id="markdown_result"></div>
14<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>
15<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
16<script>
17    var simplemde = new SimpleMDE({
18        element: document.getElementById("description"),
19        forceSync: true
20    });
21
22    ["input", "paste"].forEach(function (value) {
23        document.querySelector(".CodeMirror textarea").addEventListener(value, function () {
24            document.getElementById("markdown_result").innerHTML = marked(document.getElementById("description").value);
25        });
26    });
27</script>
28</body>
29</html>