Add split-view demo, styles

wherewhere · wherewhere · commit f969e3b28687 · 2026-03-29T14:06:32.000+08:00
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ A CodeMirror extension that provides C# syntax highlighting and language support
 ```ts
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { csharp } from "@replit/codemirror-lang-csharp";
+import { csharp } from '@replit/codemirror-lang-csharp';
 import { basicSetup } from 'codemirror';
 
 new EditorView({
@@ -17,13 +17,13 @@ new EditorView({
 using System;
 namespace Test
 {
-  class Program
-  {
-    public static void Main(string[] args)
+    class Program
     {
-      Console.WriteLine("Hello, world!");
+        public static void Main(string[] args)
+        {
+            Console.WriteLine("Hello, world!");
+        }
     }
-  }
 }
 `,
     extensions: [basicSetup, csharp()],
diff --git a/dev/index.css b/dev/index.css
@@ -0,0 +1,52 @@
+:root {
+    color-scheme: dark;
+}
+
+body,
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+div.split-view {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 0.3rem;
+}
+
+div.split-view #editor,
+div.split-view #syntax {
+    display: flex;
+    width: 50%;
+    overflow: auto;
+}
+
+div.split-view #editor .cm-editor,
+div.split-view #syntax pre {
+    flex: 1;
+    outline: none;
+    overflow: inherit;
+}
+
+div.split-view #syntax pre {
+    margin: 0;
+    padding: 4px 2px 4px 6px;
+}
+
+@media (max-width: 767px) {
+    div.split-view {
+        flex-direction: column;
+    }
+
+    div.split-view #editor,
+    div.split-view #syntax {
+        width: 100%;
+        height: 50%;
+    }
+}
diff --git a/dev/index.html b/dev/index.html
@@ -4,17 +4,18 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
-  <style>
-    :root {
-      color-scheme: dark;
-    }
-  </style>
+  <title>codemirror-lang-csharp</title>
+  <meta name="description" content="A C# mode for CodeMirror 6">
+  <link rel="icon" href="https://avatars.githubusercontent.com/u/983194">
+  <link rel="stylesheet" href="./index.css" />
+  <script type="module" src="./index.ts"></script>
 </head>
 
-<body class="replit-ui-theme-root dark">
-  <div id="editor"></div>
-  <script type="module" src="./index.ts"></script>
+<body>
+  <div class="split-view">
+    <div id="editor"></div>
+    <div id="syntax"></div>
+  </div>
 </body>
 
 </html>
diff --git a/dev/index.ts b/dev/index.ts
@@ -233,6 +233,10 @@ namespace osu.Game.Rulesets
 }
 `
 
+const syntax = document.createElement('pre');
+syntax.className = 'ͼo';
+document.getElementById('syntax')!.appendChild(syntax);
+
 new EditorView({
     state: EditorState.create({
         doc,
@@ -242,15 +246,14 @@ new EditorView({
             oneDark,
             keymap.of([indentWithTab]),
             indentUnit.of('    '),
-            EditorView.lineWrapping,
             EditorView.updateListener.of(e => {
                 if (e.docChanged) {
                     const doc = e.state.doc.toString();
-                    console.log(printTree(parser.parse(doc), doc));
+                    syntax.textContent = printTree(parser.parse(doc), doc);
                 }
             })],
     }),
     parent: document.querySelector('#editor')!,
 });
 
-console.log(printTree(parser.parse(doc), doc));
+syntax.textContent = printTree(parser.parse(doc), doc);
