hljs.

src/learn/index.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import Loading from "./components/Loading.vue"
 import Monaco from "../shared/Monaco.vue"
+import raw from "./step-1/1.c?raw"
 
 const route = useRoute()
-const step = route.hash.replace("#step-", "") || "1"
+const id = route.hash.replace("#step-", "") || "1"
 
-const Md = defineAsyncComponent({
-  loader: () => import(`./step-${step}/index.md`),
-  loadingComponent: Loading,
-})
+const Md = defineAsyncComponent(() => import(`./step-${id}/index.md`))
 
-const code = ref("")
+const code = ref(raw)
 
 function change(value: string) {
   code.value = value
@@ -21,6 +18,10 @@ function change(value: string) {
   <n-grid :cols="2">
     <n-gi>
       <Md />
+      <n-space justify="space-between">
+        <n-button text type="primary">上一步</n-button>
+        <n-button text type="primary">下一步</n-button>
+      </n-space>
     </n-gi>
     <n-gi>
       <Monaco :value="code" @change="change" />