添加markdown渲染

blog/blog.html → blog.html

@@ -8,8 +8,11 @@
     <meta name="description" content="bujijam的博客">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.7.0/hint.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/dracula.min.css">
     <link rel="icon" href="https://s1.ax1x.com/2023/04/16/p998LGQ.png">
-    <link rel="stylesheet" href="./style.css" type="text/css">
+    <link rel="stylesheet" href="./blog/style.css" type="text/css">
+    <script src="./blog/remarkable.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <title>bujijam的博客</title>
 </head>
 
@@ -27,7 +30,7 @@ <h1 class="blog-title">这是标题</h1>
                     <p class="blog-excerpt">开学快乐开学快乐开学快乐开学快乐开学快乐开学快乐开学快乐开学快乐</p>
                     <p class="pub-date"><time datetime="2024-08-31">2024-09-01</time></p>
                 </div>
-                <img class="index-img" src="chicken.png" alt="图片">
+                <img class="index-img" src="./blog/chicken.png" alt="图片">
             </header>
             <details class="blog-article">
                 <summary>阅读全文</summary>
@@ -52,11 +55,8 @@ <h1 class="blog-title">这是标题</h1>
             </header>
             <details class="blog-article">
                 <summary>阅读全文</summary>
-                <p>这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文
-                </p>
-                <p>是全文哦！</p>
-                <h2>是二级标题哦！</h2>
-                <p>文字！</p>
+                <div class="markdown-content" style="display: none;"># hi</div>
+                <div class="rendered-content"></div>
                 <button class="toggle-button">折叠</button>
             </details>
             <hr>
@@ -72,19 +72,5 @@ <h2>是二级标题哦！</h2>
     </div>
 
 </body>
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        var detailsElements = document.querySelectorAll('.blog-article');
-        detailsElements.forEach(function (details) {
-            // 在每个details元素内部查找.toggle-button  
-            var button = details.querySelector('.toggle-button');
-            if (button) {
-                button.addEventListener('click', function (event) {
-                    // 切换details的open属性  
-                    details.open = !details.open;
-                });
-            }
-        });
-    });
-</script>
+<script src="./blog/blog.js"></script>
 </html>

blog/blog.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var detailsElements = document.querySelectorAll('.blog-article');
+    detailsElements.forEach(function (details) {
+        // 在每个details元素内部查找.toggle-button  
+        var button = details.querySelector('.toggle-button');
+        if (button) {
+            button.addEventListener('click', function (event) {
+                // 切换details的open属性  
+                details.open = !details.open;
+            });
+        }
+    });
+});
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    var md = new remarkable.Remarkable();
+    var markdownElements = document.querySelectorAll('.markdown-content');
+
+    markdownElements.forEach(function (element, index) {
+        var markdownContent = element.innerHTML;
+        var htmlContent = md.render(markdownContent);
+
+        var renderedContainer = element.nextElementSibling;
+        if (renderedContainer && renderedContainer.classList.contains('rendered-content')) {
+            renderedContainer.innerHTML = htmlContent;
+        }
+    });
+});