diff --git a/nimwcpkg/constants/_htmls.nim b/nimwcpkg/constants/_htmls.nim
index a0c934c8b..750637767 100644
--- a/nimwcpkg/constants/_htmls.nim
+++ b/nimwcpkg/constants/_htmls.nim
@@ -396,10 +396,13 @@ const
             <p>Can you write YAML? then you can code a web app and a NimWC plugin!</p>
             <br>
             <p><b>Keep It Simple</b><br>this is how a <i>Hello World</i> looks like:</p>
-            <textarea rows=3 readonly disabled >
-            routes:
-              get "/yourUrlHere":
-                resp "Hello World"</textarea>
+            <div id="code">
+              <span class="route1">routes:</span>
+              <br>
+              <span class="route2">get "/yourUrlHere":</span>
+              <br>
+              <span class="route3">resp "Hello World"</span>
+            </div>
             <br>
             <small><a href="https://github.com/juancarlospaco/nim-presentation-slides/blob/master/ejemplos/basico/jester/hello_web_3.nim#L38">A more complete example</a></small>
           </div>
@@ -560,10 +563,13 @@ const
             <p>Can you write YAML? then you can code a web app and a NimWC plugin!</p>
             <br>
             <p><b>Keep It Simple</b><br>this is how a <i>Hello World</i> looks like:</p>
-            <textarea rows=3 readonly disabled >
-            routes:
-              get "/yourUrlHere":
-                resp "Hello World"</textarea>
+            <div id="code">
+              <span class="route1">routes:</span>
+              <br>
+              <span class="route2">get "/yourUrlHere":</span>
+              <br>
+              <span class="route3">resp "Hello World"</span>
+            </div>
             <br>
             <small><a href="https://github.com/juancarlospaco/nim-presentation-slides/blob/master/ejemplos/basico/jester/hello_web_3.nim#L38">A more complete example</a></small>
           </div>
diff --git a/public/css/style.css b/public/css/style.css
index fef284ba9..ba358b28a 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -700,6 +700,24 @@ _________________*/
   border-radius: .2rem;
   word-break: break-all;
 }
+#frontpage #code {
+  background-color: #d0d0d0;
+  border-radius: 4px;
+  border: 1px solid black;
+  color: black;
+  font-size: 0.9rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 200px;
+  padding: 8px;
+  text-align: left;
+}
+#frontpage #code .route2 {
+  padding-left: 15px;
+}
+#frontpage #code .route3 {
+  padding-left: 30px;
+}
 @media only screen and (max-width: 768px) {
   #frontpage .title {
     margin-top: 50px;