<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/codemirror/CodeMirror/5.19.0/lib/codemirror.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<link rel="stylesheet" href="//cdn.rawgit.com/nhnent/tui.editor/0.10.11/dist/tui-editor.css">
<link rel="stylesheet" href="//cdn.rawgit.com/nhnent/tui.editor/0.10.11/dist/tui-editor-contents.css">
<style type="text/css">
.cm-header { color:blue; }
.cm-strong { font-weight:bold; }
</style>
</head>
<body>
<h1><a href="https://github.com/nhnent/tui.editor" target="_blank">TUI Editor</a></h1>
<div class="code-html">
<div id="editSection"></div>
</div>
<script src='//cdn.rawgit.com/markdown-it/markdown-it/8.1.0/dist/markdown-it.min.js'></script>
<script src="//cdn.rawgit.com/shiren/toMark/0.0.10/dist/toMark.min.js"></script>
<script src="//cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="//cdn.rawgit.com/nhnent/tui.code-snippet/1.2.0/code-snippet.js"></script>
<script src="//cdn.rawgit.com/codemirror/CodeMirror/5.19.0/lib/codemirror.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script src="//cdn.rawgit.com/neilj/Squire/v1.6.3/build/squire.js"></script>
<script src="//cdn.rawgit.com/nhnent/tui.editor/0.10.11/dist/tui-editor.min.js"></script>
<script class="code-js">
$('#editSection').tuiEditor({
initialEditType: 'markdown',
previewStyle: 'vertical',
height: 300,
exts: ['colorSyntax'],
contentCSSStyles: [
'../dist/tui-editor-contents.css'
],
events: {
'load': function() {
console.log('editor Loaded');
}
}
});
</script>
</body>
</html>