fix:md样式优化

mao888 · May 2, 2023 · 754438a · 754438a
1 parent 45a0224
commit 754438a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/bluebell_frontend/package-lock.json b/bluebell_frontend/package-lock.json
diff --git a/bluebell_frontend/src/main.js b/bluebell_frontend/src/main.js
@@ -8,6 +8,8 @@ import 'element-ui/lib/theme-chalk/index.css'
 import '../node_modules/free-min/dist/Free'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
+import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
+
 
 Vue.use(ElementUI);
 Vue.use(mavonEditor)

diff --git a/bluebell_frontend/src/views/Content.vue b/bluebell_frontend/src/views/Content.vue
@@ -13,7 +13,7 @@
         </div>
         <div class="l-container">
           <h4 class="con-title">{{ post.title }}</h4>
-          <div class="con-info" v-html="post.content"></div>
+          <div class="con-info markdown-body" v-html="post.content"></div>
         </div>
       </div>
       <!-- 评论区 -->
@@ -35,7 +35,6 @@
   </div>
 </template>
 <script>
-import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
 import Comment from '../components/Comment.vue';
 import Vue from 'vue';
 export default {
@@ -181,6 +180,13 @@ export default {
         .con-info {
           margin: 25px 0;
           line-height: 2;
+          code{
+            overflow-x: scroll !important;
+            ::-webkit-scrollbar {
+              width: 10px;
+              height: 10px;
+            }
+          }
         }
 
         .con-cover {

diff --git a/bluebell_frontend/src/views/Publish.vue b/bluebell_frontend/src/views/Publish.vue
@@ -21,7 +21,7 @@
         </div>
         <!---此处放置富文本--->
         <div class="post-text-con">
-          <mavon-editor style="min-height:400px;" v-model="content" />
+          <mavon-editor style="max-height: 600px;" v-model="content" />
         </div>
       </div>
       <div class="post-footer">