From 8750e3869b2b8c9c42da069ad9d43eaeae848c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:54:06 +0000
Subject: [PATCH 01/20] feat: implement basic level tokenizer(syntax highlight)

---
 docs/_/code-runner.vue | 99 ++++++++++++++++++++++++++++++++++++++----
 docs/_/create-docs.ts  |  2 +-
 2 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/docs/_/code-runner.vue b/docs/_/code-runner.vue
index 8184ed9..86674ec 100644
--- a/docs/_/code-runner.vue
+++ b/docs/_/code-runner.vue
@@ -1,7 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import AnsiCode from 'ansi-to-html'
-import { yaksok } from '@dalbit-yaksok/core'
+import type { editor, languages } from 'monaco-editor'
+import { yaksok, tokenize } from '@dalbit-yaksok/core'
 
 const props = defineProps({
     code: {
@@ -22,17 +23,98 @@ const editorRef = useTemplateRef('editor')
 
 const code = ref(props.code)
 const stdout = ref([])
-let editorInstance = null
+
+let editorInstance: editor.IStandaloneCodeEditor | null = null
 
 const ansiCode = new AnsiCode()
 
+class DalbitYaksokMonacoTokenizer implements languages.TokensProvider {
+    getInitialState() {
+        return {
+            clone() {
+                return this
+            },
+            equals() {
+                return false
+            },
+        }
+    }
+
+    tokenize(line: string, state: any) {
+        const tokenized = tokenize(line)
+        const tokens = tokenized.map((token) => {
+            const scopes =
+                (
+                    {
+                        STRING: 'string',
+                        OPERATOR: 'operator',
+                        NUMBER: 'number',
+                        SPACE: 'whitespace',
+                        INDENT: 'whitespace',
+                        COMMA: 'punctuation',
+                        OPENING_PARENTHESIS: 'punctuation',
+                        CLOSING_PARENTHESIS: 'punctuation',
+                        OPENING_BRACKET: 'punctuation',
+                        CLOSING_BRACKET: 'punctuation',
+                        FFI_BODY: 'string',
+                        NEW_LINE: 'whitespace',
+                        COLON: 'punctuation',
+                        LINE_COMMENT: 'comment',
+                        MENTION: 'tag',
+                        UNKNOWN: 'invalid',
+                    } as Record<string, string>
+                )[token.type] || 'invalid'
+
+            return {
+                startIndex: token.position.column - 1,
+                scopes,
+            }
+        })
+
+        return {
+            tokens,
+            endState: state,
+        }
+    }
+}
+
 async function initializeMonaco() {
-    const editorElement = editorRef.value
+    const editorElement = editorRef.value!
 
-    const { editor, KeyCode, KeyMod } = await import(
+    const { editor, KeyCode, KeyMod, languages } = await import(
         'monaco-editor/esm/vs/editor/editor.api'
     )
 
+    languages.register({ id: 'yaksok' })
+
+    languages.onLanguage('yaksok', () => {
+        languages.setLanguageConfiguration('yaksok', {
+            comments: {
+                lineComment: '//',
+            },
+            brackets: [
+                ['{', '}'],
+                ['[', ']'],
+                ['(', ')'],
+            ],
+            autoClosingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"', notIn: ['string'] },
+                { open: "'", close: "'", notIn: ['string'] },
+            ],
+            surroundingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"' },
+                { open: "'", close: "'" },
+            ],
+        })
+        languages.setTokensProvider('yaksok', new DalbitYaksokMonacoTokenizer())
+    })
+
     editorInstance = editor.create(editorElement, {
         automaticLayout: true,
         value: code.value,
@@ -41,14 +123,15 @@ async function initializeMonaco() {
             enabled: false,
         },
         lineNumbersMinChars: 3,
+        language: 'yaksok',
     })
 
     editorInstance.onDidChangeModelContent(() => {
-        code.value = editorInstance.getValue()
+        code.value = editorInstance!.getValue()
     })
 
     editorInstance.onDidFocusEditorText(() => {
-        editorInstance.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, runCode)
+        editorInstance!.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, runCode)
     })
 }
 
@@ -62,7 +145,7 @@ function ansiToHtml(content) {
 }
 
 function viewAnswer() {
-    editorInstance.setValue(props.challenge.answerCode)
+    editorInstance!.setValue(props.challenge.answerCode)
 }
 
 async function runCode() {
diff --git a/docs/_/create-docs.ts b/docs/_/create-docs.ts
index 367f086..24a14fa 100644
--- a/docs/_/create-docs.ts
+++ b/docs/_/create-docs.ts
@@ -28,7 +28,7 @@ if (!isWatch) {
 
 console.log('Waiting for file changes...')
 
-const watcher = Deno.watchFs('./src', {
+const watcher = Deno.watchFs(new URL('../../core', import.meta.url).pathname, {
     recursive: true,
 })
 

From e93fb47712842a730ca44aaade96d06da6bbbabd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:44:54 +0000
Subject: [PATCH 02/20] feat: implement variable declaration highlighting

---
 core/mod.ts                                   |  2 +
 docs/.vitepress/theme/index.ts                | 11 +++-
 .../index.vue}                                | 54 +-----------------
 docs/_/code-runner/merge-syntax.ts            | 39 +++++++++++++
 docs/_/code-runner/tokenize-provider.ts       | 55 +++++++++++++++++++
 docs/_/code-runner/type.ts                    |  5 ++
 docs/index.md                                 |  3 +-
 7 files changed, 115 insertions(+), 54 deletions(-)
 rename docs/_/{code-runner.vue => code-runner/index.vue} (84%)
 create mode 100644 docs/_/code-runner/merge-syntax.ts
 create mode 100644 docs/_/code-runner/tokenize-provider.ts
 create mode 100644 docs/_/code-runner/type.ts

diff --git a/core/mod.ts b/core/mod.ts
index 0601027..0ad02db 100644
--- a/core/mod.ts
+++ b/core/mod.ts
@@ -11,6 +11,8 @@ export * from './node/index.ts'
 export { tokenize } from './prepare/tokenize/index.ts'
 export * from './prepare/tokenize/token.ts'
 
+export { parse } from './prepare/parse/index.ts'
+
 export type { RuntimeConfig } from './runtime/runtime-config.ts'
 export type { FunctionInvokingParams } from './constant/type.ts'
 export type { FEATURE_FLAG } from './constant/feature-flags.ts'
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index bbf86b5..ac9bbfc 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,5 +1,14 @@
 import DefaultTheme from 'vitepress/theme-without-fonts'
 
 import './custom.css'
+import type { Theme } from 'vitepress'
 
-export default DefaultTheme
+import CodeRunner from '../../_/code-runner/index.vue'
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp({ app }) {
+        // register your custom global components
+        app.component('code-runner', CodeRunner)
+    },
+} satisfies Theme
diff --git a/docs/_/code-runner.vue b/docs/_/code-runner/index.vue
similarity index 84%
rename from docs/_/code-runner.vue
rename to docs/_/code-runner/index.vue
index 86674ec..d3d083a 100644
--- a/docs/_/code-runner.vue
+++ b/docs/_/code-runner/index.vue
@@ -2,7 +2,9 @@
 import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import AnsiCode from 'ansi-to-html'
 import type { editor, languages } from 'monaco-editor'
+
 import { yaksok, tokenize } from '@dalbit-yaksok/core'
+import { TokenizeProvider } from './tokenize-provider'
 
 const props = defineProps({
     code: {
@@ -28,56 +30,6 @@ let editorInstance: editor.IStandaloneCodeEditor | null = null
 
 const ansiCode = new AnsiCode()
 
-class DalbitYaksokMonacoTokenizer implements languages.TokensProvider {
-    getInitialState() {
-        return {
-            clone() {
-                return this
-            },
-            equals() {
-                return false
-            },
-        }
-    }
-
-    tokenize(line: string, state: any) {
-        const tokenized = tokenize(line)
-        const tokens = tokenized.map((token) => {
-            const scopes =
-                (
-                    {
-                        STRING: 'string',
-                        OPERATOR: 'operator',
-                        NUMBER: 'number',
-                        SPACE: 'whitespace',
-                        INDENT: 'whitespace',
-                        COMMA: 'punctuation',
-                        OPENING_PARENTHESIS: 'punctuation',
-                        CLOSING_PARENTHESIS: 'punctuation',
-                        OPENING_BRACKET: 'punctuation',
-                        CLOSING_BRACKET: 'punctuation',
-                        FFI_BODY: 'string',
-                        NEW_LINE: 'whitespace',
-                        COLON: 'punctuation',
-                        LINE_COMMENT: 'comment',
-                        MENTION: 'tag',
-                        UNKNOWN: 'invalid',
-                    } as Record<string, string>
-                )[token.type] || 'invalid'
-
-            return {
-                startIndex: token.position.column - 1,
-                scopes,
-            }
-        })
-
-        return {
-            tokens,
-            endState: state,
-        }
-    }
-}
-
 async function initializeMonaco() {
     const editorElement = editorRef.value!
 
@@ -112,7 +64,7 @@ async function initializeMonaco() {
                 { open: "'", close: "'" },
             ],
         })
-        languages.setTokensProvider('yaksok', new DalbitYaksokMonacoTokenizer())
+        languages.setTokensProvider('yaksok', new TokenizeProvider())
     })
 
     editorInstance = editor.create(editorElement, {
diff --git a/docs/_/code-runner/merge-syntax.ts b/docs/_/code-runner/merge-syntax.ts
new file mode 100644
index 0000000..f5ba43f
--- /dev/null
+++ b/docs/_/code-runner/merge-syntax.ts
@@ -0,0 +1,39 @@
+import { TOKEN_TYPE } from '@dalbit-yaksok/core'
+import { ColorToken } from './type.ts'
+
+export function mergeSyntax(_tokens: ColorToken[]) {
+    const tokens = _tokens.slice()
+    mergeVariableDeclaration(tokens)
+
+    return tokens
+}
+
+function mergeVariableDeclaration(tokens: ColorToken[]) {
+    const colonPositions: number[] = []
+
+    for (const index in tokens) {
+        const current = tokens[index]
+
+        if (current.type === TOKEN_TYPE.COLON) {
+            colonPositions.push(+index)
+        }
+    }
+
+    for (const colonPosition of colonPositions) {
+        for (
+            let i = colonPosition;
+            tokens[i] &&
+            tokens[i].type !== TOKEN_TYPE.NEW_LINE &&
+            tokens[i].type !== TOKEN_TYPE.INDENT;
+            i--
+        ) {
+            if (tokens[i].type === TOKEN_TYPE.IDENTIFIER) {
+                if (tokens[i].value === '결과') {
+                    tokens[i].scope = 'keyword'
+                } else {
+                    tokens[i].scope = 'variable'
+                }
+            }
+        }
+    }
+}
diff --git a/docs/_/code-runner/tokenize-provider.ts b/docs/_/code-runner/tokenize-provider.ts
new file mode 100644
index 0000000..9a2c333
--- /dev/null
+++ b/docs/_/code-runner/tokenize-provider.ts
@@ -0,0 +1,55 @@
+import type { languages } from 'monaco-editor'
+import { tokenize } from '@dalbit-yaksok/core'
+import { mergeSyntax } from './merge-syntax.ts'
+
+export class TokenizeProvider implements languages.TokensProvider {
+    getInitialState() {
+        return {
+            clone() {
+                return this
+            },
+            equals() {
+                return false
+            },
+        }
+    }
+
+    tokenize(line: string, state: any) {
+        const tokenized = mergeSyntax(tokenize(line))
+        const tokens = tokenized.map((token) => {
+            const scopes =
+                token.scope ||
+                (
+                    {
+                        STRING: 'string',
+                        OPERATOR: 'operator',
+                        NUMBER: 'number',
+                        SPACE: 'whitespace',
+                        INDENT: 'whitespace',
+                        COMMA: 'punctuation',
+                        OPENING_PARENTHESIS: 'punctuation',
+                        CLOSING_PARENTHESIS: 'punctuation',
+                        OPENING_BRACKET: 'punctuation',
+                        CLOSING_BRACKET: 'punctuation',
+                        FFI_BODY: 'string',
+                        NEW_LINE: 'whitespace',
+                        COLON: 'punctuation',
+                        LINE_COMMENT: 'comment',
+                        MENTION: 'tag',
+                        UNKNOWN: 'invalid',
+                    } as Record<string, string>
+                )[token.type] ||
+                'invalid'
+
+            return {
+                startIndex: token.position.column - 1,
+                scopes,
+            }
+        })
+
+        return {
+            tokens,
+            endState: state,
+        }
+    }
+}
diff --git a/docs/_/code-runner/type.ts b/docs/_/code-runner/type.ts
new file mode 100644
index 0000000..cc42ef3
--- /dev/null
+++ b/docs/_/code-runner/type.ts
@@ -0,0 +1,5 @@
+import { Token } from '@dalbit-yaksok/core'
+
+export interface ColorToken extends Token {
+    scope?: string
+}
diff --git a/docs/index.md b/docs/index.md
index 80f47b5..e5518d6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -29,7 +29,6 @@ features:
 ---
 
 <script setup>
-import CodeRunner from "./_/code-runner.vue"
 
 const DEFAULT_CODE = `약속, 키가 (키)cm이고 몸무게가 (몸무게)일 때 비만도
     결과: 몸무게 / (키 / 100 * 키 / 100)
@@ -44,4 +43,4 @@ const codeFromUrl = (globalThis.location && new URL(globalThis.location.href).se
 
 ## 지금 달빛약속 코드 실행해보기
 
-<CodeRunner id="demo-code-runner" :code="codeFromUrl" />
+<code-runner id="demo-code-runner" :code="codeFromUrl" />

From 82eb35bdd9b28cf55d16755a5d20dcd5298512e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:07:36 +0000
Subject: [PATCH 03/20] chore: implement colorizer using parser structure

---
 docs/_/code-runner/index.vue            | 10 ++++++++--
 docs/_/code-runner/tokenize-provider.ts |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index d3d083a..ec01099 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -39,6 +39,8 @@ async function initializeMonaco() {
 
     languages.register({ id: 'yaksok' })
 
+    const tokenizeProvider = new TokenizeProvider(code.value)
+
     languages.onLanguage('yaksok', () => {
         languages.setLanguageConfiguration('yaksok', {
             comments: {
@@ -64,7 +66,8 @@ async function initializeMonaco() {
                 { open: "'", close: "'" },
             ],
         })
-        languages.setTokensProvider('yaksok', new TokenizeProvider())
+
+        languages.setTokensProvider('yaksok', tokenizeProvider)
     })
 
     editorInstance = editor.create(editorElement, {
@@ -79,7 +82,10 @@ async function initializeMonaco() {
     })
 
     editorInstance.onDidChangeModelContent(() => {
-        code.value = editorInstance!.getValue()
+        const updatedCode = editorInstance!.getValue()
+        code.value = updatedCode
+
+        tokenizeProvider.updateCode(updatedCode)
     })
 
     editorInstance.onDidFocusEditorText(() => {
diff --git a/docs/_/code-runner/tokenize-provider.ts b/docs/_/code-runner/tokenize-provider.ts
index 9a2c333..43be508 100644
--- a/docs/_/code-runner/tokenize-provider.ts
+++ b/docs/_/code-runner/tokenize-provider.ts
@@ -1,8 +1,15 @@
 import type { languages } from 'monaco-editor'
-import { tokenize } from '@dalbit-yaksok/core'
+import { tokenize, parse, CodeFile } from '@dalbit-yaksok/core'
 import { mergeSyntax } from './merge-syntax.ts'
 
 export class TokenizeProvider implements languages.TokensProvider {
+    constructor(private code: string) {}
+
+    updateCode(code: string) {
+        console.log(parse(new CodeFile(code)))
+        this.code = code
+    }
+
     getInitialState() {
         return {
             clone() {

From 2b8dbe7638da19979efd9d3537e7d95560ab369a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:21:13 +0000
Subject: [PATCH 04/20] chore: allow monorepo root module import for vite
 server

---
 docs/.vitepress/config.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 88ae9d6..b23d1aa 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -39,6 +39,13 @@ export default defineConfig(
                     minify: false,
                 },
                 plugins: [pluginDeno()],
+                server: {
+                    fs: {
+                        allow: [
+                            '..'
+                        ]
+                    }
+                }
             },
         },
         SIDEBAR_CONFIG,

From 3d51091df6bdf03adf2fe8a936d37c7f02e02a29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:55:51 +0000
Subject: [PATCH 05/20] feat: implement ast-visiting highlighting

---
 core/mod.ts                             |  1 +
 docs/_/code-runner/ast-to-colorize.ts   | 91 +++++++++++++++++++++++++
 docs/_/code-runner/tokenize-provider.ts | 75 ++++++++++----------
 docs/_/code-runner/type.ts              |  8 ++-
 4 files changed, 138 insertions(+), 37 deletions(-)
 create mode 100644 docs/_/code-runner/ast-to-colorize.ts

diff --git a/core/mod.ts b/core/mod.ts
index 0ad02db..88f13b8 100644
--- a/core/mod.ts
+++ b/core/mod.ts
@@ -3,6 +3,7 @@ export { ValueType, ObjectValue, PrimitiveValue } from './value/base.ts'
 export { ListValue } from './value/list.ts'
 
 export { CodeFile } from './type/code-file.ts'
+export type { Position } from './type/position.ts'
 export { yaksok, Runtime } from './runtime/index.ts'
 
 export { Scope } from './executer/scope.ts'
diff --git a/docs/_/code-runner/ast-to-colorize.ts b/docs/_/code-runner/ast-to-colorize.ts
new file mode 100644
index 0000000..f1709e5
--- /dev/null
+++ b/docs/_/code-runner/ast-to-colorize.ts
@@ -0,0 +1,91 @@
+import {
+    Block,
+    DeclareFunction,
+    Identifier,
+    Node,
+    Print,
+    SetVariable,
+} from '@dalbit-yaksok/core'
+import { ColorPart } from './type.ts'
+
+enum SCOPE {
+    KEYWORD = 'keyword',
+    VARIABLE_NAME = 'variable.name',
+    IDENTIFIER = 'comment',
+}
+
+function node(node: Node): ColorPart[] {
+    if (node instanceof Block) {
+        return block(node)
+    }
+
+    if (node instanceof DeclareFunction) {
+        return declareFunction(node)
+    }
+
+    if (node instanceof SetVariable) {
+        return setVariable(node)
+    }
+
+    if (node instanceof Identifier) {
+        return identifier(node)
+    }
+
+    if (node instanceof Print) {
+        return visitPrint(node)
+    }
+
+    console.log('Unknown node:', node)
+
+    return []
+}
+
+function block(ast: Block): ColorPart[] {
+    return ast.children.flatMap(node)
+}
+
+function declareFunction(current: DeclareFunction) {
+    const parts: ColorPart[] = []
+
+    if (current.position) {
+        parts.push({
+            position: current.position,
+            scopes: SCOPE.KEYWORD,
+        })
+    }
+
+    return parts.concat(block(current.body))
+}
+
+function setVariable(current: SetVariable) {
+    const parts: ColorPart[] = []
+
+    if (current.position) {
+        parts.push({
+            position: current.position,
+            scopes: SCOPE.VARIABLE_NAME,
+        })
+    }
+
+    return parts.concat(node(current.value))
+}
+
+function identifier(current: Identifier) {
+    console.log(current)
+    if (current.position) {
+        return [
+            {
+                position: current.position,
+                scopes: SCOPE.IDENTIFIER,
+            },
+        ]
+    }
+
+    return []
+}
+
+function visitPrint(current: Print) {
+    return node(current.value)
+}
+
+export { node as nodeToColorTokens }
diff --git a/docs/_/code-runner/tokenize-provider.ts b/docs/_/code-runner/tokenize-provider.ts
index 43be508..593283b 100644
--- a/docs/_/code-runner/tokenize-provider.ts
+++ b/docs/_/code-runner/tokenize-provider.ts
@@ -1,13 +1,40 @@
 import type { languages } from 'monaco-editor'
-import { tokenize, parse, CodeFile } from '@dalbit-yaksok/core'
-import { mergeSyntax } from './merge-syntax.ts'
+import { parse, CodeFile } from '@dalbit-yaksok/core'
+import { nodeToColorTokens } from './ast-to-colorize.ts'
+import { ColorPart } from './type.ts'
 
 export class TokenizeProvider implements languages.TokensProvider {
-    constructor(private code: string) {}
+    private colorPartsByLine: Map<number, ColorPart[]>
+    private lines: string[]
+
+    constructor(private code: string) {
+        this.lines = code.split('\n')
+        this.colorPartsByLine = this.createColorParts(code)
+    }
+
+    createColorParts(code: string) {
+        const ast = parse(new CodeFile(code)).ast
+        const colorParts = nodeToColorTokens(ast)
+
+        const colorPartsByLine = new Map<number, ColorPart[]>(
+            new Array(this.lines.length).fill(0).map((_, index) => [index, []]),
+        )
+        for (const colorPart of colorParts) {
+            colorPartsByLine.get(colorPart.position.line - 1)!.push(colorPart)
+        }
+
+        console.log({ colorPartsByLine })
+
+        return colorPartsByLine
+    }
 
     updateCode(code: string) {
-        console.log(parse(new CodeFile(code)))
         this.code = code
+        this.lines = code.split('\n')
+
+        console.time('Parse')
+        this.createColorParts(code)
+        console.timeEnd('Parse')
     }
 
     getInitialState() {
@@ -22,40 +49,16 @@ export class TokenizeProvider implements languages.TokensProvider {
     }
 
     tokenize(line: string, state: any) {
-        const tokenized = mergeSyntax(tokenize(line))
-        const tokens = tokenized.map((token) => {
-            const scopes =
-                token.scope ||
-                (
-                    {
-                        STRING: 'string',
-                        OPERATOR: 'operator',
-                        NUMBER: 'number',
-                        SPACE: 'whitespace',
-                        INDENT: 'whitespace',
-                        COMMA: 'punctuation',
-                        OPENING_PARENTHESIS: 'punctuation',
-                        CLOSING_PARENTHESIS: 'punctuation',
-                        OPENING_BRACKET: 'punctuation',
-                        CLOSING_BRACKET: 'punctuation',
-                        FFI_BODY: 'string',
-                        NEW_LINE: 'whitespace',
-                        COLON: 'punctuation',
-                        LINE_COMMENT: 'comment',
-                        MENTION: 'tag',
-                        UNKNOWN: 'invalid',
-                    } as Record<string, string>
-                )[token.type] ||
-                'invalid'
-
-            return {
-                startIndex: token.position.column - 1,
-                scopes,
-            }
-        })
+        const lineNumber = this.lines.indexOf(line)
+        const colorParts = this.colorPartsByLine
+            .get(lineNumber)!
+            .map((part) => ({
+                scopes: part.scopes,
+                startIndex: part.position.column,
+            }))
 
         return {
-            tokens,
+            tokens: colorParts,
             endState: state,
         }
     }
diff --git a/docs/_/code-runner/type.ts b/docs/_/code-runner/type.ts
index cc42ef3..148fe83 100644
--- a/docs/_/code-runner/type.ts
+++ b/docs/_/code-runner/type.ts
@@ -1,5 +1,11 @@
-import { Token } from '@dalbit-yaksok/core'
+import { Position, Token } from '@dalbit-yaksok/core'
 
 export interface ColorToken extends Token {
+    position: Position
     scope?: string
 }
+
+export interface ColorPart {
+    position: Position
+    scopes: string
+}

From ab69cc4ce89d8925e6bc685aeb779b61834ed0d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sat, 21 Dec 2024 07:26:47 +0000
Subject: [PATCH 06/20] feat: implement node.tokens property

---
 core/node/IfStatement.ts                      |   7 +-
 core/node/base.ts                             |  25 ++-
 core/node/block.ts                            |  10 +-
 core/node/calculation.ts                      |  16 +-
 core/node/ffi.ts                              |  18 +-
 core/node/function.ts                         |  13 +-
 core/node/list.ts                             |  93 ++--------
 core/node/listLoop.ts                         |   4 +-
 core/node/loop.ts                             |  14 +-
 core/node/mention.ts                          |  23 +--
 core/node/misc.ts                             |  12 +-
 core/node/operator.ts                         | 163 ++++++++++++++++--
 core/node/primitive-literal.ts                |   8 +-
 core/node/return.ts                           |  10 +-
 core/node/variable.ts                         |   9 +-
 core/prepare/lex/convert-tokens-to-nodes.ts   |  18 +-
 .../dynamicRule/functions/invoke-rule.ts      |  13 +-
 .../mention/create-mentioning-rules.ts        |  11 +-
 core/prepare/parse/index.ts                   |   9 +-
 core/prepare/parse/parse-indent.ts            |   5 +-
 core/prepare/parse/rule.ts                    | 139 ++++++++-------
 core/prepare/parse/srParse.ts                 |  31 +++-
 core/util/merge-tokens.ts                     |   5 +
 runtest.ts                                    |  39 +----
 24 files changed, 414 insertions(+), 281 deletions(-)
 create mode 100644 core/util/merge-tokens.ts

diff --git a/core/node/IfStatement.ts b/core/node/IfStatement.ts
index 4473cf0..a97dece 100644
--- a/core/node/IfStatement.ts
+++ b/core/node/IfStatement.ts
@@ -4,6 +4,7 @@ import type { Block } from './block.ts'
 import { isTruthy } from '../executer/internal/isTruthy.ts'
 import { CallFrame } from '../executer/callFrame.ts'
 import type { Scope } from '../executer/scope.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 interface Case {
     condition?: Evaluable
@@ -13,7 +14,7 @@ interface Case {
 export class IfStatement extends Executable {
     static override friendlyName = '조건문(만약)'
 
-    constructor(public cases: Case[]) {
+    constructor(public cases: Case[], public override tokens: Token[]) {
         super()
     }
 
@@ -46,7 +47,7 @@ export class IfStatement extends Executable {
 export class ElseStatement extends Executable {
     static override friendlyName = '조건문(아니면)'
 
-    constructor(public body: Block) {
+    constructor(public body: Block, public override tokens: Token[]) {
         super()
     }
 }
@@ -54,7 +55,7 @@ export class ElseStatement extends Executable {
 export class ElseIfStatement extends Executable {
     static override friendlyName = '조건문(아니면 만약)'
 
-    constructor(public elseIfCase: Case) {
+    constructor(public elseIfCase: Case, public override tokens: Token[]) {
         super()
     }
 }
diff --git a/core/node/base.ts b/core/node/base.ts
index 0faa7ef..4605518 100644
--- a/core/node/base.ts
+++ b/core/node/base.ts
@@ -1,12 +1,13 @@
 import type { CallFrame } from '../executer/callFrame.ts'
 import type { Scope } from '../executer/scope.ts'
 import { NotDefinedIdentifierError } from '../error/variable.ts'
-import { Position } from '../type/position.ts'
 import { ValueType } from '../value/base.ts'
+import { Token } from '../prepare/tokenize/token.ts'
 
 export class Node {
     [key: string]: unknown
-    position?: Position
+    tokens?: Token[]
+
     static friendlyName = '노드'
 
     toJSON(): object {
@@ -44,7 +45,7 @@ export class Evaluable<T extends ValueType = ValueType> extends Executable {
 export class Identifier extends Evaluable {
     static override friendlyName = '식별자'
 
-    constructor(public value: string, override position?: Position) {
+    constructor(public value: string, public override tokens: Token[]) {
         super()
     }
 
@@ -57,7 +58,7 @@ export class Identifier extends Evaluable {
             return Promise.resolve(scope.getVariable(this.value))
         } catch (e) {
             if (e instanceof NotDefinedIdentifierError) {
-                e.position = this.position
+                e.position = this.tokens?.[0].position
             }
 
             throw e
@@ -65,15 +66,15 @@ export class Identifier extends Evaluable {
     }
 }
 
-export class Operator extends Node {
+export class Operator extends Node implements OperatorNode {
     static override friendlyName = '연산자'
 
-    constructor(public value?: string, public override position?: Position) {
+    constructor(public value: string | null, public override tokens: Token[]) {
         super()
     }
 
     override toPrint(): string {
-        return this.value ?? 'unknown'
+        return 'unknown'
     }
 
     call(..._operands: ValueType[]): ValueType {
@@ -81,10 +82,18 @@ export class Operator extends Node {
     }
 }
 
+export interface OperatorNode {
+    call(...operands: ValueType[]): ValueType
+}
+
+export type OperatorClass ={
+    new (...args: any[]): OperatorNode
+}
+
 export class Expression extends Node {
     static override friendlyName = '표현식'
 
-    constructor(public value: string, public override position?: Position) {
+    constructor(public value: string, public override tokens: Token[]) {
         super()
     }
 
diff --git a/core/node/block.ts b/core/node/block.ts
index 4860006..9644587 100644
--- a/core/node/block.ts
+++ b/core/node/block.ts
@@ -1,15 +1,17 @@
 import { CallFrame } from '../executer/callFrame.ts'
 import { CannotParseError } from '../error/index.ts'
-import type { Scope } from '../executer/scope.ts'
-import { EOL } from './misc.ts'
 import { Executable, type Node } from './base.ts'
+import { EOL } from './misc.ts'
+
+import type { Token } from '../prepare/tokenize/token.ts'
+import type { Scope } from '../executer/scope.ts'
 
 export class Block extends Executable {
     static override friendlyName = '코드 덩어리'
 
     children: Node[]
 
-    constructor(content: Node[]) {
+    constructor(content: Node[], public override tokens: Token[]) {
         super()
         this.children = content
     }
@@ -24,7 +26,7 @@ export class Block extends Executable {
                 continue
             } else {
                 throw new CannotParseError({
-                    position: child.position,
+                    position: child.tokens?.[0].position,
                     resource: {
                         part: child,
                     },
diff --git a/core/node/calculation.ts b/core/node/calculation.ts
index 53c6313..20db376 100644
--- a/core/node/calculation.ts
+++ b/core/node/calculation.ts
@@ -15,12 +15,13 @@ import {
     OrOperator,
     PlusOperator,
     PowerOperator,
+    RangeOperator,
 } from './operator.ts'
-import { Evaluable, Operator } from './base.ts'
-import { RangeOperator } from './list.ts'
+import { Evaluable, Operator, OperatorClass } from './base.ts'
 import { ValueType } from '../value/base.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
-const OPERATOR_PRECEDENCES: Array<(typeof Operator)[]> = [
+const OPERATOR_PRECEDENCES: OperatorClass[][] = [
     [AndOperator, OrOperator],
     [
         EqualOperator,
@@ -38,7 +39,7 @@ const OPERATOR_PRECEDENCES: Array<(typeof Operator)[]> = [
 export class ValueWithParenthesis extends Evaluable {
     static override friendlyName = '괄호로 묶인 값'
 
-    constructor(public value: Evaluable) {
+    constructor(public value: Evaluable, public override tokens: Token[]) {
         super()
     }
 
@@ -55,7 +56,10 @@ export class ValueWithParenthesis extends Evaluable {
 export class Formula extends Evaluable {
     static override friendlyName = '계산식'
 
-    constructor(public terms: (Evaluable | Operator)[]) {
+    constructor(
+        public terms: (Evaluable | Operator)[],
+        public override tokens: Token[],
+    ) {
         super()
     }
 
@@ -95,7 +99,7 @@ export class Formula extends Evaluable {
 
             const isOperator = term instanceof Operator
             const isCurrentPrecedence = currentOperators.includes(
-                term.constructor as typeof Operator,
+                term.constructor as OperatorClass,
             )
 
             if (!isOperator || !isCurrentPrecedence) continue
diff --git a/core/node/ffi.ts b/core/node/ffi.ts
index e9abc85..d86bd7d 100644
--- a/core/node/ffi.ts
+++ b/core/node/ffi.ts
@@ -3,11 +3,12 @@ import { Executable, Node } from './base.ts'
 
 import type { Scope } from '../executer/scope.ts'
 import type { Position } from '../type/position.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export class FFIBody extends Node {
     static override friendlyName = '번역할 내용'
 
-    constructor(public code: string, public override position?: Position) {
+    constructor(public code: string, public override tokens: Token[]) {
         super()
     }
 }
@@ -19,12 +20,15 @@ export class DeclareFFI extends Executable {
     public body: string
     public runtime: string
 
-    constructor(props: {
-        name: string
-        body: string
-        runtime: string
-        position?: Position
-    }) {
+    constructor(
+        props: {
+            name: string
+            body: string
+            runtime: string
+            position?: Position
+        },
+        public override tokens: Token[],
+    ) {
         super()
         this.name = props.name
         this.body = props.body
diff --git a/core/node/function.ts b/core/node/function.ts
index cbea0fb..d8fa547 100644
--- a/core/node/function.ts
+++ b/core/node/function.ts
@@ -7,6 +7,7 @@ import type { Block } from './block.ts'
 import { FunctionObject } from '../value/function.ts'
 import { FFIResultTypeIsNotForYaksokError } from '../error/ffi.ts'
 import { ValueType } from '../value/base.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export class DeclareFunction extends Executable {
     static override friendlyName = '새 약속 만들기'
@@ -14,7 +15,10 @@ export class DeclareFunction extends Executable {
     name: string
     body: Block
 
-    constructor(props: { body: Block; name: string }) {
+    constructor(
+        props: { body: Block; name: string },
+        public override tokens: Token[],
+    ) {
         super()
 
         this.name = props.name
@@ -35,7 +39,10 @@ export class FunctionInvoke extends Evaluable {
     public name: string
     public params: Record<string, Evaluable>
 
-    constructor(props: { name: string; params: Record<string, Evaluable> }) {
+    constructor(
+        props: { name: string; params: Record<string, Evaluable> },
+        public override tokens: Token[],
+    ) {
         super()
 
         this.name = props.name!
@@ -85,6 +92,6 @@ function assertValidReturnValue(node: FunctionInvoke, returnValue: ValueType) {
     throw new FFIResultTypeIsNotForYaksokError({
         ffiName: node.name,
         value: returnValue,
-        position: node.position,
+        position: node.tokens?.[0].position,
     })
 }
diff --git a/core/node/list.ts b/core/node/list.ts
index 2ca1dc7..a6bafde 100644
--- a/core/node/list.ts
+++ b/core/node/list.ts
@@ -1,22 +1,19 @@
 import { TargetIsNotIndexedValueError } from '../error/indexed.ts'
-import {
-    ListIndexTypeError,
-    RangeEndMustBeNumberError,
-    RangeStartMustBeLessThanEndError,
-    RangeStartMustBeNumberError,
-} from '../error/indexed.ts'
+import { ListIndexTypeError } from '../error/indexed.ts'
 import { CallFrame } from '../executer/callFrame.ts'
 import { Scope } from '../executer/scope.ts'
 import { ValueType } from '../value/base.ts'
 import { IndexedValue } from '../value/indexed.ts'
 import { ListValue } from '../value/list.ts'
 import { NumberValue, StringValue } from '../value/primitive.ts'
-import { Evaluable, Executable, Node, Operator } from './base.ts'
+import { Evaluable, Executable, Node } from './base.ts'
+
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export class Sequence extends Node {
     static override friendlyName = '나열된 값'
 
-    constructor(public items: Evaluable[]) {
+    constructor(public items: Evaluable[], public override tokens: Token[]) {
         super()
     }
 }
@@ -24,7 +21,7 @@ export class Sequence extends Node {
 export class ListLiteral extends Evaluable {
     static override friendlyName = '목록'
 
-    constructor(public items: Evaluable[]) {
+    constructor(public items: Evaluable[], public override tokens: Token[]) {
         super()
     }
 
@@ -47,6 +44,7 @@ export class IndexFetch extends Evaluable {
     constructor(
         public list: Evaluable<IndexedValue>,
         public index: Evaluable<StringValue | NumberValue | ListValue>,
+        public override tokens: Token[],
     ) {
         super()
     }
@@ -60,7 +58,7 @@ export class IndexFetch extends Evaluable {
 
         if (!(list instanceof IndexedValue)) {
             throw new TargetIsNotIndexedValueError({
-                position: this.position,
+                position: this.tokens[0].position,
                 resource: {
                     target: list,
                 },
@@ -86,7 +84,7 @@ export class IndexFetch extends Evaluable {
 
         if (!(list instanceof IndexedValue)) {
             throw new TargetIsNotIndexedValueError({
-                position: this.position,
+                position: this.tokens[0].position,
                 resource: {
                     target: list,
                 },
@@ -98,7 +96,7 @@ export class IndexFetch extends Evaluable {
             !(index instanceof StringValue)
         ) {
             throw new ListIndexTypeError({
-                position: this.position,
+                position: this.tokens[0].position,
                 resource: {
                     index: index.toPrint(),
                 },
@@ -112,7 +110,11 @@ export class IndexFetch extends Evaluable {
 export class SetToIndex extends Executable {
     static override friendlyName = '목록에 값 넣기'
 
-    constructor(private target: IndexFetch, private value: Evaluable) {
+    constructor(
+        private target: IndexFetch,
+        private value: Evaluable,
+        public override tokens: Token[],
+    ) {
         super()
 
         this.position = target.position
@@ -123,68 +125,3 @@ export class SetToIndex extends Executable {
         await this.target.setValue(scope, callFrame, value)
     }
 }
-
-export class RangeOperator extends Operator {
-    static override friendlyName = '범위에서 목록 만들기(~)'
-
-    override toPrint(): string {
-        return '~'
-    }
-
-    override call(...operands: ValueType[]): ListValue {
-        this.assertProperOperands(operands)
-
-        const [start, end] = operands
-        const items = new Array(end.value - start.value + 1)
-            .fill(null)
-            .map((_, index) => new NumberValue(start.value + index))
-
-        return new ListValue(items)
-    }
-
-    private assertProperOperands(
-        operands: ValueType[],
-    ): asserts operands is [NumberValue, NumberValue] {
-        const [start, end] = operands
-        this.assertProperStartType(start)
-        this.assertProperEndType(end)
-
-        this.assertRangeStartLessThanEnd(start.value, end.value)
-    }
-
-    private assertProperStartType(
-        start: ValueType,
-    ): asserts start is NumberValue {
-        if (start instanceof NumberValue) return
-
-        throw new RangeStartMustBeNumberError({
-            position: this.position,
-            resource: {
-                start,
-            },
-        })
-    }
-
-    private assertProperEndType(end: ValueType): asserts end is NumberValue {
-        if (end instanceof NumberValue) return
-
-        throw new RangeEndMustBeNumberError({
-            position: this.position,
-            resource: {
-                end,
-            },
-        })
-    }
-
-    private assertRangeStartLessThanEnd(start: number, end: number) {
-        if (start <= end) return
-
-        throw new RangeStartMustBeLessThanEndError({
-            position: this.position,
-            resource: {
-                start,
-                end,
-            },
-        })
-    }
-}
diff --git a/core/node/listLoop.ts b/core/node/listLoop.ts
index 7e97d4b..80e9904 100644
--- a/core/node/listLoop.ts
+++ b/core/node/listLoop.ts
@@ -7,6 +7,7 @@ import { Scope } from '../executer/scope.ts'
 
 import type { ValueType } from '../value/base.ts'
 import type { Block } from './block.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export class ListLoop extends Executable {
     static override friendlyName = '목록 반복'
@@ -15,6 +16,7 @@ export class ListLoop extends Executable {
         public list: Evaluable,
         public variableName: string,
         public body: Block,
+        public override tokens: Token[],
     ) {
         super()
     }
@@ -49,7 +51,7 @@ export class ListLoop extends Executable {
             resource: {
                 value: target,
             },
-            position: this.position,
+            position: this.tokens[0].position,
         })
     }
 }
diff --git a/core/node/loop.ts b/core/node/loop.ts
index ac849fd..da432ac 100644
--- a/core/node/loop.ts
+++ b/core/node/loop.ts
@@ -1,13 +1,15 @@
 import { CallFrame } from '../executer/callFrame.ts'
-import type { Scope } from '../executer/scope.ts'
-import type { Block } from './block.ts'
 import { BreakSignal } from '../executer/signals.ts'
 import { Executable } from './base.ts'
 
+import type { Token } from '../prepare/tokenize/token.ts'
+import type { Scope } from '../executer/scope.ts'
+import type { Block } from './block.ts'
+
 export class Loop extends Executable {
     static override friendlyName = '반복'
 
-    constructor(public body: Block) {
+    constructor(public body: Block, public override tokens: Token[]) {
         super()
     }
 
@@ -29,7 +31,11 @@ export class Loop extends Executable {
 export class Break extends Executable {
     static override friendlyName = '그만'
 
+    constructor(public override tokens: Token[]) {
+        super()
+    }
+
     override execute(_scope: Scope, _callFrame: CallFrame): Promise<never> {
-        throw new BreakSignal(this.position)
+        throw new BreakSignal(this.tokens[0].position)
     }
 }
diff --git a/core/node/mention.ts b/core/node/mention.ts
index 9f442b1..6dcf173 100644
--- a/core/node/mention.ts
+++ b/core/node/mention.ts
@@ -1,17 +1,18 @@
 import { Evaluable, Executable, Identifier } from './base.ts'
-import type { CallFrame } from '../executer/callFrame.ts'
-import type { Scope } from '../executer/scope.ts'
 import { ErrorInModuleError } from '../error/index.ts'
-import type { Position } from '../type/position.ts'
 import { YaksokError } from '../error/common.ts'
 import { FunctionInvoke } from './function.ts'
 import { evaluateParams } from './function.ts'
 import { ValueType } from '../value/base.ts'
 
+import type { Token } from '../prepare/tokenize/token.ts'
+import type { CallFrame } from '../executer/callFrame.ts'
+import type { Scope } from '../executer/scope.ts'
+
 export class Mention extends Executable {
     static override friendlyName = '불러올 파일 이름'
 
-    constructor(public value: string, public override position?: Position) {
+    constructor(public value: string, public override tokens: Token[]) {
         super()
     }
 
@@ -26,6 +27,7 @@ export class MentionScope extends Evaluable {
     constructor(
         public fileName: string,
         public child: FunctionInvoke | Identifier,
+        public override tokens: Token[],
     ) {
         super()
     }
@@ -34,8 +36,6 @@ export class MentionScope extends Evaluable {
         scope: Scope,
         callFrame: CallFrame,
     ): Promise<ValueType> {
-        this.setChildPosition()
-
         try {
             const moduleCodeFile = scope.codeFile!.runtime!.getCodeFile(
                 this.fileName,
@@ -65,7 +65,7 @@ export class MentionScope extends Evaluable {
                     resource: {
                         fileName: this.fileName,
                     },
-                    position: this.position,
+                    position: this.tokens[0].position,
                     child: error,
                 })
             }
@@ -77,13 +77,4 @@ export class MentionScope extends Evaluable {
     override toPrint(): string {
         return '@' + this.fileName + ' ' + this.child.toPrint()
     }
-
-    private setChildPosition() {
-        if (!this.position) return
-
-        this.child.position = {
-            line: this.position.line,
-            column: this.position.column + 1 + this.fileName.length,
-        }
-    }
 }
diff --git a/core/node/misc.ts b/core/node/misc.ts
index 2acc49a..2cd5fac 100644
--- a/core/node/misc.ts
+++ b/core/node/misc.ts
@@ -1,13 +1,13 @@
+import { Node, Executable, type Evaluable } from './base.ts'
+
 import type { CallFrame } from '../executer/callFrame.ts'
 import type { Scope } from '../executer/scope.ts'
-import { Position } from '../type/position.ts'
-
-import { Node, Executable, type Evaluable } from './base.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export class EOL extends Node {
     static override friendlyName = '줄바꿈'
 
-    constructor(public override position?: Position) {
+    constructor(public override tokens: Token[]) {
         super()
     }
 }
@@ -15,7 +15,7 @@ export class EOL extends Node {
 export class Indent extends Node {
     static override friendlyName = '들여쓰기'
 
-    constructor(public size: number, public override position?: Position) {
+    constructor(public size: number, public override tokens: Token[]) {
         super()
     }
 }
@@ -23,7 +23,7 @@ export class Indent extends Node {
 export class Print extends Executable {
     static override friendlyName = '보여주기'
 
-    constructor(public value: Evaluable, public override position?: Position) {
+    constructor(public value: Evaluable, public override tokens: Token[]) {
         super()
     }
 
diff --git a/core/node/operator.ts b/core/node/operator.ts
index 539b53b..bc29f47 100644
--- a/core/node/operator.ts
+++ b/core/node/operator.ts
@@ -1,12 +1,24 @@
 import { InvalidTypeForCompareError } from '../error/calculation.ts'
-import { InvalidTypeForOperatorError } from '../error/index.ts'
+import {
+    InvalidTypeForOperatorError,
+    RangeEndMustBeNumberError,
+    RangeStartMustBeLessThanEndError,
+    RangeStartMustBeNumberError,
+} from '../error/index.ts'
+import { Token } from '../prepare/tokenize/token.ts'
+
 import { PrimitiveValue, ValueType } from '../value/base.ts'
+import { ListValue } from '../value/list.ts'
 import { BooleanValue, NumberValue, StringValue } from '../value/primitive.ts'
 import { Operator } from './base.ts'
 
 export class PlusOperator extends Operator {
     static override friendlyName = '더하기(+)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '+'
     }
@@ -31,7 +43,7 @@ export class PlusOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -43,6 +55,10 @@ export class PlusOperator extends Operator {
 export class MinusOperator extends Operator {
     static override friendlyName = '빼기(-)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '-'
     }
@@ -54,7 +70,7 @@ export class MinusOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -66,6 +82,10 @@ export class MinusOperator extends Operator {
 export class MultiplyOperator extends Operator {
     static override friendlyName = '곱하기(*)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '*'
     }
@@ -85,7 +105,7 @@ export class MultiplyOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -97,6 +117,10 @@ export class MultiplyOperator extends Operator {
 export class DivideOperator extends Operator {
     static override friendlyName = '나누기(/)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '/'
     }
@@ -109,7 +133,7 @@ export class DivideOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -121,6 +145,10 @@ export class DivideOperator extends Operator {
 export class ModularOperator extends Operator {
     static override friendlyName = '나머지(%)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '%'
     }
@@ -133,7 +161,7 @@ export class ModularOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -144,6 +172,10 @@ export class ModularOperator extends Operator {
 export class PowerOperator extends Operator {
     static override friendlyName = '제곱(**)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '**'
     }
@@ -156,7 +188,7 @@ export class PowerOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -167,6 +199,10 @@ export class PowerOperator extends Operator {
 export class IntegerDivideOperator extends Operator {
     static override friendlyName = '정수 나누기(//)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '//'
     }
@@ -179,7 +215,7 @@ export class IntegerDivideOperator extends Operator {
         }
 
         throw new InvalidTypeForOperatorError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 operator: this,
                 operands,
@@ -191,6 +227,10 @@ export class IntegerDivideOperator extends Operator {
 export class EqualOperator extends Operator {
     static override friendlyName = '같다(=)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '='
     }
@@ -208,7 +248,7 @@ export class EqualOperator extends Operator {
                     left,
                     right,
                 },
-                position: this.position,
+                position: this.tokens?.[0].position,
             })
         }
 
@@ -219,6 +259,10 @@ export class EqualOperator extends Operator {
 export class AndOperator extends Operator {
     static override friendlyName = '이고(그리고)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '이고(그리고)'
     }
@@ -231,7 +275,7 @@ export class AndOperator extends Operator {
             !(right instanceof BooleanValue)
         ) {
             throw new InvalidTypeForOperatorError({
-                position: this.position,
+                position: this.tokens?.[0].position,
                 resource: {
                     operator: this,
                     operands,
@@ -246,6 +290,10 @@ export class AndOperator extends Operator {
 export class OrOperator extends Operator {
     static override friendlyName = '이거나(거나)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '이거나(거나)'
     }
@@ -258,7 +306,7 @@ export class OrOperator extends Operator {
             !(right instanceof BooleanValue)
         ) {
             throw new InvalidTypeForOperatorError({
-                position: this.position,
+                position: this.tokens?.[0].position,
                 resource: {
                     operator: this,
                     operands,
@@ -273,6 +321,10 @@ export class OrOperator extends Operator {
 export class GreaterThanOperator extends Operator {
     static override friendlyName = '크다(>)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '>'
     }
@@ -285,7 +337,7 @@ export class GreaterThanOperator extends Operator {
         }
 
         throw new InvalidTypeForCompareError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 left,
                 right,
@@ -297,6 +349,10 @@ export class GreaterThanOperator extends Operator {
 export class LessThanOperator extends Operator {
     static override friendlyName = '작다(<)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '<'
     }
@@ -309,7 +365,7 @@ export class LessThanOperator extends Operator {
         }
 
         throw new InvalidTypeForCompareError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 left,
                 right,
@@ -321,6 +377,10 @@ export class LessThanOperator extends Operator {
 export class GreaterThanOrEqualOperator extends Operator {
     static override friendlyName = '크거나 같다(>=)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '>='
     }
@@ -333,7 +393,7 @@ export class GreaterThanOrEqualOperator extends Operator {
         }
 
         throw new InvalidTypeForCompareError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 left,
                 right,
@@ -345,6 +405,10 @@ export class GreaterThanOrEqualOperator extends Operator {
 export class LessThanOrEqualOperator extends Operator {
     static override friendlyName = '작거나 같다(<=)'
 
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
     override toPrint(): string {
         return '<='
     }
@@ -357,7 +421,7 @@ export class LessThanOrEqualOperator extends Operator {
         }
 
         throw new InvalidTypeForCompareError({
-            position: this.position,
+            position: this.tokens?.[0].position,
             resource: {
                 left,
                 right,
@@ -365,3 +429,72 @@ export class LessThanOrEqualOperator extends Operator {
         })
     }
 }
+
+export class RangeOperator extends Operator {
+    static override friendlyName = '범위에서 목록 만들기(~)'
+
+    constructor(public override tokens: Token[]) {
+        super(null, tokens)
+    }
+
+    override toPrint(): string {
+        return '~'
+    }
+
+    override call(...operands: ValueType[]): ListValue {
+        this.assertProperOperands(operands)
+
+        const [start, end] = operands
+        const items = new Array(end.value - start.value + 1)
+            .fill(null)
+            .map((_, index) => new NumberValue(start.value + index))
+
+        return new ListValue(items)
+    }
+
+    private assertProperOperands(
+        operands: ValueType[],
+    ): asserts operands is [NumberValue, NumberValue] {
+        const [start, end] = operands
+        this.assertProperStartType(start)
+        this.assertProperEndType(end)
+
+        this.assertRangeStartLessThanEnd(start.value, end.value)
+    }
+
+    private assertProperStartType(
+        start: ValueType,
+    ): asserts start is NumberValue {
+        if (start instanceof NumberValue) return
+
+        throw new RangeStartMustBeNumberError({
+            position: this.tokens[0].position,
+            resource: {
+                start,
+            },
+        })
+    }
+
+    private assertProperEndType(end: ValueType): asserts end is NumberValue {
+        if (end instanceof NumberValue) return
+
+        throw new RangeEndMustBeNumberError({
+            position: this.tokens[0].position,
+            resource: {
+                end,
+            },
+        })
+    }
+
+    private assertRangeStartLessThanEnd(start: number, end: number) {
+        if (start <= end) return
+
+        throw new RangeStartMustBeLessThanEndError({
+            position: this.tokens[0].position,
+            resource: {
+                start,
+                end,
+            },
+        })
+    }
+}
diff --git a/core/node/primitive-literal.ts b/core/node/primitive-literal.ts
index 9ff8671..50a3927 100644
--- a/core/node/primitive-literal.ts
+++ b/core/node/primitive-literal.ts
@@ -1,14 +1,14 @@
 import { BooleanValue, NumberValue, StringValue } from '../value/primitive.ts'
 import { Evaluable } from './base.ts'
 
+import type { Token } from '../prepare/tokenize/token.ts'
 import type { CallFrame } from '../executer/callFrame.ts'
-import type { Position } from '../type/position.ts'
 import type { Scope } from '../executer/scope.ts'
 
 export class NumberLiteral extends Evaluable {
     static override friendlyName = '숫자'
 
-    constructor(private content: number, public override position?: Position) {
+    constructor(private content: number, public override tokens: Token[]) {
         super()
     }
 
@@ -27,7 +27,7 @@ export class NumberLiteral extends Evaluable {
 export class StringLiteral extends Evaluable {
     static override friendlyName = '문자'
 
-    constructor(private content: string, public override position?: Position) {
+    constructor(private content: string, public override tokens: Token[]) {
         super()
     }
 
@@ -46,7 +46,7 @@ export class StringLiteral extends Evaluable {
 export class BooleanLiteral extends Evaluable {
     static override friendlyName = '참거짓'
 
-    constructor(private content: boolean, public override position?: Position) {
+    constructor(private content: boolean, public override tokens: Token[]) {
         super()
     }
 
diff --git a/core/node/return.ts b/core/node/return.ts
index 2856147..304d524 100644
--- a/core/node/return.ts
+++ b/core/node/return.ts
@@ -1,11 +1,17 @@
-import type { Scope } from '../executer/scope.ts'
 import { ReturnSignal } from '../executer/signals.ts'
 import { Executable } from './base.ts'
 
+import type { Token } from '../prepare/tokenize/token.ts'
+import type { Scope } from '../executer/scope.ts'
+
 export class Return extends Executable {
     static override friendlyName = '결과'
 
+    constructor(public override tokens: Token[]) {
+        super()
+    }
+
     override execute(_scope: Scope): Promise<never> {
-        throw new ReturnSignal(this.position)
+        throw new ReturnSignal(this.tokens[0].position)
     }
 }
diff --git a/core/node/variable.ts b/core/node/variable.ts
index 2592edc..b3dd927 100644
--- a/core/node/variable.ts
+++ b/core/node/variable.ts
@@ -4,6 +4,7 @@ import { Evaluable } from './base.ts'
 
 import type { ValueType } from '../value/base.ts'
 import type { Scope } from '../executer/scope.ts'
+import type { Token } from '../prepare/tokenize/token.ts'
 
 export const RESERVED_WORDS = [
     '약속',
@@ -24,7 +25,11 @@ export const RESERVED_WORDS = [
 export class SetVariable extends Evaluable {
     static override friendlyName = '변수 정하기'
 
-    constructor(public name: string, public value: Evaluable) {
+    constructor(
+        public name: string,
+        public value: Evaluable,
+        public override tokens: Token[],
+    ) {
         super()
         this.assertValidName()
     }
@@ -46,7 +51,7 @@ export class SetVariable extends Evaluable {
         if (!RESERVED_WORDS.includes(this.name)) return
 
         throw new CannotUseReservedWordForIdentifierNameError({
-            position: this.position,
+            position: this.tokens[0].position,
             resource: {
                 name: this.name,
             },
diff --git a/core/prepare/lex/convert-tokens-to-nodes.ts b/core/prepare/lex/convert-tokens-to-nodes.ts
index 656bda2..9e710d1 100644
--- a/core/prepare/lex/convert-tokens-to-nodes.ts
+++ b/core/prepare/lex/convert-tokens-to-nodes.ts
@@ -13,32 +13,32 @@ export function convertTokensToNodes(tokens: Token[]): Node[] {
 function mapTokenToNode(token: Token) {
     switch (token.type) {
         case TOKEN_TYPE.NUMBER:
-            return new NumberLiteral(parseFloat(token.value), token.position)
+            return new NumberLiteral(parseFloat(token.value), [token])
         case TOKEN_TYPE.STRING:
-            return new StringLiteral(token.value.slice(1, -1), token.position)
+            return new StringLiteral(token.value.slice(1, -1), [token])
         case TOKEN_TYPE.OPERATOR:
-            return new Operator(token.value, token.position)
+            return new Operator(token.value, [token])
         case TOKEN_TYPE.SPACE:
             return null
         case TOKEN_TYPE.INDENT:
-            return new Indent(token.value.length, token.position)
+            return new Indent(token.value.length, [token])
         case TOKEN_TYPE.IDENTIFIER:
-            return new Identifier(token.value, token.position)
+            return new Identifier(token.value, [token])
         case TOKEN_TYPE.COMMA:
         case TOKEN_TYPE.OPENING_PARENTHESIS:
         case TOKEN_TYPE.CLOSING_PARENTHESIS:
         case TOKEN_TYPE.OPENING_BRACKET:
         case TOKEN_TYPE.CLOSING_BRACKET:
         case TOKEN_TYPE.COLON:
-            return new Expression(token.value, token.position)
+            return new Expression(token.value, [token])
         case TOKEN_TYPE.FFI_BODY:
-            return new FFIBody(token.value.slice(3, -3), token.position)
+            return new FFIBody(token.value.slice(3, -3), [token])
         case TOKEN_TYPE.NEW_LINE:
-            return new EOL(token.position)
+            return new EOL([token])
         case TOKEN_TYPE.LINE_COMMENT:
             return null
         case TOKEN_TYPE.MENTION:
-            return new Mention(token.value.slice(1), token.position)
+            return new Mention(token.value.slice(1), [token])
         case TOKEN_TYPE.UNKNOWN:
             throw new UnexpectedCharError({
                 resource: {
diff --git a/core/prepare/parse/dynamicRule/functions/invoke-rule.ts b/core/prepare/parse/dynamicRule/functions/invoke-rule.ts
index dbb02ec..508a854 100644
--- a/core/prepare/parse/dynamicRule/functions/invoke-rule.ts
+++ b/core/prepare/parse/dynamicRule/functions/invoke-rule.ts
@@ -85,16 +85,19 @@ function createRuleFromFunctionTemplate(
 
     return {
         pattern,
-        factory(matchedNodes) {
+        factory(matchedNodes, tokens) {
             const params = parseParameterFromTemplate(
                 functionTemplate,
                 matchedNodes,
             )
 
-            return new FunctionInvoke({
-                name: functionTemplate.name,
-                params,
-            })
+            return new FunctionInvoke(
+                {
+                    name: functionTemplate.name,
+                    params,
+                },
+                tokens,
+            )
         },
         config: {
             exported: true,
diff --git a/core/prepare/parse/dynamicRule/mention/create-mentioning-rules.ts b/core/prepare/parse/dynamicRule/mention/create-mentioning-rules.ts
index 688e249..02367ee 100644
--- a/core/prepare/parse/dynamicRule/mention/create-mentioning-rules.ts
+++ b/core/prepare/parse/dynamicRule/mention/create-mentioning-rules.ts
@@ -2,6 +2,8 @@ import { Mention, MentionScope } from '../../../../node/mention.ts'
 import { FunctionInvoke } from '../../../../node/function.ts'
 import { Identifier, Node } from '../../../../node/base.ts'
 import { Rule } from '../../rule.ts'
+import { Token } from '../../../tokenize/token.ts'
+import { getTokensFromNodes } from '../../../../util/merge-tokens.ts'
 
 export function createMentioningRule(
     fileName: string,
@@ -23,12 +25,15 @@ export function createMentioningRule(
 }
 
 function createFactory(fileName: string, rule: Rule) {
-    return (nodes: Node[]) => {
-        const child = rule.factory(nodes.slice(1)) as
+    return (nodes: Node[], tokens: Token[]) => {
+        const childNodes = nodes.slice(1)
+        const childTokens = getTokensFromNodes(childNodes)
+
+        const child = rule.factory(nodes.slice(1), childTokens) as
             | Identifier
             | FunctionInvoke
         child.position = nodes[1].position
 
-        return new MentionScope(fileName, child)
+        return new MentionScope(fileName, child, tokens)
     }
 }
diff --git a/core/prepare/parse/index.ts b/core/prepare/parse/index.ts
index 0e541e3..1a0e1c6 100644
--- a/core/prepare/parse/index.ts
+++ b/core/prepare/parse/index.ts
@@ -8,6 +8,7 @@ import { Block } from '../../node/block.ts'
 
 import type { CodeFile } from '../../type/code-file.ts'
 import type { Rule } from './rule.ts'
+import { getTokensFromNodes } from '../../util/merge-tokens.ts'
 
 interface ParseResult {
     ast: Block
@@ -18,7 +19,10 @@ export function parse(codeFile: CodeFile): ParseResult {
     const dynamicRules = createDynamicRule(codeFile)
     const indentedNodes = parseIndent(convertTokensToNodes(codeFile.tokens))
 
-    const ast = new Block(callParseRecursively(indentedNodes, dynamicRules))
+    const childNodes = callParseRecursively(indentedNodes, dynamicRules)
+    const childTokens = getTokensFromNodes(childNodes)
+
+    const ast = new Block(childNodes, childTokens)
 
     const exportedVariables = getExportedVariablesRules(ast)
     const exportedRules = [...dynamicRules.flat(), ...exportedVariables]
@@ -40,7 +44,8 @@ function getExportedVariablesRules(ast: Block): Rule[] {
                         value: variableName,
                     },
                 ],
-                factory: () => new Identifier(variableName),
+                factory: (_nodes, tokens) =>
+                    new Identifier(variableName, tokens),
                 config: {
                     exported: true,
                 },
diff --git a/core/prepare/parse/parse-indent.ts b/core/prepare/parse/parse-indent.ts
index 6dccbbf..e3bbf01 100644
--- a/core/prepare/parse/parse-indent.ts
+++ b/core/prepare/parse/parse-indent.ts
@@ -1,4 +1,5 @@
 import { type Node, Indent, EOL, Block } from '../../node/index.ts'
+import { getTokensFromNodes } from '../../util/merge-tokens.ts'
 
 export function parseIndent(_tokens: Node[], indent = 0) {
     const groups: Node[] = []
@@ -42,7 +43,9 @@ export function parseIndent(_tokens: Node[], indent = 0) {
             }
 
             const child = parseIndent(blockTokens, indent + 1)
-            groups.push(new Block(child))
+            const childTokens = getTokensFromNodes(child)
+
+            groups.push(new Block(child, childTokens))
         } else {
             groups.push(token)
         }
diff --git a/core/prepare/parse/rule.ts b/core/prepare/parse/rule.ts
index 3a4fd49..119ab42 100644
--- a/core/prepare/parse/rule.ts
+++ b/core/prepare/parse/rule.ts
@@ -41,6 +41,8 @@ import { ListLoop } from '../../node/listLoop.ts'
 import { IndexedValue } from '../../value/indexed.ts'
 import { NumberValue, StringValue } from '../../value/primitive.ts'
 
+import type { Token } from '../tokenize/token.ts'
+
 export interface PatternUnit {
     type: {
         new (...args: any[]): Node
@@ -51,7 +53,7 @@ export interface PatternUnit {
 
 export type Rule = {
     pattern: PatternUnit[]
-    factory: (nodes: Node[]) => Node
+    factory: (nodes: Node[], tokens: Token[]) => Node
     config?: Record<string, unknown>
 }
 
@@ -74,11 +76,11 @@ export const BASIC_RULES: Rule[][] = [
                     value: ']',
                 },
             ],
-            factory: (nodes) => {
+            factory: (nodes, tokens) => {
                 const target = nodes[0] as Evaluable<IndexedValue>
                 const index = nodes[2] as Evaluable<StringValue | NumberValue>
 
-                return new IndexFetch(target, index)
+                return new IndexFetch(target, index, tokens)
             },
         },
     ],
@@ -97,8 +99,11 @@ export const BASIC_RULES: Rule[][] = [
                     value: ')',
                 },
             ],
-            factory: (nodes) => {
-                const newNode = new ValueWithParenthesis(nodes[1] as Evaluable)
+            factory: (nodes, tokens) => {
+                const newNode = new ValueWithParenthesis(
+                    nodes[1] as Evaluable,
+                    tokens,
+                )
                 newNode.position = nodes[0].position
 
                 return newNode
@@ -118,9 +123,9 @@ export const BASIC_RULES: Rule[][] = [
                     value: ']',
                 },
             ],
-            factory: (nodes) => {
+            factory: (nodes, tokens) => {
                 const sequence = nodes[1] as Sequence
-                return new ListLiteral(sequence.items)
+                return new ListLiteral(sequence.items, tokens)
             },
         },
         {
@@ -135,16 +140,16 @@ export const BASIC_RULES: Rule[][] = [
                     type: Evaluable,
                 },
             ],
-            factory: (nodes) => {
+            factory: (nodes, tokens) => {
                 const left = nodes[0] as Evaluable
                 const operator = nodes[1] as Operator
                 const right = nodes[2] as Evaluable
 
                 if (left instanceof Formula) {
-                    return new Formula([...left.terms, operator, right])
+                    return new Formula([...left.terms, operator, right], tokens)
                 }
 
-                return new Formula([left, operator, right])
+                return new Formula([left, operator, right], tokens)
             },
         },
         {
@@ -154,7 +159,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '=',
                 },
             ],
-            factory: () => new EqualOperator(),
+            factory: (_nodes, tokens) => new EqualOperator(tokens),
         },
         {
             pattern: [
@@ -163,7 +168,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '>',
                 },
             ],
-            factory: () => new GreaterThanOperator(),
+            factory: (_nodes, tokens) => new GreaterThanOperator(tokens),
         },
         {
             pattern: [
@@ -172,7 +177,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '<',
                 },
             ],
-            factory: () => new LessThanOperator(),
+            factory: (_nodes, tokens) => new LessThanOperator(tokens),
         },
         {
             pattern: [
@@ -181,7 +186,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '>=',
                 },
             ],
-            factory: () => new GreaterThanOrEqualOperator(),
+            factory: (_nodes, tokens) => new GreaterThanOrEqualOperator(tokens),
         },
         {
             pattern: [
@@ -190,7 +195,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '<=',
                 },
             ],
-            factory: () => new LessThanOrEqualOperator(),
+            factory: (_nodes, tokens) => new LessThanOrEqualOperator(tokens),
         },
         {
             pattern: [
@@ -199,7 +204,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '//',
                 },
             ],
-            factory: () => new IntegerDivideOperator(),
+            factory: (_nodes, tokens) => new IntegerDivideOperator(tokens),
         },
         {
             pattern: [
@@ -208,7 +213,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '%',
                 },
             ],
-            factory: () => new ModularOperator(),
+            factory: (_nodes, tokens) => new ModularOperator(tokens),
         },
         {
             pattern: [
@@ -217,7 +222,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '**',
                 },
             ],
-            factory: () => new PowerOperator(),
+            factory: (_nodes, tokens) => new PowerOperator(tokens),
         },
         {
             pattern: [
@@ -226,7 +231,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '/',
                 },
             ],
-            factory: () => new DivideOperator(),
+            factory: (_nodes, tokens) => new DivideOperator(tokens),
         },
         {
             pattern: [
@@ -235,7 +240,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '*',
                 },
             ],
-            factory: () => new MultiplyOperator(),
+            factory: (_nodes, tokens) => new MultiplyOperator(tokens),
         },
         {
             pattern: [
@@ -244,7 +249,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '+',
                 },
             ],
-            factory: () => new PlusOperator(),
+            factory: (_nodes, tokens) => new PlusOperator(tokens),
         },
         {
             pattern: [
@@ -253,7 +258,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '-',
                 },
             ],
-            factory: () => new MinusOperator(),
+            factory: (_nodes, tokens) => new MinusOperator(tokens),
         },
         {
             pattern: [
@@ -262,7 +267,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '이고',
                 },
             ],
-            factory: () => new AndOperator(),
+            factory: (_nodes, tokens) => new AndOperator(tokens),
         },
         {
             pattern: [
@@ -271,7 +276,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '고',
                 },
             ],
-            factory: () => new AndOperator(),
+            factory: (_nodes, tokens) => new AndOperator(tokens),
         },
         {
             pattern: [
@@ -280,7 +285,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '이거나',
                 },
             ],
-            factory: () => new OrOperator(),
+            factory: (_nodes, tokens) => new OrOperator(tokens),
         },
         {
             pattern: [
@@ -289,7 +294,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '거나',
                 },
             ],
-            factory: () => new OrOperator(),
+            factory: (_nodes, tokens) => new OrOperator(tokens),
         },
         {
             pattern: [
@@ -298,7 +303,7 @@ export const BASIC_RULES: Rule[][] = [
                     value: '~',
                 },
             ],
-            factory: () => new RangeOperator(),
+            factory: (_nodes, tokens) => new RangeOperator(tokens),
         },
         {
             pattern: [
@@ -320,7 +325,7 @@ export const BASIC_RULES: Rule[][] = [
                     type: Block,
                 },
             ],
-            factory: (nodes) => {
+            factory: (nodes, tokens) => {
                 const [_, __, functionInvoke, ___, body] = nodes as [
                     unknown,
                     unknown,
@@ -331,10 +336,13 @@ export const BASIC_RULES: Rule[][] = [
 
                 const functionName = functionInvoke.name
 
-                return new DeclareFunction({
-                    body,
-                    name: functionName,
-                })
+                return new DeclareFunction(
+                    {
+                        body,
+                        name: functionName,
+                    },
+                    tokens,
+                )
             },
         },
         {
@@ -360,7 +368,7 @@ export const BASIC_RULES: Rule[][] = [
                     type: FFIBody,
                 },
             ],
-            factory: (nodes) => {
+            factory: (nodes, tokens) => {
                 const [_, runtimeNode, __, functionInvoke, ___, body] =
                     nodes as [
                         unknown,
@@ -374,11 +382,14 @@ export const BASIC_RULES: Rule[][] = [
                 const functionName = functionInvoke.name
                 const runtime = (runtimeNode.value as Identifier).value
 
-                return new DeclareFFI({
-                    body: body.code,
-                    name: functionName,
-                    runtime,
-                })
+                return new DeclareFFI(
+                    {
+                        body: body.code,
+                        name: functionName,
+                        runtime,
+                    },
+                    tokens,
+                )
             },
         },
     ],
@@ -398,11 +409,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Evaluable,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const a = nodes[0] as Evaluable
             const b = nodes[2] as Evaluable
 
-            return new Sequence([a, b])
+            return new Sequence([a, b], tokens)
         },
     },
     {
@@ -418,11 +429,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Evaluable,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const a = nodes[0] as Sequence
             const b = nodes[2] as Evaluable
 
-            return new Sequence([...a.items, b])
+            return new Sequence([...a.items, b], tokens)
         },
     },
     {
@@ -436,7 +447,7 @@ export const ADVANCED_RULES: Rule[] = [
                 value: ']',
             },
         ],
-        factory: () => new ListLiteral([]),
+        factory: (_nodes, tokens) => new ListLiteral([], tokens),
     },
     {
         pattern: [
@@ -451,11 +462,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Evaluable,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const target = nodes[0] as IndexFetch
             const value = nodes[2] as Evaluable
 
-            return new SetToIndex(target, value)
+            return new SetToIndex(target, value, tokens)
         },
     },
     {
@@ -474,11 +485,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: EOL,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const name = (nodes[0] as Identifier).value
             const value = nodes[2] as Evaluable
 
-            return new SetVariable(name, value)
+            return new SetVariable(name, value, tokens)
         },
     },
     {
@@ -490,7 +501,7 @@ export const ADVANCED_RULES: Rule[] = [
                 type: ElseIfStatement,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const [ifStatement, elseIfStatement] = nodes as [
                 IfStatement,
                 ElseIfStatement,
@@ -499,6 +510,8 @@ export const ADVANCED_RULES: Rule[] = [
             const elseIfCase = elseIfStatement.elseIfCase
             ifStatement.cases.push(elseIfCase)
 
+            ifStatement.tokens = tokens
+
             return ifStatement
         },
     },
@@ -511,7 +524,7 @@ export const ADVANCED_RULES: Rule[] = [
                 type: ElseStatement,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const [ifStatement, elseStatement] = nodes as [
                 IfStatement,
                 ElseStatement,
@@ -520,7 +533,9 @@ export const ADVANCED_RULES: Rule[] = [
             const elseCase = {
                 body: elseStatement.body,
             }
+
             ifStatement.cases.push(elseCase)
+            ifStatement.tokens = tokens
 
             return ifStatement
         },
@@ -549,11 +564,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Block,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const condition = nodes[2] as Evaluable
             const body = nodes[5] as Block
 
-            return new ElseIfStatement({ condition, body })
+            return new ElseIfStatement({ condition, body }, tokens)
         },
     },
     {
@@ -569,10 +584,10 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Block,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const body = nodes[2] as Block
 
-            return new ElseStatement(body)
+            return new ElseStatement(body, tokens)
         },
     },
     {
@@ -595,11 +610,11 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Block,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const condition = nodes[1] as Evaluable
             const body = nodes[4] as Block
 
-            return new IfStatement([{ condition, body }])
+            return new IfStatement([{ condition, body }], tokens)
         },
     },
     {
@@ -612,9 +627,9 @@ export const ADVANCED_RULES: Rule[] = [
                 value: '보여주기',
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const value = nodes[0] as Evaluable
-            return new Print(value)
+            return new Print(value, tokens)
         },
     },
     {
@@ -630,7 +645,7 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Block,
             },
         ],
-        factory: (nodes) => new Loop(nodes[2] as Block),
+        factory: (nodes, tokens) => new Loop(nodes[2] as Block, tokens),
     },
     {
         pattern: [
@@ -643,7 +658,7 @@ export const ADVANCED_RULES: Rule[] = [
                 value: '그만',
             },
         ],
-        factory: () => new Break(),
+        factory: (_nodes, tokens) => new Break(tokens),
     },
     {
         pattern: [
@@ -656,7 +671,7 @@ export const ADVANCED_RULES: Rule[] = [
                 value: '그만',
             },
         ],
-        factory: () => new Return(),
+        factory: (_nodes, tokens) => new Return(tokens),
     },
     {
         pattern: [
@@ -685,12 +700,12 @@ export const ADVANCED_RULES: Rule[] = [
                 type: Block,
             },
         ],
-        factory: (nodes) => {
+        factory: (nodes, tokens) => {
             const list = nodes[1] as Evaluable
             const name = (nodes[3] as Identifier).value
             const body = nodes[6] as Block
 
-            return new ListLoop(list, name, body)
+            return new ListLoop(list, name, body, tokens)
         },
     },
 ]
diff --git a/core/prepare/parse/srParse.ts b/core/prepare/parse/srParse.ts
index a2d4461..260c80d 100644
--- a/core/prepare/parse/srParse.ts
+++ b/core/prepare/parse/srParse.ts
@@ -2,8 +2,11 @@ import { type Rule, ADVANCED_RULES, BASIC_RULES } from './rule.ts'
 import { satisfiesPattern } from './satisfiesPattern.ts'
 
 import { Block } from '../../node/block.ts'
+import { TOKEN_TYPE } from '../tokenize/token.ts'
 import { EOL } from '../../node/misc.ts'
+
 import type { Node } from '../../node/base.ts'
+import { getTokensFromNodes } from '../../util/merge-tokens.ts'
 
 export function SRParse(_tokens: Node[], rules: Rule[]) {
     const tokens = [..._tokens]
@@ -37,9 +40,11 @@ export function SRParse(_tokens: Node[], rules: Rule[]) {
     }
 }
 
-export function reduce(tokens: Node[], rule: Rule) {
-    const reduced = rule.factory(tokens)
-    reduced.position = tokens[0].position
+export function reduce(nodes: Node[], rule: Rule) {
+    const tokens = getTokensFromNodes(nodes)
+
+    const reduced = rule.factory(nodes, tokens)
+    reduced.position = nodes[0].position
 
     return reduced
 }
@@ -53,11 +58,23 @@ export function callParseRecursively(
     for (let i = 0; i < parsedTokens.length; i++) {
         const token = parsedTokens[i]
 
-        if (!(token instanceof Block)) continue
-
-        token.children = callParseRecursively(token.children, externalPatterns)
+        if (token instanceof Block) {
+            token.children = callParseRecursively(
+                token.children,
+                externalPatterns,
+            )
+        }
     }
-    parsedTokens.push(new EOL())
+
+    parsedTokens.push(
+        new EOL([
+            {
+                position: { column: 0, line: 0 },
+                value: '\n',
+                type: TOKEN_TYPE.NEW_LINE,
+            },
+        ]),
+    )
 
     const patternsByLevel = [...BASIC_RULES, externalPatterns, ADVANCED_RULES]
 
diff --git a/core/util/merge-tokens.ts b/core/util/merge-tokens.ts
new file mode 100644
index 0000000..d4d9bfc
--- /dev/null
+++ b/core/util/merge-tokens.ts
@@ -0,0 +1,5 @@
+import type { Node, Token } from '../mod.ts'
+
+export function getTokensFromNodes(nodes: Node[]): Token[] {
+    return nodes.flatMap((node) => node.tokens || [])
+}
diff --git a/runtest.ts b/runtest.ts
index c35e4b4..a9e16e3 100644
--- a/runtest.ts
+++ b/runtest.ts
@@ -1,36 +1,9 @@
-import { tokenize } from './core/mod.ts'
+import { yaksok } from './core/mod.ts'
 
-const CODE = `약속, 회전설정 (회전)
-    결과: "rotate:" + 회전
-내 이름: "정한";
-약속, 시간설정 (시간)
-    결과: "time:" + 시간
+const CODE = `사과_갯수: 127
+사람_수: 4
 
-약속, (A) 합 (B)
-    결과: A + "<join>" + B
+"사과가 " + 사과_갯수 + "개, 사람이 " + 사람_수 + "명 있습니다" 보여주기
+"한 사람당 " + 사과_갯수 // 사람_수 + "개씩 먹고, " + 사과_갯수 % 사람_수 + "개가 남습니다" 보여주기`
 
-약속, (각도)도 회전하기
-    회전설정 각도 보여주기
-
-약속, (시간)초 동안 (각도)도 회전하기
-    (시간설정 시간) 합 (회전설정 각도) 보여주기
-
-각도: 45
-시간: 30
-
-(3)초 동안 (90)도 회전하기
-3 초 동안 90 도 회전하기
-(3)초 동안 90 도 회전하기
-3 초 동안 (90)도 회전하기
-
-시간 초 동안 각도 도 회전하기
-(시간)초 동안 (각도)도 회전하기
-(시간)초 동안 각도 도 회전하기
-시간 초 동안 (각도)도 회전하기
-
-(90)도 회전하기
-90 도 회전하기
-각도 도 회전하기
-(각도)도 회전하기`
-
-tokenize(CODE)
+yaksok(CODE)

From ed3d120f3a5b0bf9d1ca3a084866752b326a048c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sat, 21 Dec 2024 08:39:31 +0000
Subject: [PATCH 07/20] feat: add colorization support

---
 docs/_/code-runner/ast-to-colorize.ts         |  91 --------
 .../ast-to-colorize/declare-function.ts       |  46 ++++
 .../ast-to-colorize/get-comment-color-part.ts |  16 ++
 docs/_/code-runner/ast-to-colorize/index.ts   | 220 ++++++++++++++++++
 docs/_/code-runner/ast-to-colorize/scope.ts   |  12 +
 docs/_/code-runner/index.vue                  |  10 +-
 docs/_/code-runner/tokenize-provider.ts       |  19 +-
 docs/index.md                                 |   3 +-
 8 files changed, 316 insertions(+), 101 deletions(-)
 delete mode 100644 docs/_/code-runner/ast-to-colorize.ts
 create mode 100644 docs/_/code-runner/ast-to-colorize/declare-function.ts
 create mode 100644 docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts
 create mode 100644 docs/_/code-runner/ast-to-colorize/index.ts
 create mode 100644 docs/_/code-runner/ast-to-colorize/scope.ts

diff --git a/docs/_/code-runner/ast-to-colorize.ts b/docs/_/code-runner/ast-to-colorize.ts
deleted file mode 100644
index f1709e5..0000000
--- a/docs/_/code-runner/ast-to-colorize.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-    Block,
-    DeclareFunction,
-    Identifier,
-    Node,
-    Print,
-    SetVariable,
-} from '@dalbit-yaksok/core'
-import { ColorPart } from './type.ts'
-
-enum SCOPE {
-    KEYWORD = 'keyword',
-    VARIABLE_NAME = 'variable.name',
-    IDENTIFIER = 'comment',
-}
-
-function node(node: Node): ColorPart[] {
-    if (node instanceof Block) {
-        return block(node)
-    }
-
-    if (node instanceof DeclareFunction) {
-        return declareFunction(node)
-    }
-
-    if (node instanceof SetVariable) {
-        return setVariable(node)
-    }
-
-    if (node instanceof Identifier) {
-        return identifier(node)
-    }
-
-    if (node instanceof Print) {
-        return visitPrint(node)
-    }
-
-    console.log('Unknown node:', node)
-
-    return []
-}
-
-function block(ast: Block): ColorPart[] {
-    return ast.children.flatMap(node)
-}
-
-function declareFunction(current: DeclareFunction) {
-    const parts: ColorPart[] = []
-
-    if (current.position) {
-        parts.push({
-            position: current.position,
-            scopes: SCOPE.KEYWORD,
-        })
-    }
-
-    return parts.concat(block(current.body))
-}
-
-function setVariable(current: SetVariable) {
-    const parts: ColorPart[] = []
-
-    if (current.position) {
-        parts.push({
-            position: current.position,
-            scopes: SCOPE.VARIABLE_NAME,
-        })
-    }
-
-    return parts.concat(node(current.value))
-}
-
-function identifier(current: Identifier) {
-    console.log(current)
-    if (current.position) {
-        return [
-            {
-                position: current.position,
-                scopes: SCOPE.IDENTIFIER,
-            },
-        ]
-    }
-
-    return []
-}
-
-function visitPrint(current: Print) {
-    return node(current.value)
-}
-
-export { node as nodeToColorTokens }
diff --git a/docs/_/code-runner/ast-to-colorize/declare-function.ts b/docs/_/code-runner/ast-to-colorize/declare-function.ts
new file mode 100644
index 0000000..bc70b0e
--- /dev/null
+++ b/docs/_/code-runner/ast-to-colorize/declare-function.ts
@@ -0,0 +1,46 @@
+import { Token, TOKEN_TYPE } from '@dalbit-yaksok/core'
+import { SCOPE } from './scope.ts'
+
+export function parseFunctionDeclareHeader(tokens: Token[]) {
+    const newLineIndex = tokens.findIndex(
+        (token) => token.type === TOKEN_TYPE.NEW_LINE,
+    )
+
+    const functionHeader = tokens.slice(2, newLineIndex)
+
+    const colorParts = functionHeader.map((token, index) => {
+        const prevToken = functionHeader[index - 1]
+
+        if (prevToken?.type === TOKEN_TYPE.OPENING_PARENTHESIS) {
+            return {
+                position: token.position,
+                scopes: SCOPE.VARIABLE_NAME,
+            }
+        }
+
+        if (token.type === TOKEN_TYPE.IDENTIFIER) {
+            return {
+                position: token.position,
+                scopes: SCOPE.CALLABLE,
+            }
+        }
+
+        return {
+            position: token.position,
+            scopes: SCOPE.PARENTHESIS,
+        }
+    })
+
+    const fixedPart = [
+        {
+            position: tokens[0].position,
+            scopes: SCOPE.KEYWORD,
+        },
+        {
+            position: tokens[1].position,
+            scopes: SCOPE.PUNCTUATION,
+        },
+    ]
+
+    return fixedPart.concat(colorParts)
+}
diff --git a/docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts b/docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts
new file mode 100644
index 0000000..6682919
--- /dev/null
+++ b/docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts
@@ -0,0 +1,16 @@
+import { TOKEN_TYPE, type Token } from '@dalbit-yaksok/core'
+import { ColorPart } from '../type.ts'
+import { SCOPE } from './scope.ts'
+
+export function getCommentColorParts(tokens: Token[]): ColorPart[] {
+    const commentTokens = tokens.filter(
+        (token) => token.type === TOKEN_TYPE.LINE_COMMENT,
+    )
+
+    const colorParts = commentTokens.map((token) => ({
+        position: token.position,
+        scopes: SCOPE.COMMENT,
+    }))
+
+    return colorParts
+}
diff --git a/docs/_/code-runner/ast-to-colorize/index.ts b/docs/_/code-runner/ast-to-colorize/index.ts
new file mode 100644
index 0000000..82a5dd4
--- /dev/null
+++ b/docs/_/code-runner/ast-to-colorize/index.ts
@@ -0,0 +1,220 @@
+import {
+    Block,
+    DeclareFunction,
+    Formula,
+    FunctionInvoke,
+    Identifier,
+    Node,
+    NumberLiteral,
+    Operator,
+    Print,
+    SetVariable,
+    StringLiteral,
+    TOKEN_TYPE,
+    ValueWithParenthesis,
+} from '@dalbit-yaksok/core'
+import { ColorPart } from '../type.ts'
+import { SCOPE } from './scope.ts'
+import { parseFunctionDeclareHeader } from './declare-function.ts'
+
+function node(node: Node): ColorPart[] {
+    if (node instanceof Block) {
+        return block(node)
+    }
+
+    if (node instanceof DeclareFunction) {
+        return declareFunction(node)
+    }
+
+    if (node instanceof SetVariable) {
+        return setVariable(node)
+    }
+
+    if (node instanceof Identifier) {
+        return identifier(node)
+    }
+
+    if (node instanceof Print) {
+        return visitPrint(node)
+    }
+
+    if (node instanceof Formula) {
+        return formula(node)
+    }
+
+    if (node instanceof Operator) {
+        return operator(node)
+    }
+
+    if (node instanceof ValueWithParenthesis) {
+        return valueWithParenthesis(node)
+    }
+
+    if (node instanceof NumberLiteral) {
+        return numberLiteral(node)
+    }
+
+    if (node instanceof FunctionInvoke) {
+        return functionInvoke(node)
+    }
+
+    if (node instanceof StringLiteral) {
+        return stringLiteral(node)
+    }
+
+    console.log('Unknown node:', node)
+
+    return []
+}
+
+function block(ast: Block): ColorPart[] {
+    return ast.children.flatMap(node)
+}
+
+function declareFunction(current: DeclareFunction) {
+    const headerParts: ColorPart[] = parseFunctionDeclareHeader(current.tokens)
+    return headerParts.concat(block(current.body))
+}
+
+function setVariable(current: SetVariable) {
+    const firstIdentifier = current.tokens.find(
+        (token) => token.type === TOKEN_TYPE.IDENTIFIER,
+    )
+
+    const firstColon = current.tokens.find(
+        (token) => token.type === TOKEN_TYPE.COLON,
+    )
+
+    const variableName: ColorPart[] = [
+        {
+            position: firstIdentifier!.position,
+            scopes: SCOPE.VARIABLE_NAME,
+        },
+        {
+            position: firstColon!.position,
+            scopes: SCOPE.PUNCTUATION,
+        },
+    ]
+
+    return variableName.concat(node(current.value))
+}
+
+function identifier(current: Identifier) {
+    return [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.IDENTIFIER,
+        },
+    ]
+}
+
+function visitPrint(current: Print) {
+    const child = node(current.value)
+
+    return child.concat([
+        {
+            position: current.tokens.slice(-1)[0].position,
+            scopes: SCOPE.KEYWORD,
+        },
+    ])
+}
+
+function formula(current: Formula) {
+    return current.terms.flatMap(node)
+}
+
+function operator(current: Operator) {
+    return [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.OPERATOR,
+        },
+    ]
+}
+
+function valueWithParenthesis(current: ValueWithParenthesis): ColorPart[] {
+    return [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.PARENTHESIS,
+        } as ColorPart,
+    ]
+        .concat(node(current.value))
+        .concat([
+            {
+                position: current.tokens.slice(-1)[0].position,
+                scopes: SCOPE.PARENTHESIS,
+            },
+        ])
+}
+
+function numberLiteral(current: NumberLiteral): ColorPart[] {
+    return [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.NUMBER,
+        },
+    ]
+}
+
+function functionInvoke(current: FunctionInvoke): ColorPart[] {
+    let isInParameter = false
+
+    let colorParts: ColorPart[] = []
+
+    for (let i = 0; i < current.tokens.length; i++) {
+        const token = current.tokens[i]
+
+        if (token.type === TOKEN_TYPE.OPENING_PARENTHESIS) {
+            isInParameter = true
+
+            colorParts.push({
+                position: token.position,
+                scopes: SCOPE.PARENTHESIS,
+            })
+
+            continue
+        }
+
+        if (token.type === TOKEN_TYPE.CLOSING_PARENTHESIS) {
+            isInParameter = false
+
+            colorParts.push({
+                position: token.position,
+                scopes: SCOPE.PARENTHESIS,
+            })
+
+            continue
+        }
+
+        if (isInParameter) {
+            continue
+        }
+
+        colorParts.push({
+            position: token.position,
+            scopes: SCOPE.CALLABLE,
+        })
+    }
+
+    for (const paramName in current.params) {
+        colorParts = colorParts.concat(node(current.params[paramName]))
+    }
+
+    colorParts = colorParts.toSorted(
+        (a, b) => a.position.column - b.position.column,
+    )
+
+    return colorParts
+}
+
+function stringLiteral(current: StringLiteral): ColorPart[] {
+    return [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.STRING,
+        },
+    ]
+}
+
+export { node as nodeToColorTokens }
diff --git a/docs/_/code-runner/ast-to-colorize/scope.ts b/docs/_/code-runner/ast-to-colorize/scope.ts
new file mode 100644
index 0000000..ff58f80
--- /dev/null
+++ b/docs/_/code-runner/ast-to-colorize/scope.ts
@@ -0,0 +1,12 @@
+export enum SCOPE {
+    KEYWORD = 'keyword',
+    VARIABLE_NAME = 'variable.name',
+    IDENTIFIER = 'identifier',
+    PUNCTUATION = 'punctuation',
+    PARENTHESIS = 'delimiter.parenthesis',
+    OPERATOR = 'operators',
+    NUMBER = 'number',
+    CALLABLE = 'tag',
+    STRING = 'string',
+    COMMENT = 'comment',
+}
diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index ec01099..0aaa7d3 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -44,7 +44,7 @@ async function initializeMonaco() {
     languages.onLanguage('yaksok', () => {
         languages.setLanguageConfiguration('yaksok', {
             comments: {
-                lineComment: '//',
+                lineComment: '#',
             },
             brackets: [
                 ['{', '}'],
@@ -77,8 +77,14 @@ async function initializeMonaco() {
         minimap: {
             enabled: false,
         },
-        lineNumbersMinChars: 3,
         language: 'yaksok',
+        theme: 'vs',
+        guides: {
+            highlightActiveIndentation: false,
+            indentation: false,
+        },
+        renderLineHighlight: 'none',
+        lineNumbers: 'off',
     })
 
     editorInstance.onDidChangeModelContent(() => {
diff --git a/docs/_/code-runner/tokenize-provider.ts b/docs/_/code-runner/tokenize-provider.ts
index 593283b..7c9b00c 100644
--- a/docs/_/code-runner/tokenize-provider.ts
+++ b/docs/_/code-runner/tokenize-provider.ts
@@ -1,7 +1,9 @@
 import type { languages } from 'monaco-editor'
 import { parse, CodeFile } from '@dalbit-yaksok/core'
-import { nodeToColorTokens } from './ast-to-colorize.ts'
+
 import { ColorPart } from './type.ts'
+import { nodeToColorTokens } from './ast-to-colorize/index.ts'
+import { getCommentColorParts } from './ast-to-colorize/get-comment-color-part.ts'
 
 export class TokenizeProvider implements languages.TokensProvider {
     private colorPartsByLine: Map<number, ColorPart[]>
@@ -13,8 +15,13 @@ export class TokenizeProvider implements languages.TokensProvider {
     }
 
     createColorParts(code: string) {
-        const ast = parse(new CodeFile(code)).ast
-        const colorParts = nodeToColorTokens(ast)
+        const codeFile = new CodeFile(code)
+        const { ast } = parse(codeFile)
+
+        const nodeColorParts = nodeToColorTokens(ast)
+        const commentColorParts = getCommentColorParts(codeFile.tokens)
+
+        const colorParts = nodeColorParts.concat(commentColorParts)
 
         const colorPartsByLine = new Map<number, ColorPart[]>(
             new Array(this.lines.length).fill(0).map((_, index) => [index, []]),
@@ -23,8 +30,6 @@ export class TokenizeProvider implements languages.TokensProvider {
             colorPartsByLine.get(colorPart.position.line - 1)!.push(colorPart)
         }
 
-        console.log({ colorPartsByLine })
-
         return colorPartsByLine
     }
 
@@ -33,7 +38,7 @@ export class TokenizeProvider implements languages.TokensProvider {
         this.lines = code.split('\n')
 
         console.time('Parse')
-        this.createColorParts(code)
+        this.colorPartsByLine = this.createColorParts(code)
         console.timeEnd('Parse')
     }
 
@@ -54,7 +59,7 @@ export class TokenizeProvider implements languages.TokensProvider {
             .get(lineNumber)!
             .map((part) => ({
                 scopes: part.scopes,
-                startIndex: part.position.column,
+                startIndex: part.position.column - 1,
             }))
 
         return {
diff --git a/docs/index.md b/docs/index.md
index e5518d6..eea4849 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -33,7 +33,8 @@ features:
 const DEFAULT_CODE = `약속, 키가 (키)cm이고 몸무게가 (몸무게)일 때 비만도
     결과: 몸무게 / (키 / 100 * 키 / 100)
 
-비만도: 키가 (170)cm이고 몸무게가 (70)일 때 비만도
+내_이름: ""
+비만도: 키가 (170 + 내_이름)cm이고 몸무게가 (70)일 때 비만도 # 주석입니다
 
 비만도 보여주기
 비만도 보여줄까말까`

From 4387b43258432fefea078210c5034cb7a2d51bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sat, 21 Dec 2024 08:52:58 +0000
Subject: [PATCH 08/20] chore(docs): add CodeRunner to global component

---
 ...234\354\236\221\355\225\230\352\270\260.md" |  3 +--
 ...\354\206\215 (\355\225\250\354\210\230).md" | 16 ++++++----------
 ...227\254\354\243\274\352\270\260 (Print).md" |  3 +--
 ...20\354\231\200 \354\227\260\354\202\260.md" |  9 ++++-----
 "docs/language/4. \353\263\200\354\210\230.md" | 12 ++++--------
 "docs/language/5. \353\254\270\354\236\220.md" | 18 +++++++-----------
 "docs/language/6. \353\252\251\353\241\235.md" | 14 +++++---------
 ...7. \354\241\260\352\261\264\353\254\270.md" | 14 +++++---------
 ...54 \354\227\260\354\202\260\354\236\220.md" | 12 ++++--------
 ...9. \353\260\230\353\263\265\353\254\270.md" | 10 +++-------
 10 files changed, 40 insertions(+), 71 deletions(-)

diff --git "a/docs/language/1. \354\213\234\354\236\221\355\225\230\352\270\260.md" "b/docs/language/1. \354\213\234\354\236\221\355\225\230\352\270\260.md"
index 1c2b110..4a2065b 100644
--- "a/docs/language/1. \354\213\234\354\236\221\355\225\230\352\270\260.md"	
+++ "b/docs/language/1. \354\213\234\354\236\221\355\225\230\352\270\260.md"	
@@ -1,5 +1,4 @@
 <script setup>
-import CodeRunner from "../_/code-runner.vue"
 
 const CODE = `"달빛약속에 오신걸 환영합니다" 보여주기
 "화면 아래에 있는 버튼을 눌러 다음 단원으로 넘어가세요" 보여주기`
@@ -9,4 +8,4 @@ const CODE = `"달빛약속에 오신걸 환영합니다" 보여주기
 
 환영합니다! 간단한 코드를 적어보며 약속 언어를 익혀봅시다.
 
-<CodeRunner :code="CODE" />
+<code-runner :code="CODE" />
diff --git "a/docs/language/10. \354\225\275\354\206\215 (\355\225\250\354\210\230).md" "b/docs/language/10. \354\225\275\354\206\215 (\355\225\250\354\210\230).md"
index 9372e43..e27a072 100644
--- "a/docs/language/10. \354\225\275\354\206\215 (\355\225\250\354\210\230).md"	
+++ "b/docs/language/10. \354\225\275\354\206\215 (\355\225\250\354\210\230).md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 약속 (함수)
 
 ::: tip
@@ -17,7 +13,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 약속을 정의할 때는 `약속` 키워드로 시작하며, 다음과 같은 형식으로 만듭니다:
 
-<CodeRunner :code='`약속, 반지름이 (반지름)인 원의 넓이
+<code-runner :code='`약속, 반지름이 (반지름)인 원의 넓이
     결과: 반지름 * 반지름 * 3.14\n
 반지름이 (5)인 원의 넓이 보여주기`' />
 
@@ -33,7 +29,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 약속은 여러 개의 매개변수를 가질 수 있습니다.
 
-<CodeRunner :code='`약속, (숫자1)와 (숫자2)의 합
+<code-runner :code='`약속, (숫자1)와 (숫자2)의 합
     결과: 숫자1 + 숫자2\n
 합계: (5)와 (3)의 합
 합계 보여주기`' />
@@ -42,19 +38,19 @@ import CodeRunner from "../_/code-runner.vue"
 
 한국어에는 단어 마지막 음절의 받침 유무에 따라 어울리는 조사가 달라집니다. 그렇기에, 약속을 정의할 때 다음과 같은 어색한 표현을 만날 수 있습니다.
 
-<CodeRunner :code='`약속, (이름)를 데려오기
+<code-runner :code='`약속, (이름)를 데려오기
     이름 + "님, 저와 함께 가셔야겠습니다" 보여주기\n
 ("재혁")를 데려오기`' />
 
 한국어에서 '재혁'이라는 단어에 어울리는 목적격 조사는 '을'이지만, 약속이 '를'로 정의되었기 때문에 코드가 어색해 보입니다. 이러한 경우를 피하기 위해 약속을 정의할 때 조사 변형을 반영할 수 있습니다.
 
-<CodeRunner :code='`약속, (이름)을/를 데려오기
+<code-runner :code='`약속, (이름)을/를 데려오기
     이름 + "님, 저와 함께 가셔야겠습니다" 보여주기\n
 ("재혁")을 데려오기`' />
 
 약속을 정의할 때 `/`를 사이에 두고 여러 조사를 작성하면 됩니다. 한글자 조사 뿐만 아니라, 다음과 같은 경우도 가능합니다.
 
-<CodeRunner :code='`약속, (대상)이여/여 지금 내게 나타나거라
+<code-runner :code='`약속, (대상)이여/여 지금 내게 나타나거라
     대상 + " 등장" 보여주기\n
 ("숫가락")이여 지금 내게 나타나거라
 ("포크")여 지금 내게 나타나거라`' />
@@ -69,7 +65,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 직접 정의한 약속을 사용해 **섭씨 25도를 화씨로 변환해보세요.**
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: "77",
     answerCode: `약속, 섭씨 (온도)도를 화씨로 바꾸기
     결과: 온도 * 9/5 + 32\n
diff --git "a/docs/language/2. \353\263\264\354\227\254\354\243\274\352\270\260 (Print).md" "b/docs/language/2. \353\263\264\354\227\254\354\243\274\352\270\260 (Print).md"
index 888704c..09520c5 100644
--- "a/docs/language/2. \353\263\264\354\227\254\354\243\274\352\270\260 (Print).md"	
+++ "b/docs/language/2. \353\263\264\354\227\254\354\243\274\352\270\260 (Print).md"	
@@ -1,5 +1,4 @@
 <script setup>
-import CodeRunner from "../_/code-runner.vue"
 
 const challenge = {
     output: "100",
@@ -19,4 +18,4 @@ const challenge = {
 
 `100`을 보여주는 코드를 작성해보세요.
 
-<CodeRunner :challenge="challenge" />
+<code-runner :challenge="challenge" />
diff --git "a/docs/language/3. \354\210\253\354\236\220\354\231\200 \354\227\260\354\202\260.md" "b/docs/language/3. \354\210\253\354\236\220\354\231\200 \354\227\260\354\202\260.md"
index 8353fbe..8d01056 100644
--- "a/docs/language/3. \354\210\253\354\236\220\354\231\200 \354\227\260\354\202\260.md"	
+++ "b/docs/language/3. \354\210\253\354\236\220\354\231\200 \354\227\260\354\202\260.md"	
@@ -1,5 +1,4 @@
 <script setup>
-import CodeRunner from "../_/code-runner.vue"
 
 const challenge = {
     output: "6",
@@ -16,7 +15,7 @@ const challenge = {
 -   곱셈 (`*`)
 -   나눗셈 (`/`)
 
-<CodeRunner code="1 + 1 보여주기
+<code-runner code="1 + 1 보여주기
 5 - 1 보여주기
 10 * 11 보여주기
 20 / 3 보여주기" />
@@ -27,17 +26,17 @@ const challenge = {
 -   나머지 (`%`)
 -   정수 나누기 (`//`)
 
-<CodeRunner code="2 ** 3 보여주기
+<code-runner code="2 ** 3 보여주기
 10 % 3 보여주기
 10 // 3 보여주기" />
 
 수식과 동일하게 괄호를 사용해 우선순위를 정할 수 있습니다:
 
-<CodeRunner code="1 + 2 * 3 보여주기
+<code-runner code="1 + 2 * 3 보여주기
 (1 + 2) * 3 보여주기" />
 
 ## 직접 해보기
 
 **밑변**의 길이가 **3**이고 **높이**가 **4**인 **삼각형의 넓이**를 구해서 보여주세요.
 
-<CodeRunner :challenge="challenge" />
+<code-runner :challenge="challenge" />
diff --git "a/docs/language/4. \353\263\200\354\210\230.md" "b/docs/language/4. \353\263\200\354\210\230.md"
index 69f1745..59f3ecf 100644
--- "a/docs/language/4. \353\263\200\354\210\230.md"	
+++ "b/docs/language/4. \353\263\200\354\210\230.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 변수
 
 변수는 **값을 저장하는 공간**입니다. 값에 이름을 붙혀 저장하고 나중에 다시 사용할 수 있습니다.
@@ -15,7 +11,7 @@ import CodeRunner from "../_/code-runner.vue"
 -   의미있는 이름으로 값을 표현할 때
 -   계산 결과를 저장할 때
 
-<CodeRunner code="시: 19
+<code-runner code="시: 19
 분: 22
 초: 38
 시 보여주기
@@ -24,14 +20,14 @@ import CodeRunner from "../_/code-runner.vue"
 
 ### 값 변경하기
 
-<CodeRunner code="점수: 85
+<code-runner code="점수: 85
 점수 보여주기
 점수: 점수 + 10
 점수 보여주기" />
 
 ### 계산에서 변수 활용하기
 
-<CodeRunner code="파이: 3.14
+<code-runner code="파이: 3.14
 반지름: 5
 원_넓이: 반지름 * 반지름 * 파이
 원_넓이 보여주기" />
@@ -63,7 +59,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 변수를 사용하여 섭씨온도 **10도**를 화씨온도로 변환해서 보여주세요. 섭씨온도를 화씨온도로 바꾸려면 9를 곱하고 5로 나누고 32를 더하면 됩니다.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: "50",
     answerCode: `섭씨: 10
 화씨: 섭씨 * 9 / 5 + 32
diff --git "a/docs/language/5. \353\254\270\354\236\220.md" "b/docs/language/5. \353\254\270\354\236\220.md"
index ddf2dbf..85326da 100644
--- "a/docs/language/5. \353\254\270\354\236\220.md"	
+++ "b/docs/language/5. \353\254\270\354\236\220.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 문자
 
 ::: tip
@@ -10,32 +6,32 @@ import CodeRunner from "../_/code-runner.vue"
 
 약속에서는 숫자뿐만 아니라 문자도 다룰 수 있습니다. 문자를 표현하려면 따옴표 안에 글을 작성하면 됩니다. 큰 따옴표(`"`)와 작은 따옴표(`'`)를 사용할 수 있습니다.
 
-<CodeRunner code='"안녕, 나는 문자!" 보여주기' />
+<code-runner code='"안녕, 나는 문자!" 보여주기' />
 
 ## 문자 이어붙이기
 
 덧셈 기호(`+`)를 사용해 문자를 이어붙일 수 있습니다.
 
-<CodeRunner code='태블릿_제조사: "애플"
+<code-runner code='태블릿_제조사: "애플"
 태블릿_이름: "아이패드"
 태블릿_종류: "프로"
 태블릿_제조사 + 태블릿_이름 + 태블릿_종류 보여주기' />
 
 문자와 숫자도 함께 이어붙일 수 있습니다.
 
-<CodeRunner code='태블릿_이름: "아이패드"
+<code-runner code='태블릿_이름: "아이패드"
 태블릿_모델: 7
 태블릿_종류: "프로"
 태블릿_이름 + 태블릿_모델 + 태블릿_종류 보여주기' />
 
 변수에 저장하지 않고 문자를 직접 사용할 수도 있습니다.
 
-<CodeRunner code='"애플" + "아이패드" + 7 + "프로" 보여주기' />
+<code-runner code='"애플" + "아이패드" + 7 + "프로" 보여주기' />
 
 ::: tip 단어 사이 띄어쓰기
 문자를 이어붙일 때 단어 사이에 띄어쓰기를 넣으려면 공백 문자(" ")를 포함해야 합니다.
 
-<CodeRunner code='태블릿_이름: "아이패드"
+<code-runner code='태블릿_이름: "아이패드"
 태블릿_종류: "프로"
 태블릿_이름 + " " + 태블릿_종류 보여주기' />
 :::
@@ -44,13 +40,13 @@ import CodeRunner from "../_/code-runner.vue"
 
 곱셈 기호를 사용해 문자를 반복할 수 있습니다.
 
-<CodeRunner code='"안녕 " * 3 보여주기' />
+<code-runner code='"안녕 " * 3 보여주기' />
 
 ## 직접 해보기
 
 영희의 이름과 나이가 변수에 저장되어 있습니다. **"제 이름은 영희이고, 12살입니다."** 를 보여주는 코드를 작성해보세요.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: "제 이름은 영희이고, 12살입니다.",
     answerCode: `이름: "영희"
 나이: 12
diff --git "a/docs/language/6. \353\252\251\353\241\235.md" "b/docs/language/6. \353\252\251\353\241\235.md"
index 5417f49..e53587a 100644
--- "a/docs/language/6. \353\252\251\353\241\235.md"	
+++ "b/docs/language/6. \353\252\251\353\241\235.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 목록
 
 약속에서는 여러 개의 값을 하나로 묶어서 저장할 수 있습니다. 이를 **목록**이라고 부릅니다.
@@ -10,14 +6,14 @@ import CodeRunner from "../_/code-runner.vue"
 
 목록은 대괄호(`[` `]`) 안에 값들을 쉼표(`,`)로 구분하여 만듭니다.
 
-<CodeRunner code='음식: ["피자", "햄버거", "파스타"]
+<code-runner code='음식: ["피자", "햄버거", "파스타"]
 음식 보여주기' />
 
 ## 목록의 값 가져오기
 
 목록의 특정 위치에 있는 값을 가져오려면 대괄호 안에 위치 번호를 적으면 됩니다.
 
-<CodeRunner :code='`음식: ["피자", "햄버거", "파스타"]\n
+<code-runner :code='`음식: ["피자", "햄버거", "파스타"]\n
 "첫 번째 음식은 " + 음식[1] 보여주기
 "두 번째 음식은 " + 음식[2] 보여주기`' />
 
@@ -25,7 +21,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 변수와 동일한 문법을 사용하여 목록의 내용을 바꿉니다.
 
-<CodeRunner :code='`음식: ["피자", "햄버거", "파스타"]\n
+<code-runner :code='`음식: ["피자", "햄버거", "파스타"]\n
 음식[2]: "치킨"
 음식 보여주기`' />
 
@@ -33,7 +29,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 여러 위치의 값을 한번에 가져오려면 대괄호 안에 목록을 넣으면 됩니다. 이 경우 새로운 목록이 만들어집니다.
 
-<CodeRunner :code='`음식: ["피자", "햄버거", "파스타", "치킨", "초밥"]\n
+<code-runner :code='`음식: ["피자", "햄버거", "파스타", "치킨", "초밥"]\n
 선택한_음식: 음식[[1, 3, 5]]
 선택한_음식 보여주기`' />
 
@@ -41,7 +37,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 좋아하는 과일들이 담긴 목록이 있습니다. 두 번째 과일을 "배"로 바꾸고 전체 목록을 출력해보세요.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: `[사과, 배, 딸기]`,
     answerCode: `과일: ["사과", "포도", "딸기"]
 과일[2]: "배"
diff --git "a/docs/language/7. \354\241\260\352\261\264\353\254\270.md" "b/docs/language/7. \354\241\260\352\261\264\353\254\270.md"
index ae163cc..5c8fdc1 100644
--- "a/docs/language/7. \354\241\260\352\261\264\353\254\270.md"	
+++ "b/docs/language/7. \354\241\260\352\261\264\353\254\270.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 조건문
 
 조건문은 **주어진 조건에 따라 다른 동작을 실행**하는 구문입니다. 특정 조건이 참일 때와 거짓일 때 서로 다른 코드를 실행할 수 있습니다.
@@ -48,7 +44,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 ## 조건문 사용하기
 
-<CodeRunner code='점수: 85
+<code-runner code='점수: 85
 만약 점수 > 80 이면
     "합격" 보여주기
     "축하드립니다!" 보여주기' />
@@ -57,7 +53,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 조건문이 거짓일 때 실행할 코드는 `아니면`을 사용해 작성합니다.
 
-<CodeRunner :code='`점수: 75\n
+<code-runner :code='`점수: 75\n
 만약 점수 > 80 이면
     "합격" 보여주기
     "축하드립니다!" 보여주기
@@ -70,7 +66,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 둘 이상의 조건을 가늠할 때는 `만약`, `아니면 만약`, `아니면`을 사용해 다중 조건문을 작성할 수 있습니다.
 
-<CodeRunner :code='`점수: 75
+<code-runner :code='`점수: 75
 그레이드: ""\n
 만약 점수 >= 90 이면
     그레이드: "A"
@@ -86,7 +82,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 조건문 본문 안에서도 조건문을 또 작성할 수 있습니다. 이 경우를 겹친 조건문이라고 합니다.
 
-<CodeRunner :code='`지필시험_점수: 85
+<code-runner :code='`지필시험_점수: 85
 실기시험_점수: 75\n
 만약 지필시험_점수 >= 80 이면
     만약 실기시험_점수 >= 80 이면
@@ -108,7 +104,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 지혜가 해낸 팔굽혀펴기 개수가 변수에 저장되어 있습니다. **"지혜의 팔굽혀펴기 등급은 [등급]입니다."** 를 보여주는 코드를 작성해보세요.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: "지혜의 팔굽혀펴기 등급은 2급입니다.",
     answerCode: `팔굽혀펴기_갯수: 56
 등급: ""\n
diff --git "a/docs/language/8. \353\205\274\353\246\254 \354\227\260\354\202\260\354\236\220.md" "b/docs/language/8. \353\205\274\353\246\254 \354\227\260\354\202\260\354\236\220.md"
index ba3f0c6..fb52ff2 100644
--- "a/docs/language/8. \353\205\274\353\246\254 \354\227\260\354\202\260\354\236\220.md"	
+++ "b/docs/language/8. \353\205\274\353\246\254 \354\227\260\354\202\260\354\236\220.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 논리 연산자
 
 여러 개의 참/거짓을 비교할 때는 논리 연산자를 사용합니다. 이를 사용해 복잡한 조건문을 만들 수 있습니다.
@@ -14,7 +10,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 `이고` 또는 `그리고` 연산자는 **두 조건이 모두 참일 때**만 참이 됩니다.
 
-<CodeRunner :code='`재현_수학점수: 90
+<code-runner :code='`재현_수학점수: 90
 재현_영어점수: 85\n
 재현_통과: 재현_수학점수 > 80 이고 재현_영어점수 > 80\n
 만약 재현_통과 이면
@@ -28,7 +24,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 `이거나` 또는 `거나` 연산자는 두 조건 중 하나라도 참이면 참이 됩니다.
 
-<CodeRunner :code='`지수_수학점수: 75
+<code-runner :code='`지수_수학점수: 75
 지수_영어점수: 95\n
 지수_과락: 지수_수학점수 < 80 이거나 지수_영어점수 < 80\n
 만약 지수_과락 이면
@@ -38,7 +34,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 논리 연산자를 여러 개 사용하여 복잡한 조건을 만들 수 있습니다. 아래 예제에서는 두 가지 통과 기준 중 하나만 충족해도 최종 통과가 됩니다.
 
-<CodeRunner :code='`수학점수: 85
+<code-runner :code='`수학점수: 85
 영어점수: 90
 과학점수: 75\n
 통과기준1: 수학점수 > 80 이고 영어점수 > 80
@@ -63,7 +59,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 합격했다면 "합격", 아니면 "불합격"을 출력하는 코드를 작성해보세요.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
     output: "합격",
     answerCode: `수학: 95
 영어: 88
diff --git "a/docs/language/9. \353\260\230\353\263\265\353\254\270.md" "b/docs/language/9. \353\260\230\353\263\265\353\254\270.md"
index 0235070..5dc68ee 100644
--- "a/docs/language/9. \353\260\230\353\263\265\353\254\270.md"	
+++ "b/docs/language/9. \353\260\230\353\263\265\353\254\270.md"	
@@ -1,7 +1,3 @@
-<script setup>
-import CodeRunner from "../_/code-runner.vue"
-</script>
-
 # 반복문
 
 반복문은 **특정 코드를 여러 번 실행**하는 구문입니다. 동일한 작업을 반복해야 할 때 유용합니다.
@@ -14,7 +10,7 @@ import CodeRunner from "../_/code-runner.vue"
 종료 조건을 설정하지 않으면 무한 반복되어 프로그램이나 컴퓨터에 과부하가 걸립니다. 종료 조건을 설정하는 것을 잊지 마세요.
 :::
 
-<CodeRunner :code='`실행한_횟수: 0\n
+<code-runner :code='`실행한_횟수: 0\n
 반복
     실행한_횟수: 실행한_횟수 + 1
     실행한_횟수 보여주기\n
@@ -25,7 +21,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 리스트의 각 항목에 대해 작업을 수행할 때는 `반복 리스트 의 항목 마다` 구문을 사용합니다. 여기서 `항목`은 리스트의 각 요소가 담길 변수입니다. 원하는 변수명을 사용할 수 있습니다.
 
-<CodeRunner :code='`과일들: ["사과", "바나나", "딸기", "포도"]\n
+<code-runner :code='`과일들: ["사과", "바나나", "딸기", "포도"]\n
 반복 과일들 의 과일 마다
     과일 + "가 있습니다" 보여주기`' />
 
@@ -33,7 +29,7 @@ import CodeRunner from "../_/code-runner.vue"
 
 1부터 10까지의 숫자 중 짝수만 출력하는 코드를 작성해보세요.
 
-<CodeRunner :challenge='{
+<code-runner :challenge='{
 output: "2\n4\n6\n8\n10",
 answerCode: `숫자: 1
 반복

From 44ddc2d53e2cff8e53ea7d2291615c0754a9b470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 10:41:53 +0000
Subject: [PATCH 09/20] feat: ignore unknown tokens during token to node
 conversion

---
 core/prepare/lex/convert-tokens-to-nodes.ts   | 29 ++++++--------
 deno.json                                     |  3 +-
 deno.lock                                     |  6 +++
 docs/_/code-runner/index.vue                  |  4 +-
 docs/_/code-runner/merge-syntax.ts            | 39 -------------------
 .../ast-to-colorize/declare-function.ts       |  0
 .../ast-to-colorize/get-comment-color-part.ts |  0
 .../ast-to-colorize/index.ts                  |  0
 .../ast-to-colorize/scope.ts                  |  0
 monaco-language-provider/deno.json            |  7 ++++
 monaco-language-provider/mod.ts               |  1 +
 .../tokenize-provider.ts                      |  5 ++-
 .../type.ts                                   |  0
 13 files changed, 32 insertions(+), 62 deletions(-)
 delete mode 100644 docs/_/code-runner/merge-syntax.ts
 rename {docs/_/code-runner => monaco-language-provider}/ast-to-colorize/declare-function.ts (100%)
 rename {docs/_/code-runner => monaco-language-provider}/ast-to-colorize/get-comment-color-part.ts (100%)
 rename {docs/_/code-runner => monaco-language-provider}/ast-to-colorize/index.ts (100%)
 rename {docs/_/code-runner => monaco-language-provider}/ast-to-colorize/scope.ts (100%)
 create mode 100644 monaco-language-provider/deno.json
 create mode 100644 monaco-language-provider/mod.ts
 rename {docs/_/code-runner => monaco-language-provider}/tokenize-provider.ts (94%)
 rename {docs/_/code-runner => monaco-language-provider}/type.ts (100%)

diff --git a/core/prepare/lex/convert-tokens-to-nodes.ts b/core/prepare/lex/convert-tokens-to-nodes.ts
index 9e710d1..febca62 100644
--- a/core/prepare/lex/convert-tokens-to-nodes.ts
+++ b/core/prepare/lex/convert-tokens-to-nodes.ts
@@ -12,39 +12,32 @@ export function convertTokensToNodes(tokens: Token[]): Node[] {
 
 function mapTokenToNode(token: Token) {
     switch (token.type) {
+        case TOKEN_TYPE.SPACE:
+        case TOKEN_TYPE.LINE_COMMENT:
+        case TOKEN_TYPE.UNKNOWN:
+            return null
+        case TOKEN_TYPE.COMMA:
+        case TOKEN_TYPE.OPENING_PARENTHESIS:
+        case TOKEN_TYPE.CLOSING_PARENTHESIS:
+        case TOKEN_TYPE.OPENING_BRACKET:
+        case TOKEN_TYPE.CLOSING_BRACKET:
+        case TOKEN_TYPE.COLON:
+            return new Expression(token.value, [token])
         case TOKEN_TYPE.NUMBER:
             return new NumberLiteral(parseFloat(token.value), [token])
         case TOKEN_TYPE.STRING:
             return new StringLiteral(token.value.slice(1, -1), [token])
         case TOKEN_TYPE.OPERATOR:
             return new Operator(token.value, [token])
-        case TOKEN_TYPE.SPACE:
-            return null
         case TOKEN_TYPE.INDENT:
             return new Indent(token.value.length, [token])
         case TOKEN_TYPE.IDENTIFIER:
             return new Identifier(token.value, [token])
-        case TOKEN_TYPE.COMMA:
-        case TOKEN_TYPE.OPENING_PARENTHESIS:
-        case TOKEN_TYPE.CLOSING_PARENTHESIS:
-        case TOKEN_TYPE.OPENING_BRACKET:
-        case TOKEN_TYPE.CLOSING_BRACKET:
-        case TOKEN_TYPE.COLON:
-            return new Expression(token.value, [token])
         case TOKEN_TYPE.FFI_BODY:
             return new FFIBody(token.value.slice(3, -3), [token])
         case TOKEN_TYPE.NEW_LINE:
             return new EOL([token])
-        case TOKEN_TYPE.LINE_COMMENT:
-            return null
         case TOKEN_TYPE.MENTION:
             return new Mention(token.value.slice(1), [token])
-        case TOKEN_TYPE.UNKNOWN:
-            throw new UnexpectedCharError({
-                resource: {
-                    parts: '코드',
-                    char: token.value,
-                },
-            })
     }
 }
diff --git a/deno.json b/deno.json
index 016819f..151ddf1 100644
--- a/deno.json
+++ b/deno.json
@@ -19,7 +19,8 @@
         "quickjs",
         "docs",
         "core",
-        "test"
+        "test",
+        "monaco-language-provider"
     ],
     "version": "0.2.0-alpha.11+20241217.nightly",
     "tasks": {
diff --git a/deno.lock b/deno.lock
index a4351d9..104aed8 100644
--- a/deno.lock
+++ b/deno.lock
@@ -10,6 +10,7 @@
     "npm:ansi-to-html@~0.7.2": "0.7.2",
     "npm:madge@*": "8.0.0",
     "npm:monaco-editor@0.52": "0.52.2",
+    "npm:monaco-editor@~0.52.2": "0.52.2",
     "npm:quickjs-emscripten-core@0.31": "0.31.0",
     "npm:quickjs-emscripten@0.31": "0.31.0",
     "npm:typedoc-plugin-markdown@^4.2.10": "4.3.2_typedoc@0.27.4__typescript@5.6.3",
@@ -2188,6 +2189,11 @@
           "npm:vue@^3.5.12"
         ]
       },
+      "monaco-language-provider": {
+        "dependencies": [
+          "npm:monaco-editor@~0.52.2"
+        ]
+      },
       "quickjs": {
         "dependencies": [
           "npm:quickjs-emscripten-core@0.31",
diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index 0aaa7d3..dcb04c1 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -4,7 +4,7 @@ import AnsiCode from 'ansi-to-html'
 import type { editor, languages } from 'monaco-editor'
 
 import { yaksok, tokenize } from '@dalbit-yaksok/core'
-import { TokenizeProvider } from './tokenize-provider'
+import { MonacoDalbitYaksokProvider } from '@dalbit-yaksok/monaco-language-provider'
 
 const props = defineProps({
     code: {
@@ -39,7 +39,7 @@ async function initializeMonaco() {
 
     languages.register({ id: 'yaksok' })
 
-    const tokenizeProvider = new TokenizeProvider(code.value)
+    const tokenizeProvider = new MonacoDalbitYaksokProvider(code.value)
 
     languages.onLanguage('yaksok', () => {
         languages.setLanguageConfiguration('yaksok', {
diff --git a/docs/_/code-runner/merge-syntax.ts b/docs/_/code-runner/merge-syntax.ts
deleted file mode 100644
index f5ba43f..0000000
--- a/docs/_/code-runner/merge-syntax.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { TOKEN_TYPE } from '@dalbit-yaksok/core'
-import { ColorToken } from './type.ts'
-
-export function mergeSyntax(_tokens: ColorToken[]) {
-    const tokens = _tokens.slice()
-    mergeVariableDeclaration(tokens)
-
-    return tokens
-}
-
-function mergeVariableDeclaration(tokens: ColorToken[]) {
-    const colonPositions: number[] = []
-
-    for (const index in tokens) {
-        const current = tokens[index]
-
-        if (current.type === TOKEN_TYPE.COLON) {
-            colonPositions.push(+index)
-        }
-    }
-
-    for (const colonPosition of colonPositions) {
-        for (
-            let i = colonPosition;
-            tokens[i] &&
-            tokens[i].type !== TOKEN_TYPE.NEW_LINE &&
-            tokens[i].type !== TOKEN_TYPE.INDENT;
-            i--
-        ) {
-            if (tokens[i].type === TOKEN_TYPE.IDENTIFIER) {
-                if (tokens[i].value === '결과') {
-                    tokens[i].scope = 'keyword'
-                } else {
-                    tokens[i].scope = 'variable'
-                }
-            }
-        }
-    }
-}
diff --git a/docs/_/code-runner/ast-to-colorize/declare-function.ts b/monaco-language-provider/ast-to-colorize/declare-function.ts
similarity index 100%
rename from docs/_/code-runner/ast-to-colorize/declare-function.ts
rename to monaco-language-provider/ast-to-colorize/declare-function.ts
diff --git a/docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts b/monaco-language-provider/ast-to-colorize/get-comment-color-part.ts
similarity index 100%
rename from docs/_/code-runner/ast-to-colorize/get-comment-color-part.ts
rename to monaco-language-provider/ast-to-colorize/get-comment-color-part.ts
diff --git a/docs/_/code-runner/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
similarity index 100%
rename from docs/_/code-runner/ast-to-colorize/index.ts
rename to monaco-language-provider/ast-to-colorize/index.ts
diff --git a/docs/_/code-runner/ast-to-colorize/scope.ts b/monaco-language-provider/ast-to-colorize/scope.ts
similarity index 100%
rename from docs/_/code-runner/ast-to-colorize/scope.ts
rename to monaco-language-provider/ast-to-colorize/scope.ts
diff --git a/monaco-language-provider/deno.json b/monaco-language-provider/deno.json
new file mode 100644
index 0000000..967fa25
--- /dev/null
+++ b/monaco-language-provider/deno.json
@@ -0,0 +1,7 @@
+{
+    "imports": {
+        "monaco-editor": "npm:monaco-editor@^0.52.2"
+    },
+    "name": "@dalbit-yaksok/monaco-language-provider",
+    "exports": "./mod.ts"
+}
\ No newline at end of file
diff --git a/monaco-language-provider/mod.ts b/monaco-language-provider/mod.ts
new file mode 100644
index 0000000..a464324
--- /dev/null
+++ b/monaco-language-provider/mod.ts
@@ -0,0 +1 @@
+export { MonacoDalbitYaksokProvider } from './tokenize-provider.ts'
diff --git a/docs/_/code-runner/tokenize-provider.ts b/monaco-language-provider/tokenize-provider.ts
similarity index 94%
rename from docs/_/code-runner/tokenize-provider.ts
rename to monaco-language-provider/tokenize-provider.ts
index 7c9b00c..9fc107d 100644
--- a/docs/_/code-runner/tokenize-provider.ts
+++ b/monaco-language-provider/tokenize-provider.ts
@@ -1,11 +1,11 @@
 import type { languages } from 'monaco-editor'
 import { parse, CodeFile } from '@dalbit-yaksok/core'
 
-import { ColorPart } from './type.ts'
 import { nodeToColorTokens } from './ast-to-colorize/index.ts'
 import { getCommentColorParts } from './ast-to-colorize/get-comment-color-part.ts'
+import { ColorPart } from './type.ts'
 
-export class TokenizeProvider implements languages.TokensProvider {
+export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
     private colorPartsByLine: Map<number, ColorPart[]>
     private lines: string[]
 
@@ -55,6 +55,7 @@ export class TokenizeProvider implements languages.TokensProvider {
 
     tokenize(line: string, state: any) {
         const lineNumber = this.lines.indexOf(line)
+        console.log(lineNumber)
         const colorParts = this.colorPartsByLine
             .get(lineNumber)!
             .map((part) => ({
diff --git a/docs/_/code-runner/type.ts b/monaco-language-provider/type.ts
similarity index 100%
rename from docs/_/code-runner/type.ts
rename to monaco-language-provider/type.ts

From 2ca1e2110e907cb581e7e91675b7aec1f56562e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 10:44:07 +0000
Subject: [PATCH 10/20] test: remove invalid character error check during
 parsing

---
 test/errors/invalid-character-for-code.test.ts | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 test/errors/invalid-character-for-code.test.ts

diff --git a/test/errors/invalid-character-for-code.test.ts b/test/errors/invalid-character-for-code.test.ts
deleted file mode 100644
index 645b77b..0000000
--- a/test/errors/invalid-character-for-code.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { assertIsError, unreachable } from 'assert'
-import { yaksok } from '../../core/mod.ts'
-import { UnexpectedCharError } from '../../core/error/index.ts'
-
-Deno.test('사용할 수 없는 문자', async () => {
-    try {
-        await yaksok(`내 이름: "정한";`)
-        unreachable()
-    } catch (error) {
-        assertIsError(error, UnexpectedCharError)
-    }
-})

From 20e65a5e285edab171042f72867538555a61da77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:21:56 +0000
Subject: [PATCH 11/20] feat: support list loop highlighting

---
 core/node/index.ts                            |  1 +
 docs/index.md                                 | 20 +++---
 .../ast-to-colorize/index.ts                  | 58 +++++++++++++++++
 .../ast-to-colorize/list-loop.ts              | 62 +++++++++++++++++++
 4 files changed, 133 insertions(+), 8 deletions(-)
 create mode 100644 monaco-language-provider/ast-to-colorize/list-loop.ts

diff --git a/core/node/index.ts b/core/node/index.ts
index 3f1b2a6..5802975 100644
--- a/core/node/index.ts
+++ b/core/node/index.ts
@@ -12,3 +12,4 @@ export * from './variable.ts'
 export * from './return.ts'
 export * from './mention.ts'
 export * from './ffi.ts'
+export * from './listLoop.ts'
diff --git a/docs/index.md b/docs/index.md
index eea4849..2122e9f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,14 +30,18 @@ features:
 
 <script setup>
 
-const DEFAULT_CODE = `약속, 키가 (키)cm이고 몸무게가 (몸무게)일 때 비만도
-    결과: 몸무게 / (키 / 100 * 키 / 100)
-
-내_이름: ""
-비만도: 키가 (170 + 내_이름)cm이고 몸무게가 (70)일 때 비만도 # 주석입니다
-
-비만도 보여주기
-비만도 보여줄까말까`
+const DEFAULT_CODE = `목록: [3, 1, 4, 1, 5, 9]
+목록 보여주기
+목록_길이: 6  # TODO: 목록 길이
+반복 1~목록_길이-1 의 위치1 마다
+    반복 위치1+1~목록_길이 의 위치2 마다
+        만약 목록[위치2] < 목록[위치1] 이면
+            임시: 목록[위치1]
+            목록[위치1]: 목록[위치2]
+            목록[위치2]: 임시
+            목록 보여주기
+목록 보여주기
+`
 
 const codeFromUrl = (globalThis.location && new URL(globalThis.location.href).searchParams.get('code')) || DEFAULT_CODE
 </script>
diff --git a/monaco-language-provider/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
index 82a5dd4..f15da8a 100644
--- a/monaco-language-provider/ast-to-colorize/index.ts
+++ b/monaco-language-provider/ast-to-colorize/index.ts
@@ -4,6 +4,8 @@ import {
     Formula,
     FunctionInvoke,
     Identifier,
+    IfStatement,
+    ListLoop,
     Node,
     NumberLiteral,
     Operator,
@@ -16,6 +18,7 @@ import {
 import { ColorPart } from '../type.ts'
 import { SCOPE } from './scope.ts'
 import { parseFunctionDeclareHeader } from './declare-function.ts'
+import { parseListLoopHeader } from './list-loop.ts'
 
 function node(node: Node): ColorPart[] {
     if (node instanceof Block) {
@@ -62,6 +65,14 @@ function node(node: Node): ColorPart[] {
         return stringLiteral(node)
     }
 
+    if (node instanceof IfStatement) {
+        return ifStatement(node)
+    }
+
+    if (node instanceof ListLoop) {
+        return listLoop(node)
+    }
+
     console.log('Unknown node:', node)
 
     return []
@@ -217,4 +228,51 @@ function stringLiteral(current: StringLiteral): ColorPart[] {
     ]
 }
 
+function ifStatement(current: IfStatement): ColorPart[] {
+    let colorParts: ColorPart[] = [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.KEYWORD,
+        },
+    ]
+
+    const newLineIndex = current.tokens.findIndex(
+        (token) => token.type === TOKEN_TYPE.NEW_LINE,
+    )
+
+    const ifStatementHeaderEnder: ColorPart = {
+        position: current.tokens[newLineIndex - 1].position,
+        scopes: SCOPE.KEYWORD,
+    }
+
+    colorParts.push(ifStatementHeaderEnder)
+
+    for (const caseBlock of current.cases) {
+        if (caseBlock.condition) {
+            colorParts = colorParts.concat(node(caseBlock.condition))
+        }
+
+        colorParts = colorParts.concat(block(caseBlock.body))
+    }
+
+    colorParts = colorParts.toSorted(
+        (a, b) => a.position.column - b.position.column,
+    )
+
+    return colorParts
+}
+
+function listLoop(current: ListLoop): ColorPart[] {
+    let colorParts = parseListLoopHeader(current)
+
+    colorParts = colorParts.concat(node(current.list))
+    colorParts = colorParts.concat(block(current.body))
+
+    colorParts = colorParts.toSorted(
+        (a, b) => a.position.column - b.position.column,
+    )
+
+    return colorParts
+}
+
 export { node as nodeToColorTokens }
diff --git a/monaco-language-provider/ast-to-colorize/list-loop.ts b/monaco-language-provider/ast-to-colorize/list-loop.ts
new file mode 100644
index 0000000..59f4c74
--- /dev/null
+++ b/monaco-language-provider/ast-to-colorize/list-loop.ts
@@ -0,0 +1,62 @@
+import { ListLoop, TOKEN_TYPE } from '@dalbit-yaksok/core'
+import { ColorPart } from '../type.ts'
+import { SCOPE } from './scope.ts'
+
+export function parseListLoopHeader(node: ListLoop) {
+    let colorParts: ColorPart[] = [
+        {
+            position: node.tokens[0].position,
+            scopes: SCOPE.KEYWORD,
+        },
+    ]
+
+    const newLineIndex = node.tokens.findIndex(
+        (token) => token.type === TOKEN_TYPE.NEW_LINE,
+    )
+
+    const listLoopHeaderTokens = node.tokens.slice(1, newLineIndex)
+
+    const listLoopHeaderEnder: ColorPart = {
+        position:
+            listLoopHeaderTokens[listLoopHeaderTokens.length - 1].position,
+        scopes: SCOPE.KEYWORD,
+    }
+
+    colorParts.push(listLoopHeaderEnder)
+
+    const indexVariableName = node.variableName
+
+    const variableNameToken = listLoopHeaderTokens.find(
+        (token) => token.value === indexVariableName,
+    )
+
+    if (variableNameToken) {
+        const variableNameColorPart: ColorPart = {
+            position: variableNameToken.position,
+            scopes: SCOPE.VARIABLE_NAME,
+        }
+
+        colorParts.push(variableNameColorPart)
+    }
+
+    const listEndingToken = node.list.tokens?.[node.list.tokens.length - 1]
+    if (listEndingToken) {
+        const listEndingTokenIndex =
+            listLoopHeaderTokens.indexOf(listEndingToken)
+
+        const afterListIdentifier = listLoopHeaderTokens
+            .slice(listEndingTokenIndex + 1)
+            .find((token) => token.type === TOKEN_TYPE.IDENTIFIER)
+
+        if (afterListIdentifier && afterListIdentifier.value === '의') {
+            const inKeywordIdentifier: ColorPart = {
+                position: afterListIdentifier.position,
+                scopes: SCOPE.KEYWORD,
+            }
+
+            colorParts.push(inKeywordIdentifier)
+        }
+    }
+
+    return colorParts
+}

From 4db4fcb12ec9e45c620ad47a9616e1cc155ca610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:31:53 +0000
Subject: [PATCH 12/20] feat: support list literal syntax highlighting

---
 core/node/list.ts                             |  4 +-
 docs/index.md                                 | 13 +--
 .../ast-to-colorize/index.ts                  | 79 +++++++++++++++++++
 .../ast-to-colorize/list-loop.ts              |  2 +-
 4 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/core/node/list.ts b/core/node/list.ts
index a6bafde..2a90360 100644
--- a/core/node/list.ts
+++ b/core/node/list.ts
@@ -111,8 +111,8 @@ export class SetToIndex extends Executable {
     static override friendlyName = '목록에 값 넣기'
 
     constructor(
-        private target: IndexFetch,
-        private value: Evaluable,
+        public target: IndexFetch,
+        public value: Evaluable,
         public override tokens: Token[],
     ) {
         super()
diff --git a/docs/index.md b/docs/index.md
index 2122e9f..10fdba4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,17 +30,8 @@ features:
 
 <script setup>
 
-const DEFAULT_CODE = `목록: [3, 1, 4, 1, 5, 9]
-목록 보여주기
-목록_길이: 6  # TODO: 목록 길이
-반복 1~목록_길이-1 의 위치1 마다
-    반복 위치1+1~목록_길이 의 위치2 마다
-        만약 목록[위치2] < 목록[위치1] 이면
-            임시: 목록[위치1]
-            목록[위치1]: 목록[위치2]
-            목록[위치2]: 임시
-            목록 보여주기
-목록 보여주기
+const DEFAULT_CODE = `메뉴판: ["떡볶이", "마늘", "쑥", "자린고비", "엉겅퀴", "국화"]
+메뉴판[[2, 4, 6]] 보여주기
 `
 
 const codeFromUrl = (globalThis.location && new URL(globalThis.location.href).searchParams.get('code')) || DEFAULT_CODE
diff --git a/monaco-language-provider/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
index f15da8a..cafa12d 100644
--- a/monaco-language-provider/ast-to-colorize/index.ts
+++ b/monaco-language-provider/ast-to-colorize/index.ts
@@ -1,15 +1,19 @@
 import {
     Block,
     DeclareFunction,
+    EOL,
     Formula,
     FunctionInvoke,
     Identifier,
     IfStatement,
+    IndexFetch,
+    ListLiteral,
     ListLoop,
     Node,
     NumberLiteral,
     Operator,
     Print,
+    SetToIndex,
     SetVariable,
     StringLiteral,
     TOKEN_TYPE,
@@ -73,6 +77,22 @@ function node(node: Node): ColorPart[] {
         return listLoop(node)
     }
 
+    if (node instanceof ListLiteral) {
+        return listLiteral(node)
+    }
+
+    if (node instanceof IndexFetch) {
+        return indexFetch(node)
+    }
+
+    if (node instanceof SetToIndex) {
+        return setToIndex(node)
+    }
+
+    if (node instanceof EOL) {
+        return []
+    }
+
     console.log('Unknown node:', node)
 
     return []
@@ -275,4 +295,63 @@ function listLoop(current: ListLoop): ColorPart[] {
     return colorParts
 }
 
+function listLiteral(current: ListLiteral): ColorPart[] {
+    const itemTokens = new Set(current.items.flatMap((item) => item.tokens))
+    const allTokens = new Set(current.tokens)
+
+    const nonItemTokens = allTokens.difference(itemTokens)
+    const commas = Array.from(nonItemTokens).filter(
+        (token) => token.type === TOKEN_TYPE.COMMA,
+    )
+
+    let listColorParts: ColorPart[] = []
+
+    listColorParts.push({
+        position: current.tokens[0].position,
+        scopes: SCOPE.PARENTHESIS,
+    })
+
+    const commaColorParts: ColorPart[] = commas.map((comma) => ({
+        position: comma.position,
+        scopes: SCOPE.PUNCTUATION,
+    }))
+
+    listColorParts = listColorParts.concat(commaColorParts)
+
+    listColorParts.push({
+        position: current.tokens.slice(-1)[0].position,
+        scopes: SCOPE.PARENTHESIS,
+    })
+
+    const itemColorParts = current.items.flatMap(node)
+
+    const colorParts = listColorParts
+        .concat(itemColorParts)
+        .toSorted((a, b) => a.position.column - b.position.column)
+
+    return colorParts
+}
+
+function indexFetch(current: IndexFetch): ColorPart[] {
+    let colorParts: ColorPart[] = []
+
+    colorParts = colorParts.concat(node(current.list))
+    colorParts = colorParts.concat(node(current.index))
+
+    return colorParts
+}
+
+function setToIndex(current: SetToIndex): ColorPart[] {
+    let colorParts: ColorPart[] = []
+
+    colorParts = colorParts.concat(node(current.target))
+    colorParts = colorParts.concat(node(current.value))
+
+    colorParts = colorParts.toSorted(
+        (a, b) => a.position.column - b.position.column,
+    )
+
+    return colorParts
+}
+
 export { node as nodeToColorTokens }
diff --git a/monaco-language-provider/ast-to-colorize/list-loop.ts b/monaco-language-provider/ast-to-colorize/list-loop.ts
index 59f4c74..1e77154 100644
--- a/monaco-language-provider/ast-to-colorize/list-loop.ts
+++ b/monaco-language-provider/ast-to-colorize/list-loop.ts
@@ -3,7 +3,7 @@ import { ColorPart } from '../type.ts'
 import { SCOPE } from './scope.ts'
 
 export function parseListLoopHeader(node: ListLoop) {
-    let colorParts: ColorPart[] = [
+    const colorParts: ColorPart[] = [
         {
             position: node.tokens[0].position,
             scopes: SCOPE.KEYWORD,

From 71aece41b76e7e7d5b2cbff2331041c2a541e307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:34:24 +0000
Subject: [PATCH 13/20] feat: support return node syntax coloring

---
 .../ast-to-colorize/index.ts                     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/monaco-language-provider/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
index cafa12d..d1e5f6e 100644
--- a/monaco-language-provider/ast-to-colorize/index.ts
+++ b/monaco-language-provider/ast-to-colorize/index.ts
@@ -13,6 +13,7 @@ import {
     NumberLiteral,
     Operator,
     Print,
+    Return,
     SetToIndex,
     SetVariable,
     StringLiteral,
@@ -89,6 +90,10 @@ function node(node: Node): ColorPart[] {
         return setToIndex(node)
     }
 
+    if (node instanceof Return) {
+        return visitReturn(node)
+    }
+
     if (node instanceof EOL) {
         return []
     }
@@ -354,4 +359,15 @@ function setToIndex(current: SetToIndex): ColorPart[] {
     return colorParts
 }
 
+function visitReturn(current: Return): ColorPart[] {
+    const colorParts: ColorPart[] = [
+        {
+            position: current.tokens[0].position,
+            scopes: SCOPE.KEYWORD,
+        },
+    ]
+
+    return colorParts
+}
+
 export { node as nodeToColorTokens }

From 716287b3f58ae5dbb95d4cd5dcf6c7a0c7e368a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:45:56 +0000
Subject: [PATCH 14/20] feat: support else-if keyword syntax coloring

---
 docs/index.md                                 | 28 ++++++++-
 .../ast-to-colorize/index.ts                  | 63 ++++++++++++++++---
 2 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 10fdba4..115a810 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,8 +30,32 @@ features:
 
 <script setup>
 
-const DEFAULT_CODE = `메뉴판: ["떡볶이", "마늘", "쑥", "자린고비", "엉겅퀴", "국화"]
-메뉴판[[2, 4, 6]] 보여주기
+const DEFAULT_CODE = `이름: "재현"
+나이: 20
+국적: '덴마크'
+
+만약 이름 = "재현" 이고 국적 = "대한민국" 이면
+    "언제나 애국하는 우리 재현이" 보여주기
+아니면 만약 국적 = "덴마크" 이면
+    "재현이는 덴마크 사람이에요" 보여주기
+
+만약 이름 = "재현" 이고 나이 = 18 이면
+    "건강하게 자라준 우리 재현이" 보여주기
+아니면 만약 나이 = 19 이면
+    "곧 성인이 되는 우리 재현이" 보여주기
+아니면 만약 나이 = 21 이면
+    "어엿한 어른이 된 우리 재현이" 보여주기
+아니면
+    "재현이는 몇살이에요?" 보여주기
+
+만약 이름 = "정현" 이거나 (나이 = 20이고 국적 = '덴마크') 이면
+    "정현이니? 건강하게 자라줘서 고마워" 보여주기
+    
+만약 이름 = "재희" 거나 (나이 = 20고 국적 = '덴마크') 이면
+    "재희니? 건강하게 자라줘서 고마워" 보여주기
+
+만약 이름 = "지민"이고 (나이 = 20이고 국적 = '덴마크') 이면
+    "지민이구나? 건강하게 자라줘서 고마워" 보여주기
 `
 
 const codeFromUrl = (globalThis.location && new URL(globalThis.location.href).searchParams.get('code')) || DEFAULT_CODE
diff --git a/monaco-language-provider/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
index d1e5f6e..36fc8ba 100644
--- a/monaco-language-provider/ast-to-colorize/index.ts
+++ b/monaco-language-provider/ast-to-colorize/index.ts
@@ -261,20 +261,67 @@ function ifStatement(current: IfStatement): ColorPart[] {
         },
     ]
 
-    const newLineIndex = current.tokens.findIndex(
-        (token) => token.type === TOKEN_TYPE.NEW_LINE,
-    )
+    // const newLineIndex = current.tokens.findIndex(
+    //     (token) => token.type === TOKEN_TYPE.NEW_LINE,
+    // )
 
-    const ifStatementHeaderEnder: ColorPart = {
-        position: current.tokens[newLineIndex - 1].position,
-        scopes: SCOPE.KEYWORD,
-    }
+    // const ifStatementHeaderEnder: ColorPart = {
+    //     position: current.tokens[newLineIndex - 1].position,
+    //     scopes: SCOPE.KEYWORD,
+    // }
 
-    colorParts.push(ifStatementHeaderEnder)
+    // colorParts.push(ifStatementHeaderEnder)
 
     for (const caseBlock of current.cases) {
         if (caseBlock.condition) {
+            if (caseBlock.condition.tokens) {
+                const conditionStartTokenIndex = current.tokens.indexOf(
+                    caseBlock.condition.tokens[0],
+                )
+
+                const conditionEndTokenIndex = current.tokens.indexOf(
+                    caseBlock.condition.tokens.slice(-1)[0],
+                )
+
+                const beforeConditionIdentifier = current.tokens
+                    .slice(0, conditionStartTokenIndex)
+                    .findLast((token) => token.type === TOKEN_TYPE.IDENTIFIER)
+
+                if (beforeConditionIdentifier) {
+                    colorParts.push({
+                        position: beforeConditionIdentifier.position,
+                        scopes: SCOPE.KEYWORD,
+                    })
+                }
+
+                const afterConditionIdentifier = current.tokens
+                    .slice(conditionEndTokenIndex + 1)
+                    .find((token) => token.type === TOKEN_TYPE.IDENTIFIER)
+
+                if (afterConditionIdentifier) {
+                    colorParts.push({
+                        position: afterConditionIdentifier.position,
+                        scopes: SCOPE.KEYWORD,
+                    })
+                }
+            }
+
             colorParts = colorParts.concat(node(caseBlock.condition))
+        } else {
+            const bodyStartTokenIndex = current.tokens.indexOf(
+                caseBlock.body.tokens[0],
+            )
+
+            const beforeBodyIdentifier = current.tokens
+                .slice(0, bodyStartTokenIndex)
+                .findLast((token) => token.type === TOKEN_TYPE.IDENTIFIER)
+
+            if (beforeBodyIdentifier) {
+                colorParts.push({
+                    position: beforeBodyIdentifier.position,
+                    scopes: SCOPE.KEYWORD,
+                })
+            }
         }
 
         colorParts = colorParts.concat(block(caseBlock.body))

From 5e0a6944098e7cb179fc4344433e4d8dac17dd4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:47:05 +0000
Subject: [PATCH 15/20] fix: sort all colorParts after parsing

---
 .../ast-to-colorize/index.ts                  | 20 +------------------
 monaco-language-provider/tokenize-provider.ts |  4 +++-
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/monaco-language-provider/ast-to-colorize/index.ts b/monaco-language-provider/ast-to-colorize/index.ts
index 36fc8ba..f8b81c3 100644
--- a/monaco-language-provider/ast-to-colorize/index.ts
+++ b/monaco-language-provider/ast-to-colorize/index.ts
@@ -237,10 +237,6 @@ function functionInvoke(current: FunctionInvoke): ColorPart[] {
         colorParts = colorParts.concat(node(current.params[paramName]))
     }
 
-    colorParts = colorParts.toSorted(
-        (a, b) => a.position.column - b.position.column,
-    )
-
     return colorParts
 }
 
@@ -327,10 +323,6 @@ function ifStatement(current: IfStatement): ColorPart[] {
         colorParts = colorParts.concat(block(caseBlock.body))
     }
 
-    colorParts = colorParts.toSorted(
-        (a, b) => a.position.column - b.position.column,
-    )
-
     return colorParts
 }
 
@@ -340,10 +332,6 @@ function listLoop(current: ListLoop): ColorPart[] {
     colorParts = colorParts.concat(node(current.list))
     colorParts = colorParts.concat(block(current.body))
 
-    colorParts = colorParts.toSorted(
-        (a, b) => a.position.column - b.position.column,
-    )
-
     return colorParts
 }
 
@@ -377,9 +365,7 @@ function listLiteral(current: ListLiteral): ColorPart[] {
 
     const itemColorParts = current.items.flatMap(node)
 
-    const colorParts = listColorParts
-        .concat(itemColorParts)
-        .toSorted((a, b) => a.position.column - b.position.column)
+    const colorParts = listColorParts.concat(itemColorParts)
 
     return colorParts
 }
@@ -399,10 +385,6 @@ function setToIndex(current: SetToIndex): ColorPart[] {
     colorParts = colorParts.concat(node(current.target))
     colorParts = colorParts.concat(node(current.value))
 
-    colorParts = colorParts.toSorted(
-        (a, b) => a.position.column - b.position.column,
-    )
-
     return colorParts
 }
 
diff --git a/monaco-language-provider/tokenize-provider.ts b/monaco-language-provider/tokenize-provider.ts
index 9fc107d..2795523 100644
--- a/monaco-language-provider/tokenize-provider.ts
+++ b/monaco-language-provider/tokenize-provider.ts
@@ -18,7 +18,9 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
         const codeFile = new CodeFile(code)
         const { ast } = parse(codeFile)
 
-        const nodeColorParts = nodeToColorTokens(ast)
+        const nodeColorParts = nodeToColorTokens(ast).toSorted(
+            (a, b) => a.position.column - b.position.column,
+        )
         const commentColorParts = getCommentColorParts(codeFile.tokens)
 
         const colorParts = nodeColorParts.concat(commentColorParts)

From 5ec520c513f07960bcd2d256d95aaccada2ed529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:50:39 +0000
Subject: [PATCH 16/20] fix: ignore error raised during parsing

---
 docs/_/code-runner/index.vue                  |  1 -
 docs/index.md                                 | 29 ++++---------------
 monaco-language-provider/tokenize-provider.ts | 23 ++++++++++-----
 3 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index dcb04c1..fb67dd2 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -138,7 +138,6 @@ function share() {
 }
 
 watch(stdout, (output) => {
-    console.log(props.challenge?.output, stdout.value.join('\n'))
     if (stdout.value.join('\n') === props?.challenge?.output) {
         alert('정답입니다!')
     }
diff --git a/docs/index.md b/docs/index.md
index 115a810..a6ee4d0 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -30,32 +30,13 @@ features:
 
 <script setup>
 
-const DEFAULT_CODE = `이름: "재현"
-나이: 20
-국적: '덴마크'
+const DEFAULT_CODE = `약속, 키가 (키)cm이고 몸무게가 (몸무게)일 때 비만도
+    결과: 몸무게 / (키 / 100 * 키 / 100)
 
-만약 이름 = "재현" 이고 국적 = "대한민국" 이면
-    "언제나 애국하는 우리 재현이" 보여주기
-아니면 만약 국적 = "덴마크" 이면
-    "재현이는 덴마크 사람이에요" 보여주기
+비만도: 키가 (170)cm이고 몸무게가 (70)일 때 비만도
 
-만약 이름 = "재현" 이고 나이 = 18 이면
-    "건강하게 자라준 우리 재현이" 보여주기
-아니면 만약 나이 = 19 이면
-    "곧 성인이 되는 우리 재현이" 보여주기
-아니면 만약 나이 = 21 이면
-    "어엿한 어른이 된 우리 재현이" 보여주기
-아니면
-    "재현이는 몇살이에요?" 보여주기
-
-만약 이름 = "정현" 이거나 (나이 = 20이고 국적 = '덴마크') 이면
-    "정현이니? 건강하게 자라줘서 고마워" 보여주기
-    
-만약 이름 = "재희" 거나 (나이 = 20고 국적 = '덴마크') 이면
-    "재희니? 건강하게 자라줘서 고마워" 보여주기
-
-만약 이름 = "지민"이고 (나이 = 20이고 국적 = '덴마크') 이면
-    "지민이구나? 건강하게 자라줘서 고마워" 보여주기
+비만도 보여주기
+비만도 보여줄까말까
 `
 
 const codeFromUrl = (globalThis.location && new URL(globalThis.location.href).searchParams.get('code')) || DEFAULT_CODE
diff --git a/monaco-language-provider/tokenize-provider.ts b/monaco-language-provider/tokenize-provider.ts
index 2795523..0aeb5b4 100644
--- a/monaco-language-provider/tokenize-provider.ts
+++ b/monaco-language-provider/tokenize-provider.ts
@@ -57,16 +57,23 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
 
     tokenize(line: string, state: any) {
         const lineNumber = this.lines.indexOf(line)
-        console.log(lineNumber)
-        const colorParts = this.colorPartsByLine
-            .get(lineNumber)!
-            .map((part) => ({
-                scopes: part.scopes,
-                startIndex: part.position.column - 1,
-            }))
+
+        const colorParts = this.colorPartsByLine.get(lineNumber)
+
+        if (!colorParts) {
+            return {
+                tokens: [],
+                endState: state,
+            }
+        }
+
+        const colorTokens = colorParts.map((part) => ({
+            scopes: part.scopes,
+            startIndex: part.position.column - 1,
+        }))
 
         return {
-            tokens: colorParts,
+            tokens: colorTokens,
             endState: state,
         }
     }

From c73a0e5190eb6d236d1a4098b29afaa8587d9477 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:53:51 +0000
Subject: [PATCH 17/20] refactor: explicit types

---
 core/deno.json                                |  2 +-
 deno.json                                     |  2 +-
 monaco-language-provider/deno.json            | 11 ++++++-----
 monaco-language-provider/tokenize-provider.ts |  6 +++---
 quickjs/deno.json                             |  2 +-
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/core/deno.json b/core/deno.json
index f8a4cdf..f2ff885 100644
--- a/core/deno.json
+++ b/core/deno.json
@@ -8,5 +8,5 @@
   },
   "name": "@dalbit-yaksok/core",
   "exports": "./mod.ts",
-  "version": "0.2.0-alpha.10+20241217.nightly"
+  "version": "0.2.0-alpha.12+20241222.nightly"
 }
\ No newline at end of file
diff --git a/deno.json b/deno.json
index 151ddf1..deef852 100644
--- a/deno.json
+++ b/deno.json
@@ -22,7 +22,7 @@
         "test",
         "monaco-language-provider"
     ],
-    "version": "0.2.0-alpha.11+20241217.nightly",
+    "version": "0.2.0-alpha.12+20241222.nightly",
     "tasks": {
         "apply-version": "deno run --allow-read --allow-write apply-version.ts",
         "publish": "deno task --recursive test && deno publish --allow-dirty"
diff --git a/monaco-language-provider/deno.json b/monaco-language-provider/deno.json
index 967fa25..edada48 100644
--- a/monaco-language-provider/deno.json
+++ b/monaco-language-provider/deno.json
@@ -1,7 +1,8 @@
 {
-    "imports": {
-        "monaco-editor": "npm:monaco-editor@^0.52.2"
-    },
-    "name": "@dalbit-yaksok/monaco-language-provider",
-    "exports": "./mod.ts"
+  "imports": {
+    "monaco-editor": "npm:monaco-editor@^0.52.2"
+  },
+  "name": "@dalbit-yaksok/monaco-language-provider",
+  "exports": "./mod.ts",
+  "version": "0.2.0-alpha.12+20241222.nightly"
 }
\ No newline at end of file
diff --git a/monaco-language-provider/tokenize-provider.ts b/monaco-language-provider/tokenize-provider.ts
index 0aeb5b4..f77b27f 100644
--- a/monaco-language-provider/tokenize-provider.ts
+++ b/monaco-language-provider/tokenize-provider.ts
@@ -14,7 +14,7 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
         this.colorPartsByLine = this.createColorParts(code)
     }
 
-    createColorParts(code: string) {
+    createColorParts(code: string): Map<number, ColorPart[]> {
         const codeFile = new CodeFile(code)
         const { ast } = parse(codeFile)
 
@@ -44,7 +44,7 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
         console.timeEnd('Parse')
     }
 
-    getInitialState() {
+    getInitialState(): languages.IState {
         return {
             clone() {
                 return this
@@ -55,7 +55,7 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
         }
     }
 
-    tokenize(line: string, state: any) {
+    tokenize(line: string, state: any): languages.ILineTokens {
         const lineNumber = this.lines.indexOf(line)
 
         const colorParts = this.colorPartsByLine.get(lineNumber)
diff --git a/quickjs/deno.json b/quickjs/deno.json
index 006f532..b98871e 100644
--- a/quickjs/deno.json
+++ b/quickjs/deno.json
@@ -9,5 +9,5 @@
     "check-deploy": "deno publish --dry-run --allow-dirty",
     "test": "deno test --quiet --allow-net --allow-read --parallel & deno lint & deno task check-deploy"
   },
-  "version": "0.2.0-alpha.10+20241217.nightly"
+  "version": "0.2.0-alpha.12+20241222.nightly"
 }
\ No newline at end of file

From 2a46de244c84912ad47402de34b1463da64f648a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Wed, 25 Dec 2024 13:44:27 +0000
Subject: [PATCH 18/20] refactor: split language providers into interfaces

---
 docs/_/code-runner/index.vue                  | 40 ++---------
 monaco-language-provider/language.ts          |  0
 monaco-language-provider/mod.ts               | 68 ++++++++++++++++++-
 .../base.ts}                                  | 46 ++-----------
 .../provider/completion-item.ts               | 33 +++++++++
 monaco-language-provider/provider/tokens.ts   | 40 +++++++++++
 6 files changed, 151 insertions(+), 76 deletions(-)
 create mode 100644 monaco-language-provider/language.ts
 rename monaco-language-provider/{tokenize-provider.ts => provider/base.ts} (52%)
 create mode 100644 monaco-language-provider/provider/completion-item.ts
 create mode 100644 monaco-language-provider/provider/tokens.ts

diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index fb67dd2..738971e 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -3,8 +3,8 @@ import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import AnsiCode from 'ansi-to-html'
 import type { editor, languages } from 'monaco-editor'
 
-import { yaksok, tokenize } from '@dalbit-yaksok/core'
-import { MonacoDalbitYaksokProvider } from '@dalbit-yaksok/monaco-language-provider'
+import { yaksok } from '@dalbit-yaksok/core'
+import { DalbitYaksokApplier } from '@dalbit-yaksok/monaco-language-provider'
 
 const props = defineProps({
     code: {
@@ -37,38 +37,8 @@ async function initializeMonaco() {
         'monaco-editor/esm/vs/editor/editor.api'
     )
 
-    languages.register({ id: 'yaksok' })
-
-    const tokenizeProvider = new MonacoDalbitYaksokProvider(code.value)
-
-    languages.onLanguage('yaksok', () => {
-        languages.setLanguageConfiguration('yaksok', {
-            comments: {
-                lineComment: '#',
-            },
-            brackets: [
-                ['{', '}'],
-                ['[', ']'],
-                ['(', ')'],
-            ],
-            autoClosingPairs: [
-                { open: '{', close: '}' },
-                { open: '[', close: ']' },
-                { open: '(', close: ')' },
-                { open: '"', close: '"', notIn: ['string'] },
-                { open: "'", close: "'", notIn: ['string'] },
-            ],
-            surroundingPairs: [
-                { open: '{', close: '}' },
-                { open: '[', close: ']' },
-                { open: '(', close: ')' },
-                { open: '"', close: '"' },
-                { open: "'", close: "'" },
-            ],
-        })
-
-        languages.setTokensProvider('yaksok', tokenizeProvider)
-    })
+    const languageProvider = new DalbitYaksokApplier(code.value)
+    languageProvider.register(languages)
 
     editorInstance = editor.create(editorElement, {
         automaticLayout: true,
@@ -91,7 +61,7 @@ async function initializeMonaco() {
         const updatedCode = editorInstance!.getValue()
         code.value = updatedCode
 
-        tokenizeProvider.updateCode(updatedCode)
+        languageProvider.updateCode(updatedCode)
     })
 
     editorInstance.onDidFocusEditorText(() => {
diff --git a/monaco-language-provider/language.ts b/monaco-language-provider/language.ts
new file mode 100644
index 0000000..e69de29
diff --git a/monaco-language-provider/mod.ts b/monaco-language-provider/mod.ts
index a464324..242f1e7 100644
--- a/monaco-language-provider/mod.ts
+++ b/monaco-language-provider/mod.ts
@@ -1 +1,67 @@
-export { MonacoDalbitYaksokProvider } from './tokenize-provider.ts'
+import type { languages } from 'monaco-editor'
+
+import { BaseProvider } from './provider/base.ts'
+import { TokensProvider } from './provider/tokens.ts'
+import { CompletionItemProvider } from './provider/completion-item.ts'
+
+const LANG_ID = 'yaksok'
+
+export class DalbitYaksokApplier {
+    baseProvider: BaseProvider
+    tokensProvider: TokensProvider
+    completionItemProvider: CompletionItemProvider
+
+    constructor(initialCode: string) {
+        this.baseProvider = new BaseProvider(initialCode)
+
+        this.tokensProvider = new TokensProvider(this.baseProvider)
+        this.completionItemProvider = new CompletionItemProvider(
+            this.baseProvider,
+        )
+    }
+
+    public async register(languagesInstance: typeof languages) {
+        languagesInstance.register({ id: LANG_ID })
+
+        await new Promise<void>((resolve) =>
+            languagesInstance.onLanguage(LANG_ID, resolve),
+        )
+
+        languagesInstance.setLanguageConfiguration(LANG_ID, {
+            comments: {
+                lineComment: '#',
+            },
+            brackets: [
+                ['{', '}'],
+                ['[', ']'],
+                ['(', ')'],
+            ],
+            autoClosingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"', notIn: ['string'] },
+                { open: "'", close: "'", notIn: ['string'] },
+            ],
+            surroundingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"' },
+                { open: "'", close: "'" },
+            ],
+        })
+
+        languagesInstance.setTokensProvider(LANG_ID, this.tokensProvider)
+        languagesInstance.registerCompletionItemProvider(
+            LANG_ID,
+            this.completionItemProvider,
+        )
+
+        console.log(this.completionItemProvider)
+    }
+
+    updateCode(code: string) {
+        this.baseProvider.updateCode(code)
+    }
+}
diff --git a/monaco-language-provider/tokenize-provider.ts b/monaco-language-provider/provider/base.ts
similarity index 52%
rename from monaco-language-provider/tokenize-provider.ts
rename to monaco-language-provider/provider/base.ts
index f77b27f..0155527 100644
--- a/monaco-language-provider/tokenize-provider.ts
+++ b/monaco-language-provider/provider/base.ts
@@ -1,13 +1,13 @@
 import type { languages } from 'monaco-editor'
 import { parse, CodeFile } from '@dalbit-yaksok/core'
 
-import { nodeToColorTokens } from './ast-to-colorize/index.ts'
-import { getCommentColorParts } from './ast-to-colorize/get-comment-color-part.ts'
-import { ColorPart } from './type.ts'
+import { getCommentColorParts } from '../ast-to-colorize/get-comment-color-part.ts'
+import { nodeToColorTokens } from '../ast-to-colorize/index.ts'
+import { ColorPart } from '../type.ts'
 
-export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
-    private colorPartsByLine: Map<number, ColorPart[]>
-    private lines: string[]
+export class BaseProvider {
+    public colorPartsByLine: Map<number, ColorPart[]>
+    public lines: string[]
 
     constructor(private code: string) {
         this.lines = code.split('\n')
@@ -43,38 +43,4 @@ export class MonacoDalbitYaksokProvider implements languages.TokensProvider {
         this.colorPartsByLine = this.createColorParts(code)
         console.timeEnd('Parse')
     }
-
-    getInitialState(): languages.IState {
-        return {
-            clone() {
-                return this
-            },
-            equals() {
-                return false
-            },
-        }
-    }
-
-    tokenize(line: string, state: any): languages.ILineTokens {
-        const lineNumber = this.lines.indexOf(line)
-
-        const colorParts = this.colorPartsByLine.get(lineNumber)
-
-        if (!colorParts) {
-            return {
-                tokens: [],
-                endState: state,
-            }
-        }
-
-        const colorTokens = colorParts.map((part) => ({
-            scopes: part.scopes,
-            startIndex: part.position.column - 1,
-        }))
-
-        return {
-            tokens: colorTokens,
-            endState: state,
-        }
-    }
 }
diff --git a/monaco-language-provider/provider/completion-item.ts b/monaco-language-provider/provider/completion-item.ts
new file mode 100644
index 0000000..ebc4ed6
--- /dev/null
+++ b/monaco-language-provider/provider/completion-item.ts
@@ -0,0 +1,33 @@
+import { CancellationToken, editor, languages, Position } from 'monaco-editor'
+import { BaseProvider } from './base.ts'
+
+export class CompletionItemProvider
+    implements languages.CompletionItemProvider
+{
+    constructor(private base: BaseProvider) {}
+
+    provideCompletionItems(
+        model: editor.ITextModel,
+        position: Position,
+        context: languages.CompletionContext,
+        token: CancellationToken,
+    ): languages.ProviderResult<languages.CompletionList> {
+        console.log(model, position, context, token)
+
+        return {
+            suggestions: [
+                {
+                    label: 'Hello',
+                    kind: languages.CompletionItemKind.Text,
+                    insertText: 'Hello',
+                    range: {
+                        startLineNumber: position.lineNumber,
+                        startColumn: position.column - 1,
+                        endLineNumber: position.lineNumber,
+                        endColumn: position.column,
+                    },
+                },
+            ],
+        }
+    }
+}
diff --git a/monaco-language-provider/provider/tokens.ts b/monaco-language-provider/provider/tokens.ts
new file mode 100644
index 0000000..08fe3bf
--- /dev/null
+++ b/monaco-language-provider/provider/tokens.ts
@@ -0,0 +1,40 @@
+import type { languages } from 'monaco-editor'
+import { BaseProvider } from './base.ts'
+
+export class TokensProvider implements languages.TokensProvider {
+    constructor(private base: BaseProvider) {}
+
+    getInitialState(): languages.IState {
+        return {
+            clone() {
+                return this
+            },
+            equals() {
+                return false
+            },
+        }
+    }
+
+    tokenize(line: string, state: any): languages.ILineTokens {
+        const lineNumber = this.base.lines.indexOf(line)
+
+        const colorParts = this.base.colorPartsByLine.get(lineNumber)
+
+        if (!colorParts) {
+            return {
+                tokens: [],
+                endState: state,
+            }
+        }
+
+        const colorTokens = colorParts.map((part) => ({
+            scopes: part.scopes,
+            startIndex: part.position.column - 1,
+        }))
+
+        return {
+            tokens: colorTokens,
+            endState: state,
+        }
+    }
+}

From e5a4a7053890f03a598f143e8e23128f3fff307f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Wed, 25 Dec 2024 14:29:59 +0000
Subject: [PATCH 19/20] chore: implement mock completion provider

---
 docs/.vitepress/config.ts                     | 44 +++++++++++++++----
 docs/_/code-runner/index.vue                  |  6 +--
 monaco-language-provider/mod.ts               |  3 +-
 .../provider/completion-item.ts               |  2 +-
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b23d1aa..fe8b83a 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -11,6 +11,17 @@ const SIDEBAR_CONFIG: VitePressSidebarOptions = {
     useTitleFromFrontmatter: true,
 }
 
+const providerPath = new URL(
+    import.meta.resolve('@dalbit-yaksok/monaco-language-provider'),
+).pathname
+
+const runtimeCorePath = new URL(import.meta.resolve('@dalbit-yaksok/core'))
+    .pathname
+
+const workspacePath = new URL('../..', import.meta.url).pathname
+
+console.log({ workspacePath })
+
 export default defineConfig(
     withSidebar(
         {
@@ -35,17 +46,34 @@ export default defineConfig(
                 },
             },
             vite: {
-                build: {
-                    minify: false,
-                },
                 plugins: [pluginDeno()],
                 server: {
                     fs: {
-                        allow: [
-                            '..'
-                        ]
-                    }
-                }
+                        allow: [workspacePath],
+                    },
+                    watch: {
+                        cwd: workspacePath,
+                    },
+                },
+                build: {
+                    rollupOptions: {
+                        watch: {
+                            include: [workspacePath],
+                        },
+                    },
+                },
+                optimizeDeps: {
+                    include: [
+                        '@dalbit-yaksok/monaco-language-provider',
+                        '@dalbit-yaksok/core',
+                    ],
+                },
+                resolve: {
+                    alias: {
+                        '@dalbit-yaksok/monaco-language-provider': providerPath,
+                        '@dalbit-yaksok/core': runtimeCorePath,
+                    },
+                },
             },
         },
         SIDEBAR_CONFIG,
diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index 738971e..0eff7bf 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -3,8 +3,8 @@ import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import AnsiCode from 'ansi-to-html'
 import type { editor, languages } from 'monaco-editor'
 
-import { yaksok } from '@dalbit-yaksok/core'
-import { DalbitYaksokApplier } from '@dalbit-yaksok/monaco-language-provider'
+import { yaksok } from '../../../core/mod'
+import { DalbitYaksokApplier } from '../../../monaco-language-provider/mod'
 
 const props = defineProps({
     code: {
@@ -24,7 +24,7 @@ const props = defineProps({
 const editorRef = useTemplateRef('editor')
 
 const code = ref(props.code)
-const stdout = ref([])
+const stdout = ref<string[]>([])
 
 let editorInstance: editor.IStandaloneCodeEditor | null = null
 
diff --git a/monaco-language-provider/mod.ts b/monaco-language-provider/mod.ts
index 242f1e7..4d37142 100644
--- a/monaco-language-provider/mod.ts
+++ b/monaco-language-provider/mod.ts
@@ -21,6 +21,7 @@ export class DalbitYaksokApplier {
     }
 
     public async register(languagesInstance: typeof languages) {
+        console.log(this.completionItemProvider)
         languagesInstance.register({ id: LANG_ID })
 
         await new Promise<void>((resolve) =>
@@ -57,8 +58,6 @@ export class DalbitYaksokApplier {
             LANG_ID,
             this.completionItemProvider,
         )
-
-        console.log(this.completionItemProvider)
     }
 
     updateCode(code: string) {
diff --git a/monaco-language-provider/provider/completion-item.ts b/monaco-language-provider/provider/completion-item.ts
index ebc4ed6..60b3b3c 100644
--- a/monaco-language-provider/provider/completion-item.ts
+++ b/monaco-language-provider/provider/completion-item.ts
@@ -12,7 +12,7 @@ export class CompletionItemProvider
         context: languages.CompletionContext,
         token: CancellationToken,
     ): languages.ProviderResult<languages.CompletionList> {
-        console.log(model, position, context, token)
+        console.log({ model, position, context, token, test: '예?' })
 
         return {
             suggestions: [

From 541648b24ce73e413bb5671ffeeb046d972299e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=95=9C=20Rycont?=
 <35295182+rycont@users.noreply.github.com>
Date: Sat, 4 Jan 2025 14:37:42 +0000
Subject: [PATCH 20/20] fix: manually call triggerSuggest when keyword-starting
 characters typed

---
 docs/.vitepress/config.ts                     |  22 ----
 docs/_/code-runner/index.vue                  |  11 +-
 monaco-language-provider/const.ts             |   1 +
 monaco-language-provider/hangul-to-phoneme.ts | 108 +++++++++++++++++
 monaco-language-provider/mod.ts               |  18 ++-
 .../provider/completion-item.ts               | 114 +++++++++++++++---
 6 files changed, 228 insertions(+), 46 deletions(-)
 create mode 100644 monaco-language-provider/const.ts
 create mode 100644 monaco-language-provider/hangul-to-phoneme.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index fe8b83a..9569254 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -11,13 +11,6 @@ const SIDEBAR_CONFIG: VitePressSidebarOptions = {
     useTitleFromFrontmatter: true,
 }
 
-const providerPath = new URL(
-    import.meta.resolve('@dalbit-yaksok/monaco-language-provider'),
-).pathname
-
-const runtimeCorePath = new URL(import.meta.resolve('@dalbit-yaksok/core'))
-    .pathname
-
 const workspacePath = new URL('../..', import.meta.url).pathname
 
 console.log({ workspacePath })
@@ -51,9 +44,6 @@ export default defineConfig(
                     fs: {
                         allow: [workspacePath],
                     },
-                    watch: {
-                        cwd: workspacePath,
-                    },
                 },
                 build: {
                     rollupOptions: {
@@ -62,18 +52,6 @@ export default defineConfig(
                         },
                     },
                 },
-                optimizeDeps: {
-                    include: [
-                        '@dalbit-yaksok/monaco-language-provider',
-                        '@dalbit-yaksok/core',
-                    ],
-                },
-                resolve: {
-                    alias: {
-                        '@dalbit-yaksok/monaco-language-provider': providerPath,
-                        '@dalbit-yaksok/core': runtimeCorePath,
-                    },
-                },
             },
         },
         SIDEBAR_CONFIG,
diff --git a/docs/_/code-runner/index.vue b/docs/_/code-runner/index.vue
index 0eff7bf..8b0b4ff 100644
--- a/docs/_/code-runner/index.vue
+++ b/docs/_/code-runner/index.vue
@@ -3,8 +3,11 @@ import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import AnsiCode from 'ansi-to-html'
 import type { editor, languages } from 'monaco-editor'
 
-import { yaksok } from '../../../core/mod'
-import { DalbitYaksokApplier } from '../../../monaco-language-provider/mod'
+import { yaksok } from '@dalbit-yaksok/core'
+import {
+    DalbitYaksokApplier,
+    LANG_ID,
+} from '@dalbit-yaksok/monaco-language-provider'
 
 const props = defineProps({
     code: {
@@ -47,7 +50,7 @@ async function initializeMonaco() {
         minimap: {
             enabled: false,
         },
-        language: 'yaksok',
+        language: LANG_ID,
         theme: 'vs',
         guides: {
             highlightActiveIndentation: false,
@@ -64,6 +67,8 @@ async function initializeMonaco() {
         languageProvider.updateCode(updatedCode)
     })
 
+    languageProvider.configAutocomplete(editorInstance)
+
     editorInstance.onDidFocusEditorText(() => {
         editorInstance!.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, runCode)
     })
diff --git a/monaco-language-provider/const.ts b/monaco-language-provider/const.ts
new file mode 100644
index 0000000..245ebfb
--- /dev/null
+++ b/monaco-language-provider/const.ts
@@ -0,0 +1 @@
+export const LANG_ID = 'dalbityaksok'
diff --git a/monaco-language-provider/hangul-to-phoneme.ts b/monaco-language-provider/hangul-to-phoneme.ts
new file mode 100644
index 0000000..665a32b
--- /dev/null
+++ b/monaco-language-provider/hangul-to-phoneme.ts
@@ -0,0 +1,108 @@
+// 다음의 코드를 참고하였습니다:
+// https://blex.me/@baealex/%ED%95%9C%EA%B8%80-%EB%B6%84%EB%A6%AC-%EB%B3%91%ED%95%A9#%EB%B6%84%EB%A6%AC%EA%B8%B0-%EA%B0%9C%EC%84%A0
+
+const START_OF_HANGUL_IN_UNICODE = 44032
+const END_OF_HANGUL_IN_UNICODE = 55203
+
+const 초성 = [
+    'ㄱ',
+    'ㄲ',
+    'ㄴ',
+    'ㄷ',
+    'ㄸ',
+    'ㄹ',
+    'ㅁ',
+    'ㅂ',
+    'ㅃ',
+    'ㅅ',
+    'ㅆ',
+    'ㅇ',
+    'ㅈ',
+    'ㅉ',
+    'ㅊ',
+    'ㅋ',
+    'ㅌ',
+    'ㅍ',
+    'ㅎ',
+]
+const 중성 = [
+    'ㅏ',
+    'ㅐ',
+    'ㅑ',
+    'ㅒ',
+    'ㅓ',
+    'ㅔ',
+    'ㅕ',
+    'ㅖ',
+    'ㅗ',
+    'ㅘ',
+    'ㅙ',
+    'ㅚ',
+    'ㅛ',
+    'ㅜ',
+    'ㅝ',
+    'ㅞ',
+    'ㅟ',
+    'ㅠ',
+    'ㅡ',
+    'ㅢ',
+    'ㅣ',
+]
+
+const 종성 = [
+    '',
+    'ㄱ',
+    'ㄲ',
+    'ㄳ',
+    'ㄴ',
+    'ㄵ',
+    'ㄶ',
+    'ㄷ',
+    'ㄹ',
+    'ㄺ',
+    'ㄻ',
+    'ㄼ',
+    'ㄽ',
+    'ㄾ',
+    'ㄿ',
+    'ㅀ',
+    'ㅁ',
+    'ㅂ',
+    'ㅄ',
+    'ㅅ',
+    'ㅆ',
+    'ㅇ',
+    'ㅈ',
+    'ㅊ',
+    'ㅋ',
+    'ㅌ',
+    'ㅍ',
+    'ㅎ',
+]
+
+function hangulSyllableToPhoneme(syllable: string) {
+    const unicodeOrder = syllable.charCodeAt(0)
+
+    if (
+        unicodeOrder < START_OF_HANGUL_IN_UNICODE ||
+        unicodeOrder > END_OF_HANGUL_IN_UNICODE
+    ) {
+        return [syllable]
+    }
+
+    const orderInHangulArea = unicodeOrder - START_OF_HANGUL_IN_UNICODE
+
+    const 초성_인덱스 = Math.floor(orderInHangulArea / 588)
+    const 중성_인덱스 = Math.floor((orderInHangulArea - 초성_인덱스 * 588) / 28)
+    const 종성_인덱스 = orderInHangulArea % 28
+
+    if (종성[종성_인덱스]) {
+        return 초성[초성_인덱스] + 중성[중성_인덱스] + 종성[종성_인덱스]
+    }
+
+    return 초성[초성_인덱스] + 중성[중성_인덱스]
+}
+
+export function hangulToPhoneme(word: string) {
+    return word.split('').map(hangulSyllableToPhoneme).join('')
+}
diff --git a/monaco-language-provider/mod.ts b/monaco-language-provider/mod.ts
index 4d37142..3d41384 100644
--- a/monaco-language-provider/mod.ts
+++ b/monaco-language-provider/mod.ts
@@ -1,13 +1,16 @@
-import type { languages } from 'monaco-editor'
+import type { languages, editor } from 'monaco-editor'
 
 import { BaseProvider } from './provider/base.ts'
 import { TokensProvider } from './provider/tokens.ts'
-import { CompletionItemProvider } from './provider/completion-item.ts'
-
-const LANG_ID = 'yaksok'
+import {
+    CompletionItemProvider,
+    setupCompletion,
+} from './provider/completion-item.ts'
+import { LANG_ID } from './const.ts'
 
 export class DalbitYaksokApplier {
     baseProvider: BaseProvider
+
     tokensProvider: TokensProvider
     completionItemProvider: CompletionItemProvider
 
@@ -21,7 +24,6 @@ export class DalbitYaksokApplier {
     }
 
     public async register(languagesInstance: typeof languages) {
-        console.log(this.completionItemProvider)
         languagesInstance.register({ id: LANG_ID })
 
         await new Promise<void>((resolve) =>
@@ -60,7 +62,13 @@ export class DalbitYaksokApplier {
         )
     }
 
+    public configAutocomplete(editorInstance: editor.IStandaloneCodeEditor) {
+        setupCompletion(editorInstance, this.baseProvider)
+    }
+
     updateCode(code: string) {
         this.baseProvider.updateCode(code)
     }
 }
+
+export { LANG_ID }
diff --git a/monaco-language-provider/provider/completion-item.ts b/monaco-language-provider/provider/completion-item.ts
index 60b3b3c..106777c 100644
--- a/monaco-language-provider/provider/completion-item.ts
+++ b/monaco-language-provider/provider/completion-item.ts
@@ -1,33 +1,115 @@
 import { CancellationToken, editor, languages, Position } from 'monaco-editor'
 import { BaseProvider } from './base.ts'
+import { hangulToPhoneme } from '../hangul-to-phoneme.ts'
+
+const COMPLETION_SNIPPETS = createPhonemeIndexedSnippets([
+    {
+        label: '보여주기',
+        kind: languages.CompletionItemKind.Keyword,
+        insertText: '보여주기',
+        detail: '값을 화면에 보여줘요',
+    },
+    {
+        label: '약속',
+        kind: languages.CompletionItemKind.Snippet,
+        insertText: '약속, ',
+        detail: '새 약속을 만들어요',
+    },
+    {
+        label: '결과',
+        kind: languages.CompletionItemKind.Snippet,
+        insertText: '결과: ',
+        detail: '약속의 결과를 설정해요',
+    },
+])
+
+export function setupCompletion(editorInstance: editor.IStandaloneCodeEditor) {
+    editorInstance.onDidChangeModelContent((e) => {
+        const position = editorInstance.getPosition()
+
+        if (!position) {
+            return
+        }
+
+        const model = editorInstance.getModel()
+
+        if (!model) {
+            return
+        }
+
+        let { word } = model.getWordUntilPosition(position)
+        word = word.trim()
+
+        if (word.length === 0) {
+            return
+        }
+
+        const isMatched = COMPLETION_SNIPPETS.some((snippet) =>
+            snippet.phoneme.includes(hangulToPhoneme(word)),
+        )
+
+        if (!isMatched) {
+            return
+        }
+
+        editorInstance.trigger('dalbityaksok', 'hideSuggestWidget', {})
+        editorInstance.trigger('dalbityaksok', 'editor.action.triggerSuggest', {
+            auto: true,
+        })
+    })
+}
 
 export class CompletionItemProvider
     implements languages.CompletionItemProvider
 {
-    constructor(private base: BaseProvider) {}
+    constructor(private _base: BaseProvider) {}
 
     provideCompletionItems(
         model: editor.ITextModel,
         position: Position,
-        context: languages.CompletionContext,
-        token: CancellationToken,
     ): languages.ProviderResult<languages.CompletionList> {
-        console.log({ model, position, context, token, test: '예?' })
+        const { word } = model.getWordUntilPosition(position)
+        const wordPhoneme = hangulToPhoneme(word)
+
+        if (wordPhoneme.length === 0) {
+            return {
+                suggestions: [],
+            }
+        }
+
+        const matchedItems = COMPLETION_SNIPPETS.map((item) => ({
+            score: item.phoneme.startsWith(wordPhoneme)
+                ? 2
+                : item.phoneme.includes(wordPhoneme)
+                ? 1
+                : 0,
+            item,
+        }))
+            .filter(({ score }) => score > 0)
+            .toSorted((a, b) => b.score - a.score)
+            .map(({ item }) => item)
 
         return {
-            suggestions: [
-                {
-                    label: 'Hello',
-                    kind: languages.CompletionItemKind.Text,
-                    insertText: 'Hello',
-                    range: {
-                        startLineNumber: position.lineNumber,
-                        startColumn: position.column - 1,
-                        endLineNumber: position.lineNumber,
-                        endColumn: position.column,
-                    },
+            suggestions: matchedItems.map((item) => ({
+                ...item,
+                range: {
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn: position.column,
+                    endColumn: position.column,
                 },
-            ],
+            })),
         }
     }
 }
+
+function createPhonemeIndexedSnippets<T extends { label: string }>(
+    items: T[],
+): (T & {
+    phoneme: string
+})[] {
+    return items.map((item) => ({
+        ...item,
+        phoneme: hangulToPhoneme(item.label),
+    }))
+}