Change default code

Author: pomber

playground/src/app.jsx

@@ -5,16 +5,13 @@ import { Preview } from "./preview";
 const defaultCode = `
 # Hello
 
-This is a markdown editor.
+Edit me.
 
-<CH.Code style={{height: 200}}>
-
-~~~py foo.py
-print "Hello, world!";
+~~~python hello.py
+# mark[16:24]
+print("This is Code Hike")
 ~~~
 
-</CH.Code>
-
 `;
 
 function App() {
@@ -23,17 +20,13 @@ function App() {
   return (
     <div className="app">
       <header>
-        <a
-          className="flex items-center gap-2 mr-auto 2cols:ml-6"
-          href="https://codehike.org"
-        >
+        <a className="code-hike" href="https://codehike.org">
           <CodeHikeLogo />
           <h1>
             Code Hike
             <span>v0.5.1</span>
           </h1>
         </a>
-        <a>Docs</a>
       </header>
       <main>
         <Editor setCode={setCode} defaultCode={defaultCode} />

playground/src/index.css

@@ -27,6 +27,7 @@ header {
   background-color: #111;
   color: #fafafa;
   height: 3.2rem;
+  min-height: 3.2rem;
   border-bottom: 1px solid #444;
 }
 
@@ -44,7 +45,7 @@ header h1 span {
   padding-left: 0.5rem;
 }
 
-header a {
+header a.code-hike {
   color: inherit;
   text-decoration: inherit;
   display: flex;
@@ -77,6 +78,7 @@ main {
   background-color: #111;
   color: #fafafa;
   height: 2rem;
+  min-height: 2rem;
   border-bottom: 1px solid #444;
   display: flex;
   align-items: center;
@@ -108,6 +110,8 @@ main {
   border-left: 2px solid cadetblue;
   padding: 1em;
   flex: 1;
+  min-height: 0;
+  overflow: auto;
 }
 
 .preview-error {