add markdown css

I-GUIDE · May 22, 2024 · c480668 · c480668
1 parent 74c006a
commit c480668
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "@vuex-orm/core": "^0.36.4",
     "deepmerge": "^4.3.1",
     "dompurify": "^3.1.2",
+    "github-markdown-css": "^5.5.1",
     "google-maps": "^4.3.3",
     "lodash.isequal": "^4.5.0",
     "markdown-it": "^14.1.0",

diff --git a/frontend/src/assets/css/theme.scss b/frontend/src/assets/css/theme.scss
@@ -3,6 +3,7 @@
 // }
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @import '@cznethub/cznet-vue-core/styles';
+@import 'github-markdown-css/github-markdown-light.css';
 
 
 html {

diff --git a/frontend/src/components/dataset/cd.dataset.vue b/frontend/src/components/dataset/cd.dataset.vue
@@ -548,7 +548,7 @@
                   color="primary"
                 />
               </div>
-              <div v-html="readmeMd" class="px-4"></div>
+              <div v-html="readmeMd" class="markdown-body px-4"></div>
             </v-card-text>
           </v-card>
         </div>
@@ -1235,4 +1235,17 @@ export default toNative(CdDataset);
 :deep(#fileExplorer .v-sheet) {
   background-color: #f6f6f6 !important;
 }
+
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  padding: 45px;
+}
+
+@media (max-width: 767px) {
+  .markdown-body {
+    padding: 15px;
+  }
+}
 </style>