console 命令行工具 X clear

console

var sql1 = "DELETE FROM table1 WHERE NOT EXISTS(SELECT * FROM table2 WHERE table1.field1 = table2.field1)"
var sql2 = "SELECT city, COUNT(id) AS users_count FROM users WHERE group_name = 'salesman' AND created > '2011-05-21' GROUP BY 1 ORDER BY 2 DESC"
var formatSql = sqlFormatter.format(sql1, { language: 'sql', indent: '    ' });
var editor = ace.edit("editor");
editor.setTheme("ace/theme/crimson_editor");
editor.session.setMode("ace/mode/sql");
editor.session.setFoldStyle("markbeginend");
editor.setValue(formatSql);
// 折叠默认隐藏，focus 后显示
editor.setFadeFoldWidgets(true)
editor.setReadOnly(true);
editor.setShowPrintMargin(false);
editor.session.setUseWrapMode(true);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- 
    源码
    https://github.com/sql-formatter-org/sql-formatter/archive/refs/tags/v12.2.0.zip
    https://github.com/ajaxorg/ace/archive/refs/tags/v1.19.0.zip
    样式在线参考
    https://ace.c9.io/build/kitchen-sink.html
    https://sql-formatter-org.github.io/sql-formatter/
    文档
    https://www.heibaiketang.com/blog/show/95.html#ace-js-5
    https://www.jianshu.com/p/8a4a5e273538
    https://extendsclass.com/sql-formatter.html
  -->
  <script src="https://cdn.bootcdn.net/ajax/libs/sql-formatter/12.2.0/sql-formatter.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.18.0/ace.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.19.0/ace.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.19.0/mode-sql.min.js" type="application/javascript"></script>
</head>
<body>
<div id="editor" style="width: 300px;height: 300px"><div>
</body>
</html>