fix posts code rendering

3 files changed, 25 insertions, 9 deletions

diff --git a/public/views/editPost.html b/public/views/editPost.html
index 371b455..16c2bf4 100644
--- a/public/views/editPost.html
+++ b/public/views/editPost.html
@@ -129,9 +129,7 @@
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
         integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
         crossorigin="anonymous"></script>
-    <script>
-       
-    </script>
+    <script src="/static/assets/js/pages/publish.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/views/post.html b/public/views/post.html
index e2f9bdc..7a799bb 100644
--- a/public/views/post.html
+++ b/public/views/post.html
@@ -36,6 +36,11 @@
         pre {
             padding: 10px;
         }
+        img {
+            width: 80%;
+            display: block;
+            margin: 20px 0px;
+        }
     </style>
 </head>
 
@@ -74,6 +79,8 @@
     <script src="/static/assets/js/bootstrap-386.js"></script>
     <script src="/static/assets/js/bootstrap-transition.js"></script>
     <script src="/static/assets/js/bootstrap-collapse.js"></script>
+    <script src="/static/assets/js/marked.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/routes/posts.js b/routes/posts.js
index 2d00202..601b09c 100644
--- a/routes/posts.js
+++ b/routes/posts.js
@@ -4,7 +4,6 @@ const cheerio = require("cheerio");
 const express = require("express");
 const router = express.Router();
 const marked = require("marked");
-const hljs = require("highlight.js");
 
 router.get("/posts/:id", function (req, res) {
   const id = req.params.id;
@@ -26,13 +25,25 @@ router.get("/posts/:id", function (req, res) {
       $("#title").text(post.title);
       // convert content from base64 to utf8
       const content = Buffer.from(post.content, "base64").toString("utf8");
-      // Parse the markdown
-      const parsed = marked.parse(content, {
-        highlight: function (code) {
-          return hljs.highlightAuto(code).value;
+      // Parse the markdown and highlight the code
+      const renderPreview = $("#content");
+      marked.setOptions({
+        renderer: new marked.Renderer(),
+        highlight: function(code, lang) {
+          const hljs = require('highlight.js');
+          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+          return hljs.highlight(code, { language }).value;
         },
+        langPrefix: 'hljs language-',
+        pedantic: false,
+        gfm: true,
+        breaks: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false,
+        xhtml: false,
       });
-      $("#content").html(parsed);
+      renderPreview.html(marked.parse(content));
       $("#publishDate").text(post.publishDate);
       post.tags.forEach((tag) => {
         $("#tags").append(