Markdown support

main/static/main/main.css

@@ -96,6 +96,10 @@ body {
     line-height: 1.5em;
 }
 
+.text {
+    display: inline-block;
+}
+
 button.show-more {
     background: none;
     border: none;
@@ -117,14 +121,15 @@ button.show-more:hover, button.show-more:focus {
     margin-top: 1em;
 }
 
+.thought-end {
+    overflow: auto;
+    border-bottom: 1px var(--accent-color) solid;
+}
+
 .timestamp {
     float: right;
     font-size: 14px;
     color: var(--accent-color);
-
-    position: relative;
-    bottom: 4px;
-    border-bottom: inset 1px var(--accent-color);
 }
 
 hr.thought-end {
@@ -154,7 +159,23 @@ a {
     text-decoration: none;
 }
 
-footer {
+.text a:visited {
+    color: var(--accent-color);
+}
+.text p, .text pre {
+    padding: 0;
+    margin: 0;
+}
+.text p:not(:first-child) {
+    margin-top: 1em;
+}
+.text pre {
+    background: black;
+    border-radius: 3px;
+    padding: 3px;
+}
+
+/*footer {
     position: fixed;
     bottom: 0;
     background: var(--accent-color);
@@ -162,4 +183,4 @@ footer {
     width: 100%;
     padding: 10px;
     height: 20px;
-}
+}*/

main/templates/whispermaphone/index.html

@@ -21,37 +21,68 @@
     <section class="main-wrap">
     {% for thought in thoughts %}
         <div class="thought">
-            <div class="main-text">{{thought.text}}</div>
-            <div class="extended-text">{{thought.extended_text}}</div>
-            <span class="timestamp">{{thought.posted|date:"r"}}</span>
+            <div class="main">
+                <span class="main-text text">{{thought.text}}</span>
+            </div>
+            <div class="extended-text text">{{thought.extended_text}}</div>
+            <div class="thought-end">
+                <span class="timestamp">{{thought.posted|date:"r"}}</span>
+            </div>
         </div>
-        <hr class="thought-end">
-        {% endfor %}
+    {% endfor %}
     </section>
 
 <!--    <footer>Copyright Matthias @2020{% if authenticated %}-->
 <!--        <a href="/post" style="color: var(&#45;&#45;text-color); margin-left: 100px; text-decoration: none">POST</a>-->
 <!--    {% endif %}</footer>-->
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
+
+    <!--Remarkable UMD bundle, includes linkify and Remarkable in the global remarkable-->
+    <script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js"></script>
+
     <script>
+        // Remarkable ES6 module
+        // import { Remarkable } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/index.browser.min.js";
+        // import { linkify } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/linkify.js";
+
+        const md = new remarkable.Remarkable({
+            html: true, breaks: true, typographer: true,
+            highlight: function (str, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    return hljs.highlight(lang, str).value;
+                }
+                return hljs.highlightAuto(str).value;
+            }
+        }).use(remarkable.linkify);
+
         const els = document.querySelectorAll(".thought");
         for (let el of els) {
             const extended = el.querySelector(".extended-text");
+            const mainText = el.querySelector(".main-text");
+
+            //Hide extended text
             extended.classList.add("hidden");
+            //Add button to show extended text
             if (extended.textContent.length) {
-                const text = el.querySelector(".main-text");
+                const main = el.querySelector(".main");
                 const showMoreButton = document.createElement("button");
                 showMoreButton.appendChild(document.createTextNode("Show More"));
                 showMoreButton.classList.add("show-more");
                 showMoreButton.addEventListener("click", evt => {
-                    // Remove our-self
+                    // Remove ourself
                     showMoreButton.parentNode.removeChild(showMoreButton);
                     // Show the extended text
                     extended.classList.remove("hidden");
                 })
-                text.appendChild(showMoreButton);
+                main.appendChild(showMoreButton);
             }
 
+            //Markdown + highlight
+            extended.innerHTML = md.render(extended.innerHTML);
+            mainText.innerHTML = md.render(mainText.innerHTML);
+
             const timestampEl = el.querySelector(".timestamp");
             const time = new Date(timestampEl.textContent);
             const ampm = time.getHours() >= 12 ? "pm" : "am";