feat: make SQL selectable as a language with syntax highlighting

src/components/CodeEditor.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
+import { sql } from "@codemirror/lang-sql"
 import { EditorState } from "@codemirror/state"
 import { EditorView } from "@codemirror/view"
 import { autocompletion, completeAnyWord } from "@codemirror/autocomplete"
@@ -57,6 +58,9 @@ const langExtension = computed(() => {
   if (props.language === "python" || props.language === "turtle") {
     return python()
   }
+  if (props.language === "sql") {
+    return sql()
+  }
   return cpp()
 })
 

src/components/SelectLanguage.vue

@@ -10,16 +10,17 @@ const LANGS = computed(() => {
     ["turtle", "海龟绘图"],
     ["c", "C 语言"],
     ["cpp", "C++"],
+    ["sql", "SQL"],
   ]
   if (isMobile.value) {
-    return allLangs.filter(([lang]) => lang !== "turtle")
+    return allLangs.filter(([lang]) => lang !== "turtle" && lang !== "sql")
   }
   return allLangs
 })
 
-// 如果当前在移动端且语言是海龟绘图，自动切换到 Python
+// 如果当前在移动端且语言是海龟绘图或 SQL，自动切换到 Python
 watch(isMobile, (mobile) => {
-  if (mobile && code.language === "turtle") {
+  if (mobile && (code.language === "turtle" || code.language === "sql")) {
     code.language = "python"
   }
 })