After attempting some kind of automated code/display view I just went with hand placing a component in each file which only took 20 minutes. It took me one week to figure out the automated way, and it ended up being slow and clunky.

public/global.css

@@ -178,7 +178,7 @@ nav ul li ul li a {
 /* Typography */
 code,
 samp {
-    background-color: var(--color-accent);
+    background-color: var(--color-bg-secondary);
     border-radius: var(--border-radius);
     color: var(--color-text);
     display: inline-block;
@@ -186,6 +186,10 @@ samp {
     padding: 0 0.5rem;
 }
 
+code {
+  font-size: 1.3em;
+}
+
 details {
     margin: 1.3rem 0;
 }
@@ -219,14 +223,12 @@ p {
 
 pre {
     margin: 1rem 0;
-    max-width: var(--width-card-wide);
     padding: 1rem 0;
 }
 
 pre code,
 pre samp {
     display: block;
-    max-width: var(--width-card-wide);
     padding: 0.5rem 2rem;
     white-space: pre-wrap;
 }

public/index.html

@@ -9,6 +9,7 @@
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='/prism.css'>
 
 	<script defer src='/build/bundle.js'></script>
 </head>

src/components/CodeView.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { onMount } from 'svelte';
+  export let source = "";
+  let code = "";
+
+  onMount(() => {
+    fetch(source) 
+      .then(resource => resource.text())
+      .then(data => code = data);
+  });
+</script>
+
+
+<style>
+
+</style>
+
+
+<pre>
+<code>
+{code}
+</code>
+</pre>
+

src/components/Modal.svelte

@@ -18,20 +18,20 @@
     bottom: 0;
     z-index: 10;
     background: rgba(244,244,244,0.75);
+    padding: 0px;
   }
 
   modal-content {
     flex-direction: column;
     background: white;
-    box-shadow: 4px 4px 4px var(--color-shadow-dark);
     border: 1px solid var(--color-accent);
     border-radius: 5px;
-    max-height: 50vh;
+    max-height: 75vh;
-    min-height: 50vh;
+    min-height: 75vh;
-    max-width: 50vh;
+    max-width: 75vh;
     width: 100%;
     z-index: 20;
-    padding: 0.5rem;
+    padding: 0px;
   }
 </style>
 

src/demos/Google.svelte

@@ -1,6 +1,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 </script>
 
 <style>
@@ -100,3 +101,5 @@
   </search>
 
 </content>
+
+<CodeView source="/code/Google.svelte" />

src/demos/Instagram.svelte

@@ -1,6 +1,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 
   let posts = [1,2,3,4,5,6,7,8,9,10];
   let pins = [1,2,3,4];
@@ -141,3 +142,5 @@
   {/each}
   </posts>
 </content>
+
+<CodeView source="/code/Instagram.svelte" />

src/demos/Login.svelte

@@ -1,3 +1,7 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+
+</script>
 <style>
   content {
     display: flex;
@@ -22,3 +26,4 @@
 </content>
 
 
+<CodeView source="/code/Login.svelte" />

src/demos/Pinterest.svelte

@@ -2,6 +2,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 
   let samples = [1,2,3];
   let lanes = [1,2,3,4,5];
@@ -179,3 +180,5 @@ pins lane {
     </pins>
   {/if}
 </content>
+
+<CodeView source="/code/Pinterest.svelte" />

src/demos/Twitter.svelte

@@ -1,13 +1,9 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
-  import CodeBubble from '../components/CodeBubble.svelte';
+  import { onMount } from 'svelte';
-  import Modal from '../components/Modal.svelte';
   let tweets = [1,2,3,4,5];
-  let modal_visible = true;
+  import CodeView from '../components/CodeView.svelte';
-
-  const toggle_modal = () => modal_visible = !modal_visible;
-
 </script>
 
 <style>
@@ -318,12 +314,7 @@
         </ul>
       </aside>
     </section>
-
   </right>
 </content>
 
-<CodeBubble url="https://git.learnjsthehardway.com/" on:click={ toggle_modal } />
+<CodeView source="/code/Twitter.svelte" />
-<Modal visible={modal_visible} on:click={ toggle_modal }>
-  <h1>Hi! This is Cool!</h1>
-</Modal>
-

src/demos/XorAcademy.svelte

@@ -2,6 +2,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 
   let posts = [1,2,3,4,5,6,7,8,9];
   let related = [1,2,3,4];
@@ -153,3 +154,5 @@
   {/each}
   </posts>
 </content>
+
+<CodeView source="/code/XorAcademy.svelte" />

src/demos/XorAcademyWatch.svelte

@@ -2,6 +2,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 
   let cards = [1,2,3,4];
 </script>
@@ -239,3 +240,5 @@
     </lower>
   </main>
 </content>
+
+<CodeView source="/code/XorAcademyWatch.svelte" />

src/demos/Youtube.svelte

@@ -1,6 +1,7 @@
 <script>
   import { link } from 'svelte-spa-router';
   import Icon from '../components/Icon.svelte';
+  import CodeView from '../components/CodeView.svelte';
 
   let cards = [1,2,3,4];
 
@@ -277,3 +278,5 @@
     </right>
   </main>
 </content>
+
+<CodeView source="/code/Youtube.svelte" />

src/demos/index.svelte

@@ -79,3 +79,4 @@
   <figcaption>Pinterest</figcaption>
 </figure> 
 </images>
+