diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index baebb65cd..e05cb96f2 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -4914,6 +4914,10 @@ body:has(#menu-controller:checked) {
 
 /* Custom */
 
+pre {
+  text-align: left;
+}
+
 .thumbnail {
   min-width: 300px;
   height: 180px;
diff --git a/assets/css/main.css b/assets/css/main.css
index bc69caeb1..fbb6ce8e1 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -339,6 +339,10 @@ body:has(#menu-controller:checked) {
 
 /* Custom */
 
+pre {
+  text-align: left;
+}
+
 .thumbnail {
   min-width: 300px;
   height: 180px;
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 312cf2414..eeb5c04f9 100755
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -5,6 +5,10 @@ description: "This is a demo of the Blowfish theme for Hugo."
 
 This is a demo site built entirely using Blowfish. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
 
+```
+var blowfish = require('blowfish');
+```
+
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
   <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}