md格式与katex

hoj-vue/src/App.vue

@@ -123,7 +123,7 @@ samp {
 a {
   text-decoration: none;
   background-color: transparent;
-  color: #495060;
+  color: #495060 !important;
   outline: 0;
   cursor: pointer;
   transition: color 0.2s ease;

hoj-vue/src/components/oj/common/Announcements.vue

@@ -70,7 +70,7 @@
           v-highlight
           v-html="announcement.content"
           key="content"
-          class="content-container maize-markdown-body"
+          class="content-container markdown-body"
         ></div>
       </template>
     </transition-group>

hoj-vue/src/main.js

@@ -46,8 +46,8 @@ import SlideVerify from 'vue-monoplasty-slide-verify'
 //  markdown编辑器
 import mavonEditor from 'mavon-editor'  //引入markdown编辑器
 import 'mavon-editor/dist/css/index.css'
-// 前端所用markdown样式
-import '@/assets/css/maize.css'
+// // 前端所用markdown样式
+// import '@/assets/css/maize.css'
 Vue.use(mavonEditor)
 
 Object.keys(filters).forEach(key => {   // 注册全局过滤器

hoj-vue/src/views/oj/Home.vue

@@ -207,6 +207,11 @@ export default {
     getRecentContests() {
       api.getRecentContests().then((res) => {
         this.contests = res.data.data;
+        for (let i = 0; i < this.contests.length; i++) {
+          this.contests[i].description = this.$markDown.render(
+            this.contests[i].description
+          );
+        }
       });
     },
     getRecentOtherContests() {

hoj-vue/src/views/oj/contest/ContestDetails.vue

@@ -15,11 +15,11 @@
               v-if="contest.auth != null"
             >
               <el-tooltip
-                :content="CONTEST_TYPE_REVERSE[contest['auth']]['tips']"
+                :content.sync="CONTEST_TYPE_REVERSE[contest['auth']]['tips']"
                 placement="top"
               >
                 <el-tag
-                  :type="CONTEST_TYPE_REVERSE[contest.auth]['color']"
+                  :type.sync="CONTEST_TYPE_REVERSE[contest.auth]['color']"
                   effect="plain"
                 >
                   {{ CONTEST_TYPE_REVERSE[contest.auth]['name'] }}
@@ -97,7 +97,12 @@
         <el-tab-pane name="ContestDetails" lazy>
           <span slot="label"><i class="el-icon-s-home"></i>&nbsp;Overview</span>
           <el-card class="box-card">
-            <div v-html="contest.description" class="maize-markdown-body"></div>
+            <div
+              v-html="descriptionHtml"
+              v-katex
+              v-highlight
+              class="markdown-body"
+            ></div>
           </el-card>
         </el-tab-pane>
 
@@ -319,6 +324,11 @@ export default {
     showAdminHelper() {
       return this.isContestAdmin && this.contestRuleType === RULE_TYPE.ACM;
     },
+    descriptionHtml() {
+      if (this.contest.description) {
+        return this.$markDown.render(this.contest.description);
+      }
+    },
   },
   watch: {
     $route(newVal) {

hoj-vue/src/views/oj/problem/Problem.vue

@@ -66,13 +66,21 @@
 
             <div id="problem-content" class="markdown-body" v-katex>
               <p class="title">Description</p>
-              <p class="content" v-html="problemData.problem.description"></p>
+              <p
+                class="content"
+                v-html="problemData.problem.description"
+                v-katex
+              ></p>
               <!-- {{$t('m.music')}} -->
               <p class="title">Input</p>
-              <p class="content" v-html="problemData.problem.input"></p>
+              <p class="content" v-html="problemData.problem.input" v-katex></p>
 
               <p class="title">Output</p>
-              <p class="content" v-html="problemData.problem.output"></p>
+              <p
+                class="content"
+                v-html="problemData.problem.output"
+                v-katex
+              ></p>
 
               <div
                 v-for="(example, index) of problemData.problem.examples"
@@ -113,7 +121,11 @@
               <div v-if="problemData.problem.hint">
                 <p class="title">Hint</p>
                 <el-card dis-hover>
-                  <div class="content" v-html="problemData.problem.hint"></div>
+                  <div
+                    class="content"
+                    v-html="problemData.problem.hint"
+                    v-katex
+                  ></div>
                 </el-card>
               </div>
 
@@ -422,6 +434,26 @@ export default {
           result.problem.examples = utils.stringToExamples(
             result.problem.examples
           );
+          if (result.problem.description) {
+            result.problem.description = this.$markDown.render(
+              result.problem.description.toString()
+            );
+          }
+          if (result.problem.input) {
+            result.problem.input = this.$markDown.render(
+              result.problem.input.toString()
+            );
+          }
+          if (result.problem.output) {
+            result.problem.output = this.$markDown.render(
+              result.problem.output.toString()
+            );
+          }
+          if (result.problem.hint) {
+            result.problem.hint = this.$markDown.render(
+              result.problem.hint.toString()
+            );
+          }
           this.problemData = result;
           this.isRemote = result.problem.isRemote;
           this.changePie(result.problemCount);
@@ -740,7 +772,9 @@ export default {
 .problem-menu {
   float: right;
 }
-
+a {
+  color: #3091f2 !important ;
+}
 .problem-menu span {
   margin-left: 10px;
 }