diff --git a/package.json b/package.json
index 5914d42..0ff0161 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "Other"
   ],
   "activationEvents": [],
-  "main": "./out/extension.js",
+  "main": "./out/extension.cjs",
   "contributes": {
     "commands": [
       {
@@ -20,6 +20,7 @@
       }
     ]
   },
+  "type": "module",
   "scripts": {
     "vscode:prepublish": "npm run compile",
     "compile": "tsc -p ./",
diff --git a/src/extension.ts b/src/extension.cts
similarity index 80%
rename from src/extension.ts
rename to src/extension.cts
index b42f117..5d46743 100644
--- a/src/extension.ts
+++ b/src/extension.cts
@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import { createWebview, updateStyle } from './viewer';
+import { createWebview, updateStyle } from './viewer.cjs';
 
 export function activate(context: vscode.ExtensionContext) {
     const disposable = vscode.commands.registerCommand(
@@ -8,7 +8,11 @@ export function activate(context: vscode.ExtensionContext) {
             const target = vscode.window.activeTextEditor?.document;
             const panel = createWebview();
 
-            updateStyle(panel.webview, target?.getText() ?? '');
+            setTimeout(() => {
+                // take interval to wait webview rendered
+                updateStyle(panel.webview, target?.getText() ?? '');
+            }, 500);
+
             panel.onDidChangeViewState(() => {
                 updateStyle(panel.webview, target?.getText() ?? '');
             });
diff --git a/src/viewer.ts b/src/viewer.cts
similarity index 100%
rename from src/viewer.ts
rename to src/viewer.cts