|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
<head>
|
|
|
|
|
<title>CodeMirror Test</title>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="description" content="" />
|
|
|
|
|
<meta name="keywords" content="" />
|
|
|
|
|
<link rel="stylesheet" href="../examples/css/style.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="layout">
|
|
|
|
|
<textarea id="test" style="display:none;">###Hello world!</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="../examples/js/jquery.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="../lib/codemirror/lib/codemirror.min.css" />
|
|
|
|
|
<script src="../lib/codemirror/lib/codemirror.min.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/addons.min.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/modes.min.js"></script>
|
|
|
|
|
<!-- <script src="../lib/codemirror-5.0/addon/edit/closetag.js"></script>
|
|
|
|
|
<script src="../lib/codemirror-5.0/addon/fold/xml-fold.js"></script>
|
|
|
|
|
<script src="../lib/codemirror-5.0/mode/xml/xml.js"></script>
|
|
|
|
|
<script src="../lib/codemirror-5.0/mode/javascript/javascript.js"></script>
|
|
|
|
|
<script src="../lib/codemirror-5.0/mode/css/css.js"></script>
|
|
|
|
|
<script src="../lib/codemirror-5.0/mode/htmlmixed/htmlmixed.js"></script>-->
|
|
|
|
|
<!--<script src="../lib/codemirror/addons.min.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/modes.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css">
|
|
|
|
|
<link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css">
|
|
|
|
|
|
|
|
|
|
<script src="../lib/codemirror/addon/dialog/dialog.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/addon/search/searchcursor.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/addon/search/search.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
|
|
|
|
<script src="../lib/codemirror/addon/search/matchesonscrollbar.js"></script>-->
|
|
|
|
|
<style>
|
|
|
|
|
html, body, #layout, .CodeMirror {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(function() {
|
|
|
|
|
|
|
|
|
|
var codeMirrorConfig = {
|
|
|
|
|
mode: "gfm",
|
|
|
|
|
theme: "default",
|
|
|
|
|
//tabSize: 4,
|
|
|
|
|
//dragDrop: false,
|
|
|
|
|
autoCloseTags : true,
|
|
|
|
|
//autofocus: true,
|
|
|
|
|
//indentUnit : 4,
|
|
|
|
|
//lineNumbers: true,
|
|
|
|
|
//lineWrapping: true,
|
|
|
|
|
/*matchBrackets: true,
|
|
|
|
|
indentWithTabs: true,
|
|
|
|
|
styleActiveLine: true,
|
|
|
|
|
styleSelectedText: true,
|
|
|
|
|
autoCloseBrackets: true,
|
|
|
|
|
showTrailingSpace: true,
|
|
|
|
|
highlightSelectionMatches: {
|
|
|
|
|
showToken: /\w/
|
|
|
|
|
} */
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$.get("../examples/test.md", function(md){
|
|
|
|
|
$("#test").html(md);
|
|
|
|
|
var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
|
|
|
|
|
var codeMirror = $(".CodeMirror");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
