v_jstools/codeedit/sublime.html
2021-10-11 18:29:41 +08:00

57 lines
2.0 KiB
HTML

<!doctype html>
<title>代码编辑器</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="./lib/codemirror.css">
<link rel="stylesheet" href="./addon/fold/foldgutter.css">
<link rel="stylesheet" href="./addon/dialog/dialog.css">
<link rel="stylesheet" href="./theme/monokai.css">
<link rel="stylesheet" href="./addon/display/fullscreen.css">
<link rel="stylesheet" href="./addon/scroll/simplescrollbars.css">
<script src="./lib/codemirror.js"></script>
<script src="./addon/search/searchcursor.js"></script>
<script src="./addon/search/search.js"></script>
<script src="./addon/dialog/dialog.js"></script>
<script src="./addon/edit/matchbrackets.js"></script>
<script src="./addon/edit/closebrackets.js"></script>
<script src="./addon/comment/comment.js"></script>
<script src="./addon/wrap/hardwrap.js"></script>
<script src="./addon/fold/foldcode.js"></script>
<script src="./addon/fold/brace-fold.js"></script>
<script src="./mode/javascript/javascript.js"></script>
<script src="./keymap/sublime.js"></script>
<script src="./addon/display/fullscreen.js"></script>
<script src="./addon/scroll/simplescrollbars.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 1.3; height: 500px}
.CodeMirror-linenumbers { padding: 0 8px; }
</style>
<article>
<script>
var editor = CodeMirror(document.body.getElementsByTagName("article")[0], {
lineNumbers: true,
mode: "javascript",
keyMap: "sublime",
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
foldGutter: true,
lineWrapping: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
scrollbarStyle: "simple",
tabSize: 2,
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
},
"Ctrl-Q": function(cm){
cm.foldCode(cm.getCursor());
},
}
});
</script>
</article>