diff --git a/app.py b/app.py
index a323a6e..533ecd8 100644
--- a/app.py
+++ b/app.py
@@ -116,6 +116,7 @@ def post_detail(post_id):
         
     comments = get_comments_for_post(post_id)
     context["used_components"].add("image")
+    context["used_components"].add("code")
 
 
     #processed_content = render_content(post['content'], context=context)
diff --git a/content b/content
index e565d6f..4b04188 160000
--- a/content
+++ b/content
@@ -1 +1 @@
-Subproject commit e565d6fc602e41267c4e2a1fa5d9ee6ee655c26c
+Subproject commit 4b041884ab37f220e04e3dbe5e843e0cc19e2a60
diff --git a/static/css/components/code.css b/static/css/components/code.css
new file mode 100644
index 0000000..8986f1f
--- /dev/null
+++ b/static/css/components/code.css
@@ -0,0 +1,16 @@
+.code-block {
+  display: block;
+  white-space: pre-wrap; /* Allows the code to wrap within the container */
+  word-wrap: break-word; /* Ensures long words break to fit the container */
+  max-width: 100%; /* Ensures the code block doesn't exceed the container's width */
+  padding: 10px; /* Adds padding for better readability */
+  background-color: #f5f5f5; /* Light gray background for contrast */
+  border: 1px solid #ddd; /* Subtle border to distinguish the code block */
+  border-radius: 5px; /* Rounded corners for aesthetics */
+  overflow-x: auto; /* Adds horizontal scroll if necessary */
+}
+
+.code-block .comment {
+  text-indent: 8em;
+  color: #408080;
+}
diff --git a/templates/components/code.html b/templates/components/code.html
new file mode 100644
index 0000000..5c8045e
--- /dev/null
+++ b/templates/components/code.html
@@ -0,0 +1,3 @@
+<pre class="code-block">
+  {{value | safe}}
+</pre>
diff --git a/templates/components/post_renderer.html b/templates/components/post_renderer.html
index cfe5823..b56c9ba 100644
--- a/templates/components/post_renderer.html
+++ b/templates/components/post_renderer.html
@@ -4,7 +4,10 @@
   [] → render blocks #} {% for block in post.content %} {% if block.type ==
   "image" %} {% with src=url_for('content_image_files', filename=block.src) %}
   {% include "components/image.html" %} {% endwith %} {% elif block.type ==
-  "text" %} {{ block.value | safe }} {% endif %} {% endfor %} {% else %} {#
-  content is """...""" → render HTML #} {{ post.content | safe }} {% endif %}
+  "text" %} {{ block.value | safe }} {% endif %}{% elif block.type == "code" %}
+  {% with value=block.src %} {% include "components/code.html" %} {% endwith %}
+  {% elif block.type == "text" %} {{ block.value | safe }} {% endif %} {% endfor
+  %} {% else %} {# content is """...""" → render HTML #} {{ post.content | safe
+  }} {% endif %}
 </article>
 {% if post.template %} {% include post.template %} {% endif %} {% endmacro %}