Markdown editor with vscode keybinding

1
2
3
4

mkdir showdown-practice
cd showdown-practice
git init
npm init

1
2
3
4
5

npm install jquery
npm install bootstrap
npm install showdown
npm install github-markdown-css
npm install ace-builds

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<link rel="stylesheet" href="node_modules/github-markdown-css/github-markdown.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
    body {
        height: 100vh;
    }
</style>

<div class="d-flex justify-content-around align-items-center h-100 p-5">
    <div class="flex-fill h-100 m-3 mb-5">
        <h3>Input markdown</h3>
        <div id="markdownArea" class="border rounded w-100 h-100"></div>
    </div>
    <div class="flex-fill h-100 m-3 mb-5">
        <h3>Output Html</h3>
        <div id="outputArea" class="markdown-body border rounded w-100 h-100 p-3 overflow-auto"></div>
    </div>
</div>

<script src="node_modules/showdown/dist/showdown.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/ace-builds/src-min/ace.js"></script>
<script>
    $(function() {
        var editor = initEditor("markdownArea", "outputArea");
    });

    function initEditor(inputId, outputId) {
        let editor = ace.edit(inputId);
        // editor.setReadOnly(true);                         // 是否唯讀
        editor.setTheme("ace/theme/dawn");                // 主題樣式
        editor.setShowPrintMargin(false);                 // 不要顯示右方 margin
        editor.setKeyboardHandler("ace/keyboard/vscode"); // 快捷鍵類型 (keybinding)
        editor.session.setMode("ace/mode/markdown");      // 內容語言類型
        editor.session.on('change', function(delta) {
            // delta.start, delta.end, delta.lines, delta.action
            var markdownText = editor.getValue();
            var html = markdownToHtml(markdownText);
            $("#" + outputId).html(html);
        });
        return editor;
    }

    function markdownToHtml(text) {
        var converter = new showdown.Converter();
        return converter.makeHtml(text);
    }
</script>