Render css

Author: pomber

playground/src/app.jsx

@@ -15,12 +15,16 @@ print("This is Code Hike")
 
 `;
 
+const defaultCss = `.preview-container { 
+  margin: 8px; 
+}`;
+
 function App() {
   const defaultInput = React.useMemo(() => {
     return (
       readHash() || {
         mdx: defaultCode,
-        css: ".preview-container { border: 1px solid blue; }",
+        css: defaultCss,
         config: { lineNumbers: false, showCopyButton: false },
       }
     );

playground/src/index.css

@@ -111,7 +111,6 @@ main {
 .preview {
   min-width: 600px;
   border-left: 2px solid cadetblue;
-  padding: 1em;
   flex: 1;
   min-height: 0;
   overflow: auto;

playground/src/preview.jsx

@@ -53,7 +53,10 @@ function InnerPreview({ input }) {
   // console.log(error);
   return (
     <>
-      {Content ? <Content components={{ CH }} /> : null}
+      <style>{input.css}</style>
+      <div className="preview-container">
+        {Content ? <Content components={{ CH }} /> : null}
+      </div>
       {error ? <div className="preview-error">{error}</div> : null}
     </>
   );