code template

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)

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;
+}

templates/components/code.html

@@ -0,0 +1,3 @@
+<pre class="code-block">
+  {{value | safe}}
+</pre>

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 %} {#
+  "text" %} {{ block.value | safe }} {% endif %}{% elif block.type == "code" %}
-  content is """...""" → render HTML #} {{ post.content | safe }} {% endif %}
+  {% 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 %}