最近開發需要，接觸到了CodeMirror，覺得的確是個不錯的東東。
這裏把最常用的兩個功能分享給大家。一個是關鍵字變色一個是自動提示。
先看下最終的效果圖。外觀還是不錯的。可以自己選擇主題(codemirror-5.2/theme/ambiance.css)
核心代碼
<script type="text/javascript" src="js/jquery-1.6.4.source.js"></script>
<link rel="stylesheet" href="js/codemirror-5.2/theme/ambiance.css">
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/lib/codemirror.css" />
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/addon/hint/show-hint.css" />
<script type="text/javascript" src="js/codemirror-5.2/lib/codemirror.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/mode/sql/sql.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/sql-hint.js"></script>
<style>.CodeMirror {border: 1px solid black;}</style>
<body>
<h2>SQL編輯器</h2>
<form><textarea id="code" name="code"></textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {"Ctrl": "autocomplete"},//輸入s然後ctrl就可以彈出選擇項
mode: {name: "text/x-mysql"},
theme: "ambiance"//主題
});
</script>
</body>
</html>