add codemirror extensions; style

package-lock.json

@@ -8,6 +8,8 @@
       "name": "instacode-app",
       "version": "0.0.0",
       "dependencies": {
+        "@codemirror/lang-javascript": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.1.0",
         "codemirror": "^6.0.1",
         "normalize.css": "^8.0.1",
         "vue": "^3.2.41",
@@ -60,6 +62,20 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.1.tgz",
+      "integrity": "sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/language": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.0.tgz",
@@ -98,6 +114,17 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
       "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
+      "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/view": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
@@ -247,6 +274,15 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/javascript": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
+      "integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
+      "dependencies": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/lr": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
@@ -1983,6 +2019,20 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "@codemirror/lang-javascript": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.1.tgz",
+      "integrity": "sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
     "@codemirror/language": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.0.tgz",
@@ -2021,6 +2071,17 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
       "integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
     },
+    "@codemirror/theme-one-dark": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
+      "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "@codemirror/view": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
@@ -2145,6 +2206,15 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "@lezer/javascript": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
+      "integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
+      "requires": {
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "@lezer/lr": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",

package.json

@@ -8,6 +8,8 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/theme-one-dark": "^6.1.0",
     "codemirror": "^6.0.1",
     "normalize.css": "^8.0.1",
     "vue": "^3.2.41",

src/assets/main.css

@@ -1 +1,9 @@
 @import 'normalize.css';
+
+html, body {
+  height:  100%;
+}
+
+#app {
+  height:  100%;
+}

src/views/HomeView.vue

@@ -7,8 +7,8 @@ const worker = new Worker();
 
 import { defineComponent, shallowRef } from 'vue'
 import { Codemirror } from 'vue-codemirror'
-// import { javascript } from '@codemirror/lang-javascript'
+import { javascript } from '@codemirror/lang-javascript'
-// import { oneDark } from '@codemirror/theme-one-dark'
+import { oneDark } from '@codemirror/theme-one-dark'
 
 export default defineComponent({
   components: {
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   setup() {
     const code = `console.log('Hello, world!')`;
-    const extensions = [];//[javascript(), oneDark]
+    const extensions = [javascript(), oneDark]
 
     // Codemirror EditorView instance ref
     const view = shallowRef()
@@ -47,12 +47,18 @@ export default defineComponent({
 
 </script>
 
+<style scoped>
+main {
+  height: 100%;
+}
+</style>
+
 <template>
   <main>
     <codemirror
       v-model="code"
       placeholder="Code goes here..."
-      :style="{ height: '400px' }"
+      :style="{ height: '100%' }"
       :autofocus="true"
       :indent-with-tab="true"
       :tab-size="2"