fix

src/assets/css/marked.less

@@ -215,11 +215,13 @@
     font-size: 90%;
     text-transform: uppercase;
   }
-  pre {
+  .jupyter_code pre {
     white-space: pre-wrap;
     word-wrap: break-word;
     margin: 0 0 14px;
     overflow-x: auto;
+    background: inherit;
+    border: none;
     code {
       overflow-x: auto;
       white-space: pre;
@@ -390,13 +392,16 @@ p[align="center"] {
 .jupyter_container em strong {
   font-style: italic;
 }
+.jupyter_container p,
 .jupyter_container h1,
 .jupyter_container h2,
 .jupyter_container h3,
 .jupyter_container h4,
 .jupyter_container h5,
 .jupyter_container h6 {
-  // color: #4f4f4f;
+  color: #abb2bf;
+  border: none;
+  margin: 0;
   // margin: 8px 0 16px;
   font-weight: 700;
 }

src/assets/img/stop.svg

+<svg t="1631789535144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2883" width="200" height="200"><path d="M518.86 921.21c-224.81 0-407.71-182.9-407.71-407.71S294 105.79 518.86 105.79s407.71 182.9 407.71 407.71-182.9 407.71-407.71 407.71z m0-754c-190.94 0-346.28 155.34-346.28 346.29s155.33 346.29 346.28 346.29S865.14 704.45 865.14 513.5 709.8 167.22 518.86 167.22z" p-id="2884" fill="#409eff"></path><path d="M392.17 386.81h253.38v253.38H392.17z" p-id="2885" fill="#409eff"></path></svg>
\ No newline at end of file

src/components/cell.vue

 <template>
   <div>
     <div class="jupyter_input">
-      <div v-if="output" class="run_btn" @click="run"></div>
+      <div v-if="output && !loading" class="run_btn" @click="run"></div>
+      <div v-if="output && loading" class="stop_btn"></div>
       <div class="jupyter_code">
         <pre><p v-html="input"></p></pre>
       </div>
@@ -74,7 +75,7 @@ export default defineComponent({
   data() {
     return {
       showResult: false,
-      loading: true
+      loading: false
     };
   },
   methods: {
@@ -127,15 +128,21 @@ export default defineComponent({
   padding-left: 52px;
   box-sizing: border-box;
   position: relative;
-  .run_btn {
+  .run_btn,
+  .stop_btn {
     width: 32px;
     height: 32px;
     position: absolute;
     left: 12px;
     top: 12px;
+  }
+  .run_btn {
     cursor: pointer;
     background: url("../assets/img/run.svg") center / 24px no-repeat;
   }
+  .stop_btn {
+    background: url("../assets/img/stop.svg") center / 30px no-repeat;
+  }
 }
 .jupyter_output {
   background: rgb(58, 65, 79);
@@ -146,9 +153,10 @@ export default defineComponent({
   border-radius: 4px;
   box-sizing: border-box;
   .loading {
-    width: 32px;
-    height: 32px;
-    background: url("../assets/img/loading.svg") center / 24px no-repeat;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    background: url("../assets/img/loading.svg") center / cover no-repeat;
     animation: loading 2s linear infinite;
   }
   :deep(.jupyter_result) {

src/main.ts

@@ -2,18 +2,20 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/css/style.less';
 
+// document.addEventListener('DOMContentLoaded', () => {
+console.log('render jupyter')
+const jupyterLinks = Array.from(document.querySelectorAll('a'))
 
-document.addEventListener('DOMContentLoaded', () => {
-  console.log('render jupyter')
-  const jupyterLinks = Array.from(document.querySelectorAll('a'))
-
-  if (jupyterLinks.length) {
-    jupyterLinks.forEach(item => {
-      const url = item.innerHTML
-      if (url.includes('.ipynb'))
-        createApp(App, {
-          url
-        }).mount(item)
-    })
-  };
-})
+if (jupyterLinks.length) {
+  jupyterLinks.forEach(item => {
+    const url = item.innerHTML
+    if (!url.includes('.ipynb')) return
+    const targetEL = document.createElement('div')
+    item.parentElement?.insertBefore(targetEL, item)
+    item.style.display = 'none'
+    createApp(App, {
+      url
+    }).mount(targetEL)
+  })
+};
+// })

vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import path from 'path'
 
 export default defineConfig({
+  base: './',
   plugins: [vue()],
   resolve: {
     alias: {
@@ -17,6 +18,15 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: 'assets/[name].js',
+        chunkFileNames: 'assets/[name].js',
+        assetFileNames: 'assets/[name].[ext]'
+      }
+    }
   }
 });