docs: add page for @dalbit-yaksok/monaco-language-provider

docs/_/code-runner/index.vue

@@ -63,11 +63,9 @@ async function initializeMonaco() {
     editorInstance.onDidChangeModelContent(() => {
         const updatedCode = editorInstance!.getValue()
         code.value = updatedCode
-
-        languageProvider.updateCode(updatedCode)
     })
 
-    languageProvider.configAutocomplete(editorInstance)
+    languageProvider.configEditor(editorInstance)
 
     editorInstance.onDidFocusEditorText(() => {
         editorInstance!.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, runCode)

docs/index.md

@@ -5,12 +5,11 @@ hero:
     name: 달빛약속
     text: 한글 프로그래밍 언어
     tagline: '약속 프로그래밍 언어의 포크, Formerly known as "Yaksok.ts"'
+    actions:
+        - text: 달빛약속 문법 배우기
+          link: /language/1. 시작하기
+          theme: brand
 features:
-    - title: 약속 문법 배우기
-      icon: 📚
-      link: /language/1. 시작하기
-      details: 간단한 예제를 통해 약속 문법을 배워보세요
-      linkText: 시작하기
     - title: 라이브러리로 사용하기
       icon: 📦
       link: /library/1. 시작하기
@@ -26,6 +25,11 @@ features:
       link: https://jsr.dev/@dalbit-yaksok/core
       details: JSR에서 달빛약속을 설치하세요
       linkText: 'jsr: @dalbit-yaksok/core'
+    - title: Monaco Editor와 함께 사용하기
+      icon: 📝
+      link: /monaco/사용 방법
+      details: Monaco Editor에서 달빛약속을 사용하는 방법을 알아보세요
+      linkText: 'jsr: @dalbit-yaksok/monaco-language-provider'
 ---
 
 <script setup>

docs/monaco/사용 방법.md

@@ -0,0 +1,53 @@
+# Monaco Editor에서 달빛약속 사용하기
+
+[Monaco Editor](https://microsoft.github.io/monaco-editor/)는 Microsoft에서 개발한 코드 에디터 컴포넌트입니다. `jsr:@dalbit-yaksok/monaco-language-provider` 패키지는 Monaco Editor에서 문법 강조, 키워드 자동 완성 등의 편의 기능을 제공합니다.
+
+| 기능                              | 상태 |
+| --------------------------------- | ---- |
+| 문법 강조 (Syntax Highlighting)   | ✅   |
+| 키워드 자동 완성 (Autocompletion) | ✅   |
+| 툴팁 (Tooltip)                    | ❌   |
+| 문법 오류 보기 (Syntax Error)     | ❌   |
+
+## 설치하기
+
+`jsr:@dalbit-yaksok/monaco-language-provider` 패키지를 설치합니다.
+
+```bash
+# Deno
+deno add jsr:@dalbit-yaksok/monaco-language-provider
+
+# NPM
+npx jsr add @dalbit-yaksok/monaco-language-provider
+
+# Yarn
+yarn dlx jsr add @dalbit-yaksok/monaco-language-provider
+
+# Pnpm
+pnpm dlx jsr add @dalbit-yaksok/monaco-language-provider
+
+# Bun
+bunx jsr add @dalbit-yaksok/monaco-language-provider
+```
+
+## 사용하기
+
+`@dalbit-yaksok/monaco-language-provider` 패키지를 불러와 Monaco Editor에 적용합니다.
+
+Monaco Editor에서 불러온 languages 객체, editor의 인스턴스가 필요합니다.
+
+```ts{2-5,7-8,11,13}
+import { languages, editor } from 'monaco-editor'
+import {
+    DalbitYaksokApplier,
+    LANG_ID,
+} from '@dalbit-yaksok/monaco-language-provider'
+
+const languageProvider = new DalbitYaksokApplier(code.value)
+languageProvider.register(languages)
+
+const editorInstance = editor.create(element, {
+    language: LANG_ID,
+})
+languageProvider.configEditor(editorInstance)
+```

monaco-language-provider/language.ts

@@ -61,8 +61,12 @@ export class DalbitYaksokApplier {
         )
     }
 
-    public configAutocomplete(editorInstance: editor.IStandaloneCodeEditor) {
+    public configEditor(editorInstance: editor.IStandaloneCodeEditor) {
         setupCompletion(editorInstance)
+
+        editorInstance.onDidChangeModelContent(() => {
+            this.updateCode(editorInstance.getValue())
+        })
     }
 
     updateCode(code: string) {