fix multiple lines output and color scheme

Author: ngxson

examples/server/public/index.html.gz

@@ -36,7 +36,7 @@ const PyodideWrapper = {
     if (result) {
       stdOutAndErr.push(result.toString());
     }
-    return stdOutAndErr.join('');
+    return stdOutAndErr.join('\n');
   },
 };
 
@@ -102,9 +102,11 @@ export default function CanvasPyInterpreter() {
                 {running ? 'Running...' : 'Run'}
               </button>
             </div>
-            <pre className="bg-slate-900 rounded-md grow text-gray-200 p-3 whitespace-pre-wrap overflow-auto">
-              {output}
-            </pre>
+            <textarea
+              className="textarea textarea-bordered h-full dark-color"
+              value={output}
+              readOnly
+            ></textarea>
           </div>
         </div>
       </div>

examples/server/webui/src/components/CanvasPyInterpreter.tsx

@@ -45,13 +45,19 @@
 /* Highlight.js */
 [data-color-scheme='light'] {
   @include meta.load-css('highlight.js/styles/stackoverflow-light');
+  .dark-color {
+    @apply bg-base-content text-base-100;
+  }
 }
 [data-color-scheme='dark'] {
   @include meta.load-css('highlight.js/styles/stackoverflow-dark');
 }
 [data-color-scheme='auto'] {
   @media (prefers-color-scheme: light) {
     @include meta.load-css('highlight.js/styles/stackoverflow-light');
+    .dark-color {
+      @apply bg-base-content text-base-100;
+    }
   }
   @media (prefers-color-scheme: dark) {
     @include meta.load-css('highlight.js/styles/stackoverflow-dark');