修改markdown显示样式

package.json

@@ -20,6 +20,7 @@
     "axios": "0.18.1",
     "e-vue-contextmenu": "^0.1.3",
     "element-ui": "2.13.0",
+    "highlightjs-line-numbers.js": "^2.7.0",
     "jquery": "^1.12.4",
     "js-cookie": "2.2.0",
     "lib-flexible": "^0.3.2",
@@ -27,7 +28,6 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "showdown": "^1.9.1",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",
     "vant": "^2.5.0",

public/index.html

@@ -10,6 +10,7 @@
 
     <link rel="icon" href="<%= BASE_URL %>netdisk.png">
     <title><%= webpackConfig.name %></title>
+
   </head>
   <body>
     <noscript>

src/assets/img/ripple-loading.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="margin-right:-2px;display:block;background-repeat-y:initial;background-repeat-x:initial;background-color:rgb(255, 255, 255);animation-play-state:paused" ><circle cx="50" cy="50" r="25.927255630493164" fill="none" stroke="#e90c59" stroke-width="2" opacity="0.5" style="opacity:0.5;animation-play-state:paused" ></circle>
+
+
+<circle cx="50" cy="50" r="0" fill="none" stroke="#46dff0" stroke-width="2" opacity="1" style="animation-play-state:paused" ></circle><!-- generated by https://loading.io/ --></svg>

src/assets/js/mavon-line.js

@@ -0,0 +1,37 @@
+
+import $ from 'jquery'
+import Vue from 'vue'
+export const addCodeBtn = _ => {
+  //markdown代码存放在pre code 标签对中
+  $('pre code').each(function () {
+    let lines = $(this).text().split('\n').length - 1
+    //添加有序列表
+    let $numbering = $('<ul/>').addClass('pre-numbering')
+    //添加复制按钮，此处使用的是element-ui icon 图标
+    let $copy = $('<i title="copy"/>').addClass('el-icon-document-copy code-copy')
+    $(this)
+      .parent()
+      .addClass('code')
+      .append($numbering)
+      .append($copy)
+    for (let i = 0; i <= lines -1 ; i++) {
+      $numbering.append($('<li/>'))
+    }
+  })
+  //监听复制按钮点击事件
+  $('pre .code i.code-copy').click(e => {
+    console.log("copy")
+    let text = $(e.target).siblings('code').text()
+    let element = $('<textarea>' + text + '</textarea>')
+    $('body').append(element)
+    element[0].select()
+    document.execCommand('Copy')
+    element.remove()
+    //这里是自定义的消息通知组件
+    Vue.prototype.$message({
+      message: '代码复制成功',
+      type: 'success',
+      duration: 1000,
+    });
+  })
+}

src/components/backtop/AlBackTop.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-  import Cookies from 'js-cookie'
   import throttle from 'throttle-debounce/throttle';
 
   const cubic = value => Math.pow(value, 3);

src/components/loading/AlLoading.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="loading"></div>
+</template>
+
+<script>
+  export default {
+    name: 'AlLoading'
+  }
+</script>
+
+<style scoped>
+  .loading {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: url('~@/assets/img/Ripple-1s-200px.gif') center center no-repeat #fff;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+  }
+</style>

src/styles/index.scss

@@ -64,3 +64,12 @@ div:focus {
 .app-container {
   padding: 20px;
 }
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}

src/styles/markdown.scss

@@ -1,3 +1,4 @@
+
 /deep/ .right-bj {
   //top: 70px;
   //background: rgba(255, 255, 255, 0.8);
@@ -109,6 +110,7 @@
 
 /deep/ .right-menu > div {
   display: block;
+  border-bottom: 1px dashed #cccccc;
 }
 /deep/ .right-menu > div ul {
   display: block;
@@ -186,7 +188,7 @@
   color: #777;
 }
 /deep/ .right-menu > div.titleList .j-bj {
-  background: #adccf3;
+  background: linear-gradient(to right, #5d9eea, #afcafd);
   position: absolute;
   left: 0;
   top: 0;
@@ -208,3 +210,98 @@
   color: #444;
   font-size: 15px;
 }
+
+/deep/ mark {
+  background: linear-gradient(to right, #FFEB3B, #ff0101a3);
+  color: #000;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  padding: 0.1rem 0.3rem 0.2rem;
+  border-radius: 8px;
+}
+
+/deep/ .markdown-body {
+
+  blockquote {
+    padding: 0.8em 1em;
+    color: #656565;
+    background-color: rgba(119,119,119,0.05);
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-left: .2em solid #0052d4;
+  }
+
+  li+li {
+    margin-top: 0;
+  }
+  pre {
+    padding: 0;
+    overflow: auto;
+    font-size: 1em;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    .code {
+      position: relative;
+      border-radius: 3px;
+      border: 1px solid #C3CCD0;
+      padding-left: 50px!important;
+      background: #282a36!important;
+      code {
+        //position: absolute;
+        line-height: 20px!important;
+        background: unset;
+        opacity: unset;
+        color: unset;
+      }
+      ul.pre-numbering {
+        position: absolute;
+        top: 0;
+        left: -5px;
+        background: #201c29;
+        width: 3em;
+        padding: 0.5em 0 0.5em 0.8em;
+        list-style-type: none;
+        counter-reset: sectioncounter;
+        margin-bottom: 0;
+        li{
+          margin-top: 0!important;
+          &:before{
+            content:counter(sectioncounter) "";
+            counter-increment:sectioncounter;
+            display: inline-block;
+            width: 2.2em;
+            text-align: center;
+            border-right: solid 1px rgba(246, 247, 255, 0.53);
+          }
+        }
+      }
+      i.code-copy{
+        position: absolute;
+        top:0;
+        right: 0;
+        background-color: #464d5e;
+        padding: 3px;
+        margin: 3px 3px 0 0;
+        font-size: 11px;
+        border-radius: inherit;
+        color: #f1f1f1;
+        cursor: pointer;
+        display: none;
+      }
+      &:hover i.code-copy{
+        display: block;
+      }
+    }
+  }
+  code {
+    background: linear-gradient(to right, #5d9eea, #afcafd);
+    color: #000;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    padding: 0.1rem 0.3rem 0.2rem;
+    border-radius: 8px;
+    opacity: 0.9;
+  }
+}
+

src/views/public/article/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div v-wechat-title="pageTitle">
+    <transition name="fade">
+      <al-loading v-if="isLoading"></al-loading>
+    </transition>
     <al-back-top></al-back-top>
     <div class="body-wrapper">
           <el-main class="l_main">
@@ -10,6 +13,7 @@
               :subfield="false"
               :boxShadow="true"
               :toolbarsFlag="false"
+              codeStyle="atom-one-dark"
               defaultOpen="preview"
             />
           </el-main>
@@ -31,13 +35,16 @@
 </template>
 
 <script>
+  import AlLoading from "@/components/loading/AlLoading";
   import AlBackTop from "@/components/backtop/AlBackTop";
   import markdownApi from '@/api/markdown-api'
+  import { addCodeBtn } from '@/assets/js/mavon-line'
   import $ from 'jquery'
   export default {
-    components: { AlBackTop },
+    components: { AlBackTop, AlLoading },
     data() {
       return {
+        isLoading: true,
         pageTitle: "文章列表",
         showList: true,
         toolbars: null,
@@ -48,7 +55,6 @@
       }
     },
     mounted() {
-      console.log(777)
       if(this.$route.query.mark){
         this.getMarkDown()
         this.showList = false
@@ -64,18 +70,6 @@
         }).then((res) => {
           this.pageTitle = res.data.name
           this.content = res.data.contentText
-          this.content.r
-          let n = this.content.replace(/(?:!\[(.*?)\]\((.*?)\))/,(matched,capture1,capture2,capture3,capture4)=>{
-            console.log("matched:"+matched,"capture1:"+capture1,"capture2:"+capture2,"capture3:"+capture3);
-                console.log(capture3)
-                if(!capture2.includes("/file/public")){
-                  return "/file/public/view?relativePath="+path + capture2 +"&userId="+userId;
-                }
-          })
-          console.log(n);
-          // console.log(this.content.match(/(?:!\[(.*?)\]\((.*?)\))/));
-          let path = res.data.path
-          let userId = res.data.userId
           setTimeout(function () {
             // 刷新界面 回到上次滚动条的位置
             if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
@@ -92,18 +86,6 @@
               this.pageTitle = hTag.innerText
             }
 
-            // setTimeout(function () {
-            //   let images = document.querySelector(".el-main").getElementsByTagName("img");
-            //   console.log(images.item(1).getAttribute('src'))
-            //   for (let i = 0; i < images.length/2; i++) {
-            //     const oldSrc = images.item(i).getAttribute('src')
-            //     if(!oldSrc.includes("/file/public")){
-            //       const newPath = "/file/public/view?relativePath="+path + oldSrc +"&userId="+userId;
-            //       images.item(i).src = newPath
-            //     }
-            //   }
-            // },0)
-
             let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>/g);
             if(a && a.length >0 ){
               a = a.splice(a.length/2,a.length)
@@ -140,6 +122,12 @@
               });
             }
 
+            const _this = this
+            setTimeout(function () {
+              addCodeBtn();
+              _this.isLoading = false
+            },100)
+
           })
 
           // const doc = document.querySelector(".v-show-content");

src/views/public/articles/index.vue

@@ -130,10 +130,6 @@
         })
       }
     },
-    destroyed() {
-      $(window).unbind("scroll")
-      $('.j-titleList li').unbind("click");
-    }
   }
 </script>
 <style lang="scss" scoped>