diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index b13282b..94b5ecb 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -20,6 +20,7 @@ const context = await esbuild.context({
 	external: [
 		"obsidian",
 		"electron",
+		"codemirror",
 		"@codemirror/autocomplete",
 		"@codemirror/collab",
 		"@codemirror/commands",
@@ -45,4 +46,4 @@ if (prod) {
 	process.exit(0);
 } else {
 	await context.watch();
-}
\ No newline at end of file
+}
diff --git a/main.ts b/main.ts
index a3b0ab4..fbedc1c 100644
--- a/main.ts
+++ b/main.ts
@@ -1,4 +1,5 @@
-import { Plugin } from "obsidian";
+import { MarkdownView, Plugin } from "obsidian";
+import { SwarnamMode } from "./mode";
 
 const PREFIX = "swarnam";
 
@@ -49,6 +50,8 @@ function showError(msg: string, root: HTMLElement) {
 
 export default class SwarnamPlugin extends Plugin {
 	async onload() {
+        this.register(SwarnamMode())
+
 		this.registerMarkdownCodeBlockProcessor(
 			"swarnam",
 			(source, el, ctx) => {
diff --git a/mode.ts b/mode.ts
new file mode 100644
index 0000000..333b8ef
--- /dev/null
+++ b/mode.ts
@@ -0,0 +1,65 @@
+import type * as CODE_MIRROR from "codemirror"
+
+declare const CodeMirror: typeof CODE_MIRROR
+
+type State = {
+    curSegment: "html" | "css" | "js"
+    htmlState: any,
+    cssState: any,
+    jsState: any
+}
+
+function advance(state: State) {
+    if(state.curSegment === "html") {
+        state.curSegment = "css"
+    } else if(state.curSegment === "css") {
+        state.curSegment = "js"
+    }
+}
+
+export function SwarnamMode() {
+    CodeMirror.defineMode("swarnam", (config) => {
+        const htmlMode = CodeMirror.getMode(config, "htmlmixed")
+        const cssMode = CodeMirror.getMode(config, "css")
+        const jsMode = CodeMirror.getMode(config, "javascript")
+
+        return {
+            startState(): State {
+                const htmlState = CodeMirror.startState(htmlMode)
+                const cssState = CodeMirror.startState(cssMode)
+                const jsState = CodeMirror.startState(jsMode)
+
+                return {
+                    curSegment: "html",
+                    htmlState,
+                    cssState,
+                    jsState
+                }
+            },
+
+            token(stream, state: State): string | null {
+                let style = null;
+
+                if(stream.string.trim() === "---*---") {
+                    stream.skipToEnd()
+                    advance(state)
+                }else if(state.curSegment === "html") {
+                    style = htmlMode.token(stream, state.htmlState)
+                }else if(state.curSegment === "css") {
+                    style = cssMode.token(stream, state.cssState)
+                }else if(state.curSegment === "js") {
+                    style = jsMode.token(stream, state.jsState)
+                }
+                
+                return style
+            },
+        }
+        }, 
+        //@ts-ignore
+        "html", "css", "javascript"
+    )
+    
+    return () => {
+        delete CodeMirror.modes.swarnam
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index b6cfa54..392c6fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
 	"name": "obsidian-sample-plugin",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "obsidian-sample-plugin",
-			"version": "1.0.0",
+			"version": "1.0.1",
 			"license": "MIT",
 			"devDependencies": {
+				"@types/codemirror": "^5.60.15",
 				"@types/node": "^16.11.6",
 				"@typescript-eslint/eslint-plugin": "5.29.0",
 				"@typescript-eslint/parser": "5.29.0",
@@ -532,9 +533,9 @@
 			}
 		},
 		"node_modules/@types/codemirror": {
-			"version": "5.60.8",
-			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz",
-			"integrity": "sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==",
+			"version": "5.60.15",
+			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
+			"integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
 			"dev": true,
 			"dependencies": {
 				"@types/tern": "*"
@@ -1753,6 +1754,15 @@
 				"@codemirror/view": "^6.0.0"
 			}
 		},
+		"node_modules/obsidian/node_modules/@types/codemirror": {
+			"version": "5.60.8",
+			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz",
+			"integrity": "sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==",
+			"dev": true,
+			"dependencies": {
+				"@types/tern": "*"
+			}
+		},
 		"node_modules/once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
diff --git a/package.json b/package.json
index a9f81ef..1733d10 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 	"author": "",
 	"license": "MIT",
 	"devDependencies": {
+		"@types/codemirror": "^5.60.15",
 		"@types/node": "^16.11.6",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",