feat: render markdown in posts and comments

open-isle-cli/src/components/CommentItem.vue

@@ -15,9 +15,7 @@
         <div class="user-name">{{ comment.userName }}</div>
         <div class="post-time">{{ comment.time }}</div>
       </div>
-      <div class="info-content-text">
-        {{ comment.text }}
-      </div>
+      <div class="info-content-text" v-html="renderMarkdown(comment.text)"></div>
       <div class="article-footer-container">
         <div class="reactions-container">
           <div class="reactions-viewer">
@@ -60,6 +58,7 @@
 <script>
 import { ref } from 'vue'
 import CommentEditor from './CommentEditor.vue'
+import { renderMarkdown } from '../utils/markdown'
 const CommentItem = {
   name: 'CommentItem',
   props: {
@@ -94,7 +93,7 @@ const CommentItem = {
       })
       showEditor.value = false
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, renderMarkdown }
   }
 }
 CommentItem.components = { CommentItem, CommentEditor }

open-isle-cli/src/utils/markdown.js

@@ -0,0 +1,11 @@
+import MarkdownIt from 'markdown-it'
+
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true
+})
+
+export function renderMarkdown(text) {
+  return md.render(text || '')
+}

open-isle-cli/src/views/PostPageView.vue

@@ -30,38 +30,7 @@
             <div class="user-name">Nagisa77</div>
             <div class="post-time">{{ postTime }}</div>
           </div>
-          <div class="info-content-text">
-            # 📢 社区公告
-
-            是的，L 站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不 断壮大和涌入新的血液是一件好事。  
-            
-            但我每天都要问问自己：**这里面有没有问题？真的完全是好事吗？**  
-            在这个过程中我嗅到了一丝危险的气息——有人试图**同质化**这里，把这里当作互联网上**另一个可以随意发泄情绪**的地方！甚至试图占领舆论高地，把这里堂而皇之地变成**另一个垃圾场**。
-            
-            > 这是要万分警惕并坚决予以打击的！
-            
-            L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的佬友在这里得到放松。哪怕只有一刻能放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息与治愈。
-            
-            我和管理团队始终**坚定这一点，丝毫不会放松**！  
-            千里之堤，溃于蚁穴——如果任由戾气蔓延、争端四起，最终这里的愿景将会完全破产。**有病要医，不是同路人不必强行融合。**任何把戾气带来这里、试图在此建立另一个互联网垃圾场的人，**都是不受欢迎的，都要被驱逐出社区。**
-            
-            请好好说话，友善交流！我们完全支持并鼓励友好交流与分享，每个人都可以。**键盘**是你与人沟通、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
-            
-            ---
-            
-            ## 🚫 自本公告发布之日起，我们将严肃处理以下 3 类发言：
-            
-            1. **傲慢轻蔑回复**  
-            2. **阴阳怪气回复**  
-            3. **攻击谩骂回复**
-            
-            如有以上发言，我们将视言论破坏程度采取（但不限于）**删帖、临时封禁、永久封禁**等举措。
-            
-            > 请各位佬友积极监督，感谢你们为共建美好社区做出的贡献！  
-            > **请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。**
-            
-            **持续时间：** *直至最后一个不会好好说话的账号持有者被请出社区为止。*
-          </div>
+          <div class="info-content-text" v-html="renderMarkdown(postContent)"></div>
 
           <div class="article-footer-container">
             <div class="reactions-container">
@@ -118,11 +87,42 @@
 import { ref, computed, onMounted } from 'vue'
 import CommentItem from '../components/CommentItem.vue'
 import CommentEditor from '../components/CommentEditor.vue'
+import { renderMarkdown } from '../utils/markdown'
 
 export default {
   name: 'PostPageView',
   components: { CommentItem, CommentEditor },
   setup() {
+    const postContent = ref(`# 📢 社区公告
+
+是的，L 站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。
+
+但我每天都要问问自己：**这里面有没有问题？真的完全是好事吗？**
+在这个过程中我嗅到了一丝危险的气息——有人试图**同质化**这里，把这里当作互联网上**另一个可以随意发泄情绪**的地方！甚至试图占领舆论高地，把这里堂而皇之地变成**另一个垃圾场**。
+
+> 这是要万分警惕并坚决予以打击的！
+
+L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的佬友在这里得到放松。哪怕只有一刻能放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息与治愈。
+
+我和管理团队始终**坚定这一点，丝毫不会放松**！
+千里之堤，溃于蚁穴——如果任由戾气蔓延、争端四起，最终这里的愿景将会完全破产。**有病要医，不是同路人不必强行融合。**任何把戾气带来这里、试图在此建立另一个互联网垃圾场的人，**都是不受欢迎的，都要被驱逐出社区。**
+
+请好好说话，友善交流！我们完全支持并鼓励友好交流与分享，每个人都可以。**键盘**是你与人沟通、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
+
+---
+
+## 🚫 自本公告发布之日起，我们将严肃处理以下 3 类发言：
+
+1. **傲慢轻蔑回复**
+2. **阴阳怪气回复**
+3. **攻击谩骂回复**
+
+如有以上发言，我们将视言论破坏程度采取（但不限于）**删帖、临时封禁、永久封禁**等举措。
+
+> 请各位佬友积极监督，感谢你们为共建美好社区做出的贡献！
+> **请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。**
+
+**持续时间：** *直至最后一个不会好好说话的账号持有者被请出社区为止。*`)
     const tags = ref(['AI', 'Python', 'Java'])
     const comments = ref([
       {
@@ -241,6 +241,7 @@ export default {
     })
 
     return {
+      postContent,
       tags,
       comments,
       postTime,
@@ -251,7 +252,8 @@ export default {
       totalPosts,
       postComment,
       onSliderInput,
-      onScroll: updateCurrentIndex
+      onScroll: updateCurrentIndex,
+      renderMarkdown
     }
   }
 }