demo/demo-scrollsync.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/toMark/dist/toMark.js"></script>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/tui-color-picker/dist/tui-color-picker.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="../dist/tui-editor.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
    <link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        #editSection {
            padding: 15px;
            padding-top: 35px;
        }
    </style>
</head>
<body>
<div id="editSection"></div>
<script src="../dist/tui-editor-Editor.js"></script>
<script src="../dist/tui-editor-extScrollSync.js"></script>
<script>
    $('#editSection').tuiEditor({
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'wysiwyg',
        exts: ['scrollSync']
    });
</script>
</body>
</html>