Merge pull request #30 from terwer/dev

feat:#1 文章详情优化与代码高亮

assets/scss/index.dark.scss

@@ -1,5 +1,52 @@
-html.dark body{
+html.dark body {
   /* 自定义深色背景颜色 */
-  --custom-app-color:#ffffff;
+  --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;
+}
+
+/** dark code */
+html.dark .post-detail-content-box .hljs {
+  color: #ffffff;
+  background-color: #161616 !important;
+  border: 1px solid #ccc !important;
+}
+
+html.dark code {
+  color: #2fd945 !important;
+}
+
+html.dark .hljs-keyword,
+html.dark .hljs-selector-tag,
+html.dark .hljs-built_in,
+html.dark .hljs-name,
+html.dark .hljs-tag {
+  color: #539dc5 !important;
+}
+
+html.dark .post-detail-content-box .hljs-string,
+html.dark .post-detail-content-box .hljs-title,
+html.dark .post-detail-content-box .hljs-section,
+html.dark .post-detail-content-box .hljs-attribute,
+html.dark .post-detail-content-box .hljs-literal,
+html.dark .post-detail-content-box .hljs-template-tag,
+html.dark .post-detail-content-box .hljs-template-variable,
+html.dark .post-detail-content-box .hljs-type,
+html.dark .post-detail-content-box .hljs-addition {
+  color: #2fd945 !important;
 }

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;
 }

components/default/Header.vue

@@ -1,5 +1,7 @@
 <template>
   <header>
+    <header-time/>
+
     <el-page-header :icon="ArrowLeft" title="返回" @click="onBack" v-if="$route.fullPath!='/' && isM">
       <template #content>
         <div class="flex items-center">
@@ -8,10 +10,9 @@
       </template>
     </el-page-header>
 
-    <header-time/>
     <header-menu/>
 
-    <div class="h-6"/>
+    <div class="h-6" v-if="!isM"/>
   </header>
 </template>
 

components/default/HeaderTime.vue

@@ -63,6 +63,9 @@ export default {
 
 <style scoped lang="scss">
 .time {
+  div{
+    padding: 5px 0;
+  }
   margin-bottom: 10px;
 }
 </style>

components/default/HomePostList.vue

@@ -88,69 +88,69 @@ export default {
 </script>
 
 <style lang="scss">
-.el-card__body {
+#postList .el-card__body {
   padding: 0;
 }
 
-.time {
-  font-size: 13px;
+#postList .time {
+  font-size: 12px;
   color: #999;
   line-height: 10px;
   margin-top: 10px;
 }
 
-.post-item {
-  margin: 10px;
+#postList .post-item {
+  margin: 0;
   padding: 10px;
 }
 
-.bottom {
+#postList .bottom {
   margin-top: 13px;
   line-height: 12px;
 }
 
-.read-more {
+#postList .read-more {
   padding: 0;
   margin-top: 15px;
   float: left;
   font-weight: bold;
 }
 
-.read-more:hover {
+#postList .read-more:hover {
   color: #409eff !important;
 }
 
-.image {
+#postList .image {
   width: 100%;
   max-height: 150px;
   display: block;
   padding: 0 20px 0 0;
 }
 
-.clearfix:before,
-.clearfix:after {
+#postList .clearfix:before,
+#postList .clearfix:after {
   display: table;
   content: "";
 }
 
-.clearfix:after {
+#postList .clearfix:after {
   clear: both;
 }
 
-.page {
+#postList .page {
   line-height: 30px;
   font-size: 14px;
 }
 
-.article-ext {
+#postList .article-ext {
   font-size: 14px;
 
   .article-ext-info {
     margin-right: 1.25rem;
   }
 }
 
-.s-keyword-dark {
+#postList .s-keyword-dark {
   color: red;
 }
 </style>

lib/markdownUtil.ts

@@ -1,11 +1,39 @@
-import Showdown from "showdown"
-
-const converter = new Showdown.Converter()
+// import Showdown from "showdown"
+// const converter = new Showdown.Converter({tables: true});
 
 /**
  * 渲染Markdown
  * @param md
  */
 export function renderHTML(md: string) {
-    return converter.makeHtml(md);
+    // @ts-ignore
+    const lute = Lute.New()
+    // const renderers = {
+    //     renderText: (node:any, entering:any) => {
+    //         if (entering) {
+    //             console.log("    render text")
+    //             // @ts-ignore
+    //             return [node.Text() + " via Lute", Lute.WalkContinue]
+    //         }
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     },
+    //     renderStrong: (node:any, entering:any) => {
+    //         entering ? console.log("    start render strong") : console.log("    end render strong")
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     },
+    //     renderParagraph: (node:any, entering:any) => {
+    //         entering ? console.log("    start render paragraph") : console.log("    end render paragraph")
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     }
+    // }
+    // lute.SetJSRenderers({
+    //     renderers: {
+    //         Md2HTML: renderers
+    //     },
+    // })
+    // return converter.makeHtml(md);
+    return lute.MarkdownStr("", md)
 }

lib/platform/metaweblog/metaweblogApi.ts

@@ -146,9 +146,9 @@ export class MetaWeblogApi {
         const postStruct = ret.params.param.value || []
         const post = this.parsePost(postStruct)
 
-        let htmlContent = renderHTML(post.description)
-        htmlContent = prettyHtml(htmlContent)
-        post.description = htmlContent
+        // let htmlContent = renderHTML(post.description)
+        // htmlContent = prettyHtml(htmlContent)
+        // post.description = htmlContent
 
         return Promise.resolve(post)
     }

lib/platform/siyuan/siYuanApiAdaptor.ts

@@ -106,8 +106,9 @@ export class SiYuanApiAdaptor implements IApi {
         const shortDesc = attrs["custom-desc"] || ""
 
         // 渲染Markdown
-        let htmlContent = renderHTML(md.content)
-        htmlContent = prettyHtml(htmlContent)
+        // let htmlContent = renderHTML(md.content)
+        // htmlContent = prettyHtml(htmlContent)
+        let mdContent = md.content
 
         let title = siyuanPost.content || ""
         title = removeTitleNumber(title)
@@ -116,7 +117,7 @@ export class SiYuanApiAdaptor implements IApi {
         let commonPost = new Post()
         commonPost.postid = siyuanPost.root_id || ""
         commonPost.title = title
-        commonPost.description = htmlContent || ""
+        commonPost.description = mdContent || ""
         commonPost.shortDesc = shortDesc || ""
         commonPost.mt_keywords = attrs.tags || ""
         commonPost.isPublished = isPublished

lib/strUtil.ts

@@ -0,0 +1,10 @@
+/**
+ * @function unescapeHTML 还原html脚本 < > & " '
+ * @param a -
+ *            字符串
+ */
+export const unescapeHTML = function (a: string) {
+    a = "" + a;
+    return a.replace(/\&amp;/g, "&").replace(/\&lt;/g, "<")
+        .replace(/\&gt;/g, ">")
+}

nuxt.config.ts

@@ -1,8 +1,19 @@
-import {defineNuxtConfig} from 'nuxt'
+import {defineNuxtConfig} from 'nuxt/config'
 import ElementPlus from 'unplugin-element-plus/vite'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+    app: {
+        head: {
+            script: [
+                {
+                    src: "/lute.min.js",
+                },
+            ],
+        },
+    },
+
+
     // meta
     meta: {
         title: 'Element Plus + Nuxt 3',

package.json

@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "@pinia/nuxt": "^0.4.3",
-    "@types/showdown": "^2.0.0",
     "@types/xmlrpc": "^1.3.7",
     "@unocss/nuxt": "^0.45.29",
     "@vueuse/nuxt": "^9.3.0",
@@ -29,8 +28,8 @@
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "arraybuffer-xml-parser": "^0.6.0",
     "element-plus": "^2.2.15",
+    "highlight.js": "^11.6.0",
     "pinia": "^2.0.23",
-    "showdown": "^2.1.0",
     "vue": "^3.2.40",
     "xmlrpc": "^1.3.2"
   }