【Draft】Editor style

[jamliaoo]

Description

This PR introduces a styling system for the CodeMirror 6 editor, providing real-time visual feedback for Markdown syntax and math formulas.

Features Implemented

• Markdown syntax (eg. h1~h6, list items)
• Math formula Highlighting

Technical Architecture

Three-Layer Styling System

1. Base Theme Layer (EditorView.theme)

   • Global static CSS styles
   • Pseudo-class support (:hover, :focus)
   • Best performance

2. Syntax Highlighting Layer (HighlightStyle)

   • Text-level styling using @lezer/highlight tags
   • Font size, weight, and color adjustments
   • Integrates with markdown() extension

3. Dynamic Decoration Layer (ViewPlugin)

   • Real-time content analysis
   • Block backgrounds and special marking
   • Responsive to document changes

Actual Workflow

1. User Input: User types "# Hello"
2. Parsing: markdown() extension parses it as a heading
3. Text Styling: HighlightStyle applies heading1 styles (2em font size)
4. Block Decoration: markdown-line-decorations adds cm-heading1-block class
5. CSS Application: EditorView.theme CSS takes effect (yellow background)
6. Visual Result: User sees large font with yellow background heading

Customization Scope

What You Can Customize:

1. Colors

• Background colors
• Text colors
• Border colors

2. Typography

• Font sizes
• Font weights
• Font families

3. Spacing

• Padding
• Margins
• Line heights

4. Decorations

• Underlines
• Borders
• Box shadows

5. Animations

• Hover effects
• CSS transitions

Demo Content & Screenshot

## Example

### 空白和特殊字符

- 包含空格的數學公式：$ x + y = z $
- 特殊字符：$\alpha + \beta = \gamma$
- 程式碼中的特殊字符：`console.log("Hello $world");`

### 巢狀結構

- 清單項目包含程式碼：`npm install`
- 清單項目包含數學：$\pi \approx 3.14159$
- 清單項目包含 **粗體** 和 _斜體_

> 引用中的清單：
>
> - 項目一包含 $數學公式$
> - 項目二包含 `程式碼`