Improve codeblocks style

articles/models.py

@@ -60,7 +60,9 @@ class Article(models.Model):
         return html.split("<!--more-->")[0]
 
     def get_formatted_content(self):
-        md = markdown.Markdown(extensions=["extra", CodeHiliteExtension(linenums=True)])
+        md = markdown.Markdown(
+            extensions=["extra", CodeHiliteExtension(linenums=False)]
+        )
         content = self.content
         content = re.sub(r"(\s)#(\w+)", r"\1\#\2", content)
         return md.convert(content)

articles/static/style.css

@@ -4,7 +4,7 @@
     --main2: #575757;
     /*--main3: #7d7d7d;*/
     --background: #ffffff;
-    /*--background2: #f7f7f7;*/
+    --background2: #f7f7f7;
 }
 
 html {
@@ -79,6 +79,19 @@ a:hover, a:focus {
     justify-content: space-between;
 }
 
+code {
+    white-space: pre-wrap;
+}
+
+.codehilite {
+    border-radius: .5ex;
+    background-color: var(--background2);
+}
+
+.codehilite pre {
+    padding: 1em;
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --accent: #226997;
@@ -86,7 +99,7 @@ a:hover, a:focus {
         --main2: #cecece;
         /*--main3: #b1b1b1;*/
         --background: #111111;
-        /*--background2: #575656;*/
+        --background2: #282828;
     }
 
     img {

articles/templates/articles/base.html

@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Home{% endblock %} | Gab's Notes</title>
-    <link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
     <link rel="stylesheet" id="code-light" href="{% static 'code-light.css' %}" type="text/css">
     <link rel="stylesheet" id="code-dark" href="{% static 'code-dark.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
     <script src="{% static 'toggle-dark-mode.js' %}"></script>
     <link rel="alternate" type="application/rss+xml" title="Gab's Notes » Feed" href="{% url 'complete-feed' %}">
 </head>