3 files changed, 15 insertions, 5 deletions
diff --git a/tools/gui/resources/web/definitions.js b/tools/gui/resources/web/definitions.js
index d1313d4..466cf59 100644
--- a/tools/gui/resources/web/definitions.js
+++ b/tools/gui/resources/web/definitions.js
@@ -215,9 +215,11 @@ let Examples = {
         ajax("/example/file", {path: node.path}).done(data => {
           var codeBrowser = $("#code-browser");
           codeBrowser.show();
-          codeBrowser.html(data);
+          codeBrowser.html(node.name.endsWith(".md") ? data : ("<pre><code>" + data + "</code></pre>"));
         });
       });
     }
+    if (node.name.toLowerCase() == "readme.md")
+      div.click();
   }
 };
diff --git a/tools/gui/resources/web/index.html b/tools/gui/resources/web/index.html
index 100c65b..9bf76f8 100644
--- a/tools/gui/resources/web/index.html
+++ b/tools/gui/resources/web/index.html
@@ -52,7 +52,7 @@
     <div id="examples"></div>
     <div id="example-browser">
       <div id="file-browser"></div>
-      <pre id="code-browser"><code></code></pre>
+      <div id="code-browser"></div>
     </div>
     <hr>
     <button id="copy-project-btn" onclick="copyProject()">copy example</button>
diff --git a/tools/gui/resources/web/styles.css b/tools/gui/resources/web/styles.css
index 759dd06..6e2bc8e 100644
--- a/tools/gui/resources/web/styles.css
+++ b/tools/gui/resources/web/styles.css
@@ -31,7 +31,10 @@ hr {
 }
 
 pre {
-  margin: 0 0 1em 0;
+  margin: 0;
+  font-size: 1rem;
+  background: #000;
+  padding: 0.2em;
 }
 
 button, .small-btn {
@@ -218,6 +221,7 @@ button, .entry {
 #example-browser {
   width: 100%;
   float: left;
+  margin-bottom: 1em;
 }
 
 #file-browser {
@@ -245,17 +249,21 @@ button, .entry {
 }
 
 .browser-node > div {
-  margin-left: 2em;
+  margin-left: 1em;
 }
 
 .file-node {
   cursor: pointer;
 }
 
-.file-node:hover, .selected-node {
+.file-node:hover {
   color: #dc322f;
 }
 
+.selected-node {
+  color: #27b3d9;
+}
+
 .even-node {
   background: #073642;
 }