Add grouped data language highlighting

Author: 0disoft

src/lib/editor/code-block-highlight.ts

@@ -353,6 +353,56 @@ const keywordSets: Partial<Record<DcLanguageId, readonly string[]>> = {
     "while",
   ],
   json: ["false", "null", "true"],
+  yaml: ["false", "null", "off", "on", "true", "yes", "no"],
+  toml: ["false", "true"],
+  sql: [
+    "add",
+    "alter",
+    "and",
+    "as",
+    "asc",
+    "between",
+    "by",
+    "case",
+    "create",
+    "delete",
+    "desc",
+    "distinct",
+    "drop",
+    "else",
+    "end",
+    "exists",
+    "false",
+    "from",
+    "group",
+    "having",
+    "in",
+    "inner",
+    "insert",
+    "into",
+    "is",
+    "join",
+    "left",
+    "like",
+    "limit",
+    "not",
+    "null",
+    "on",
+    "or",
+    "order",
+    "outer",
+    "right",
+    "select",
+    "set",
+    "table",
+    "then",
+    "true",
+    "union",
+    "update",
+    "values",
+    "when",
+    "where",
+  ],
   asm: [
     "add",
     "and",
@@ -416,7 +466,7 @@ const cFamilyLanguages = new Set<DcLanguageId>([
   "mojo",
 ]);
 
-const hashCommentLanguages = new Set<DcLanguageId>(["bash", "python"]);
+const hashCommentLanguages = new Set<DcLanguageId>(["bash", "python", "yaml", "toml"]);
 
 const htmlLikeLanguages = new Set<DcLanguageId>(["html", "svelte", "astro", "tailwind", "unocss"]);
 
@@ -466,7 +516,7 @@ function keywordRegexFor(language: DcLanguageId): RegExp | undefined {
     return undefined;
   }
 
-  return new RegExp(`\\b(${languageKeywords.join("|")})\\b`, "g");
+  return new RegExp(`\\b(${languageKeywords.join("|")})\\b`, language === "sql" ? "gi" : "g");
 }
 
 function keywordSetFor(language: DcLanguageId): ReadonlySet<string> {
@@ -487,7 +537,7 @@ function lineCommentPrefixes(language: DcLanguageId): readonly string[] {
     return ["#"];
   }
 
-  if (language === "haskell") {
+  if (language === "haskell" || language === "sql") {
     return ["--"];
   }
 

src/lib/editor/markdown-import.ts

@@ -82,6 +82,14 @@ function normalizeLanguage(value: string | undefined, fallback: DcLanguageId): D
     mjs: "javascript",
     ts: "typescript",
     mts: "typescript",
+    jsonc: "json",
+    yml: "yaml",
+    mysql: "sql",
+    postgres: "sql",
+    postgresql: "sql",
+    sqlite: "sql",
+    sqlite3: "sql",
+    mssql: "sql",
     udiff: "diff",
     patch: "patch",
     shell: "bash",

src/lib/highlighter/catalog.ts

@@ -1,40 +1,63 @@
 type SupportedLanguage = {
   readonly id: string;
   readonly label: string;
+  readonly group: SupportedLanguageGroupId;
   readonly shikiLanguage?: string;
 };
 
+type SupportedLanguageGroupId = "native" | "web" | "data" | "diff" | "script" | "general";
+
+export const supportedLanguageGroupLabels = {
+  native: "시스템/네이티브",
+  web: "웹/프론트엔드",
+  data: "데이터/설정",
+  diff: "변경/패치",
+  script: "스크립트",
+  general: "일반 언어",
+} as const satisfies Record<SupportedLanguageGroupId, string>;
+
 export const supportedLanguages = [
-  { id: "c", label: "C" },
-  { id: "cpp", label: "C++" },
-  { id: "csharp", label: "C#" },
-  { id: "asm", label: "Assembly" },
-  { id: "javascript", label: "JavaScript" },
-  { id: "typescript", label: "TypeScript" },
-  { id: "jsx", label: "React JSX" },
-  { id: "tsx", label: "React TSX" },
-  { id: "svelte", label: "Svelte" },
-  { id: "astro", label: "Astro" },
-  { id: "html", label: "HTML" },
-  { id: "css", label: "CSS" },
-  { id: "tailwind", label: "Tailwind CSS", shikiLanguage: "html" },
-  { id: "unocss", label: "UnoCSS", shikiLanguage: "html" },
-  { id: "php", label: "PHP" },
-  { id: "json", label: "JSON" },
-  { id: "diff", label: "Diff" },
-  { id: "patch", label: "Patch", shikiLanguage: "diff" },
-  { id: "bash", label: "Bash" },
-  { id: "python", label: "Python" },
-  { id: "java", label: "Java" },
-  { id: "go", label: "Go" },
-  { id: "rust", label: "Rust" },
-  { id: "haskell", label: "Haskell" },
-  { id: "scala", label: "Scala" },
-  { id: "zig", label: "Zig" },
-  { id: "julia", label: "Julia" },
-  { id: "mojo", label: "Mojo" },
+  { id: "c", label: "C", group: "native" },
+  { id: "cpp", label: "C++", group: "native" },
+  { id: "csharp", label: "C#", group: "native" },
+  { id: "asm", label: "Assembly", group: "native" },
+  { id: "rust", label: "Rust", group: "native" },
+  { id: "zig", label: "Zig", group: "native" },
+  { id: "javascript", label: "JavaScript", group: "web" },
+  { id: "typescript", label: "TypeScript", group: "web" },
+  { id: "jsx", label: "React JSX", group: "web" },
+  { id: "tsx", label: "React TSX", group: "web" },
+  { id: "svelte", label: "Svelte", group: "web" },
+  { id: "astro", label: "Astro", group: "web" },
+  { id: "html", label: "HTML", group: "web" },
+  { id: "css", label: "CSS", group: "web" },
+  { id: "tailwind", label: "Tailwind CSS", group: "web", shikiLanguage: "html" },
+  { id: "unocss", label: "UnoCSS", group: "web", shikiLanguage: "html" },
+  { id: "php", label: "PHP", group: "web" },
+  { id: "json", label: "JSON", group: "data" },
+  { id: "yaml", label: "YAML", group: "data" },
+  { id: "toml", label: "TOML", group: "data" },
+  { id: "sql", label: "SQL", group: "data" },
+  { id: "diff", label: "Diff", group: "diff" },
+  { id: "patch", label: "Patch", group: "diff", shikiLanguage: "diff" },
+  { id: "bash", label: "Bash", group: "script" },
+  { id: "python", label: "Python", group: "script" },
+  { id: "java", label: "Java", group: "general" },
+  { id: "go", label: "Go", group: "general" },
+  { id: "haskell", label: "Haskell", group: "general" },
+  { id: "scala", label: "Scala", group: "general" },
+  { id: "julia", label: "Julia", group: "general" },
+  { id: "mojo", label: "Mojo", group: "general" },
 ] as const satisfies readonly SupportedLanguage[];
 
+export const supportedLanguageGroups = Object.entries(supportedLanguageGroupLabels)
+  .map(([id, label]) => ({
+    id: id as SupportedLanguageGroupId,
+    label,
+    languages: supportedLanguages.filter((language) => language.group === id),
+  }))
+  .filter((group) => group.languages.length > 0);
+
 export const supportedThemes = [
   { id: "github-dark", label: "GitHub Dark" },
   { id: "github-light", label: "GitHub Light" },

src/lib/highlighter/shiki-client.ts

@@ -26,6 +26,9 @@ const languageInputs: Record<DcLanguageId, LanguageInput> = {
   unocss: () => import("@shikijs/langs/html").then((module) => module.default),
   php: () => import("@shikijs/langs/php").then((module) => module.default),
   json: () => import("@shikijs/langs/json").then((module) => module.default),
+  yaml: () => import("@shikijs/langs/yaml").then((module) => module.default),
+  toml: () => import("@shikijs/langs/toml").then((module) => module.default),
+  sql: () => import("@shikijs/langs/sql").then((module) => module.default),
   diff: () => import("@shikijs/langs/diff").then((module) => module.default),
   patch: () => import("@shikijs/langs/diff").then((module) => module.default),
   bash: () => import("@shikijs/langs/bash").then((module) => module.default),

src/routes/+page.svelte

@@ -47,6 +47,7 @@
         defaultLanguage,
         defaultTheme,
         isSupportedLanguage,
+        supportedLanguageGroups,
         supportedLanguages,
         supportedThemes,
         type DcLanguageId,
@@ -2988,8 +2989,12 @@
                                 .run(),
                         )}
                 >
-                    {#each supportedLanguages as item}
-                        <option value={item.id}>{item.label}</option>
+                    {#each supportedLanguageGroups as group}
+                        <optgroup label={group.label}>
+                            {#each group.languages as item}
+                                <option value={item.id}>{item.label}</option>
+                            {/each}
+                        </optgroup>
                     {/each}
                 </select>
             </label>

tests/unit/code-block-highlight.test.ts

@@ -45,6 +45,18 @@ describe("editor code block highlighting", () => {
     expect(tokenTexts(code, "comment", "asm")).toEqual(["; exit"]);
   });
 
+  it("highlights data and query code block tokens", () => {
+    expect(tokenTexts("enabled: true # comment", "keyword", "yaml")).toEqual(["true"]);
+    expect(tokenTexts("enabled: true # comment", "comment", "yaml")).toEqual(["# comment"]);
+    expect(tokenTexts('name = "dc"\nenabled = false', "keyword", "toml")).toEqual(["false"]);
+    expect(tokenTexts("SELECT title FROM posts WHERE id = 1;", "keyword", "sql")).toEqual([
+      "SELECT",
+      "FROM",
+      "WHERE",
+    ]);
+    expect(tokenTexts("select * from posts -- latest", "comment", "sql")).toEqual(["-- latest"]);
+  });
+
   it("uses CSS block comments without treating double slashes as comments", () => {
     const code = [
       "/* color token should stay protected */",

tests/unit/highlighter-catalog.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import {
+  isSupportedLanguage,
+  supportedLanguageGroups,
+  supportedLanguages,
+} from "../../src/lib/highlighter/catalog";
+
+describe("highlighter catalog", () => {
+  it("groups data and query languages together", () => {
+    const dataGroup = supportedLanguageGroups.find((group) => group.id === "data");
+
+    expect(dataGroup?.label).toBe("데이터/설정");
+    expect(dataGroup?.languages.map((language) => language.id)).toEqual([
+      "json",
+      "yaml",
+      "toml",
+      "sql",
+    ]);
+  });
+
+  it("keeps every listed language selectable and grouped", () => {
+    const groupedLanguageIds = new Set(
+      supportedLanguageGroups.flatMap((group) => group.languages.map((language) => language.id)),
+    );
+
+    for (const language of supportedLanguages) {
+      expect(isSupportedLanguage(language.id)).toBe(true);
+      expect(groupedLanguageIds.has(language.id)).toBe(true);
+    }
+  });
+});

tests/unit/markdown-import.test.ts

@@ -178,6 +178,27 @@ describe("markdown import", () => {
     }
   });
 
+  it("normalizes data and query code fence aliases", () => {
+    expect(
+      parseMarkdownToDocument(["```yml", "enabled: true", "```"].join("\n")).content?.[0],
+    ).toEqual({
+      type: "codeBlock",
+      attrs: { language: "yaml" },
+      content: [{ type: "text", text: "enabled: true" }],
+    });
+
+    for (const fence of ["mysql", "postgres", "sqlite"]) {
+      expect(
+        parseMarkdownToDocument(["```" + fence, "select * from posts", "```"].join("\n"))
+          .content?.[0],
+      ).toEqual({
+        type: "codeBlock",
+        attrs: { language: "sql" },
+        content: [{ type: "text", text: "select * from posts" }],
+      });
+    }
+  });
+
   it("keeps fenced code line highlight metadata", () => {
     expect(
       parseMarkdownToDocument(

tests/unit/shiki-client.test.ts

@@ -26,6 +26,10 @@ const requestedLanguageSamples = [
     token: "i-carbon-send",
   },
   { language: "php", code: "<?php echo strlen('dc');", token: "strlen" },
+  { language: "json", code: '{ "name": "dc", "enabled": true }', token: "enabled" },
+  { language: "yaml", code: "name: dc\nenabled: true", token: "enabled" },
+  { language: "toml", code: 'name = "dc"\nenabled = true', token: "enabled" },
+  { language: "sql", code: "SELECT title FROM posts WHERE id = 1;", token: "SELECT" },
   {
     language: "diff",
     code: "-const oldValue = 1;\n+const newValue = 2;",