feat:#1 支持Markdown表格

terwer · Oct 10, 2022 · 2651b7d · 2651b7d
1 parent 551c5cf
commit 2651b7d
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 4 deletions.
diff --git a/assets/scss/index.dark.scss b/assets/scss/index.dark.scss
@@ -2,4 +2,20 @@ html.dark body{
   /* 自定义深色背景颜色 */
   --custom-app-color:#ffffff;
   --custom-app-bg-color: #000000;
+}
+
+/* dark table */
+html.dark .post-detail-content-box table {
+  color: #ffffff;
+  border-color: #ccc;
+}
+
+html.dark .post-detail-content-box table th {
+  border-color: #ccc;
+  background-color: #161616;
+}
+
+html.dark .post-detail-content-box table td {
+  border-color: #ccc;
+  background-color: #161616;
 }
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -76,4 +76,32 @@ https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
 
 .el-menu-item > div {
   margin-left: -20px !important;
+}
+
+
+/* table */
+.post-detail-content-box table {
+  font-family: verdana, arial, sans-serif;
+  font-size: 14px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.post-detail-content-box table th {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #dedede;
+}
+
+.post-detail-content-box table td {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #ffffff;
 }
diff --git a/lib/markdownUtil.ts b/lib/markdownUtil.ts
@@ -1,6 +1,6 @@
 import Showdown from "showdown"
 
-const converter = new Showdown.Converter()
+const converter = new Showdown.Converter({tables: true});
 
 /**
  * 渲染Markdown

diff --git a/pages/post/[postid].vue b/pages/post/[postid].vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="post" class="post-default">
+  <div id="post" class="post-detail-content-box">
     <!-- 导航 -->
     <!--
     <el-breadcrumb separator="/">
@@ -21,7 +21,24 @@
       <input type="hidden" :value="postObj.postid"/>
     </div>
 
+    <!--
+    <div v-if="postObj.tagArray">
+      <NuxtLink
+          v-for="tagItem in postObj.tagArray"
+          :key="tagItem.tag"
+          :to="'/tag/' + tagItem.tag"
+      >
+        <el-tag :type="tagItem.color" class="post-tag">
+          {{ tagItem.tag }}
+        </el-tag>
+      </NuxtLink>
+    </div>
+    -->
+
     <!-- 文章详情 -->
+    <!--
+      v-hilight
+    -->
     <div
         id="postContent"
         v-html="postObj.description"
@@ -78,7 +95,7 @@ export default {
   min-width: 600px !important;
 }
 
-#post-detail-body h1{
+#post-detail-body h1 {
   padding: 0;
 }
 
@@ -88,7 +105,7 @@ export default {
   padding: 10px 0;
 }
 
-#postTitle .title-text{
+#postTitle .title-text {
   font-size: 32px;
   color: var(--el-color-primary);
 }