katex公式

package-lock.json

@@ -25,6 +25,7 @@
         "js-audio-recorder": "^1.0.7",
         "jsmind": "^0.4.8",
         "jszip": "^3.10.1",
+        "katex": "^0.16.22",
         "lamejs": "^1.2.1",
         "markdown-it": "^13.0.1",
         "opencc-js": "^1.0.5",
@@ -13529,6 +13530,31 @@
         "setimmediate": "^1.0.5"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -35150,6 +35176,21 @@
         "setimmediate": "^1.0.5"
       }
     },
+    "katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "requires": {
+        "commander": "^8.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+        }
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -37398,6 +37439,7 @@
         "js-audio-recorder": "^1.0.7",
         "jsmind": "^0.4.8",
         "jszip": "^3.10.1",
+        "katex": "^0.16.22",
         "lamejs": "^1.2.1",
         "markdown-it": "^13.0.1",
         "nightwatch": "^0.9.12",
@@ -48381,6 +48423,21 @@
             "setimmediate": "^1.0.5"
           }
         },
+        "katex": {
+          "version": "0.16.22",
+          "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.22.tgz",
+          "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+          "requires": {
+            "commander": "^8.3.0"
+          },
+          "dependencies": {
+            "commander": {
+              "version": "8.3.0",
+              "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+              "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+            }
+          }
+        },
         "killable": {
           "version": "1.0.1",
           "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "js-audio-recorder": "^1.0.7",
     "jsmind": "^0.4.8",
     "jszip": "^3.10.1",
+    "katex": "^0.16.22",
     "lamejs": "^1.2.1",
     "markdown-it": "^13.0.1",
     "opencc-js": "^1.0.5",

src/components/components/askStatic2.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sjBox" v-if="askJSONC && askJSONC.testJson">
-    <div class="a_add_title">
+    <div class="a_add_title" >
       <div style="font-size: 25px">{{ askJSONC.testTitle }}</div>
     </div>
     <div class="a_addBox">
@@ -33,7 +33,7 @@
                   cursor: pointer;
                 "
               >
-                {{ index + 1 + "、" + item.teststitle }}
+                {{ index + 1 + "、"  }} <span ref="latexElement" v-html="renderedFormula(item.teststitle)"></span>
               </div>
             </el-tooltip>
             <!-- </el-tooltip> -->
@@ -185,6 +185,8 @@
 </template>
 
 <script>
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 export default {
   props: ["askJSON", "checkJson"],
   data() {
@@ -197,10 +199,17 @@ export default {
       checkJson2: [],
     };
   },
-  watch: {
-    askJSON(val) {
-      this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
-    },
+  computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    }
   },
   methods: {
     handleClose(done) {
@@ -229,6 +238,9 @@ export default {
         this.checkJson2 = this.checkJson;
       },
     },
+    askJSON(val) {
+      this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
+    },
   },
   mounted() {
     // this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
@@ -267,7 +279,9 @@ export default {
   font-size: 18px;
   width: 100%;
 }
-
+.a_add_head >>> .katex{
+  font-size: 16px;
+}
 .a_add_head .a_add_head_input {
   width: 300px;
 }

src/components/components/choseWorksDetailDialog.vue

@@ -85,7 +85,7 @@
                         >
                           (多选题)
                         </div>
-                        <div>题目：{{ item1.teststitle }}</div>
+                        <div>题目：<span v-html="renderedFormula(item1.teststitle)"></span></div>
                       </div>
                       <img
                         v-if="item1.img"
@@ -1366,7 +1366,8 @@ import smarter from './intelligentAnalysis/smarter.vue';
 import { tools as toolsList } from "@/common/tools2.js";
 import { myMixin } from "@/mixins/mixin.js"
 // import html2canvas from "html2canvas";
-
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 export default {
   mixins: [ myMixin ],
 	components:{
@@ -1519,6 +1520,16 @@ export default {
   },
 
   computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    },
     tableData() {
       let _result = [];
       if (this.show && this.toolIndex !== null && [45].includes(this.toolType)) {
@@ -4341,4 +4352,7 @@ ol {
   color: rgb(80, 80, 80);
   margin-bottom: 20px;
 }
+.a_add_head >>> .katex{
+  font-size: 14px;
+}
 </style>

src/components/easy2/studyStudent.vue

@@ -6206,7 +6206,7 @@
                               cursor: pointer;
                             "
                           >
-                            {{ index + 1 + "、" + item.teststitle }}
+                            {{ index + 1 + "、"  }} <span v-html="renderedFormula(item.teststitle)"></span>
                           </div>
                         </el-tooltip>
                       </div>
@@ -16262,7 +16262,8 @@ import statisticalAnalysis from "../components/statisticalAnalysis.vue";
 import choseWorksDetailDialog from "../components/choseWorksDetailDialog.vue";
 import appStoreC from "../components/appStoreC.vue";
 import cocoFlowDia from "../components/cocoFlowDia.vue";
-
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 
 import choseWordCloud from '../components/choseWordCloud.vue'
 import { myMixin } from "@/mixins/mixin.js"
@@ -26115,6 +26116,16 @@ export default {
     this.updateSplitScreenData(1);
   },
   computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    },
     isAndroid() {
       return /Android/i.test(navigator.userAgent);
     },
@@ -28966,7 +28977,9 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.tool_right_box >>> .katex {
+  font-size: 16px;
+}
 .tool_right_box + .tool_right_box {
   margin-top: 10px;
 }

src/components/easy3/studyStudent.vue

@@ -4465,7 +4465,7 @@
                               cursor: pointer;
                             "
                           >
-                            {{ index + 1 + "、" + item.teststitle }}
+                            {{ index + 1 + "、"  }} <span v-html="renderedFormula(item.teststitle)"></span>
                           </div>
                         </el-tooltip>
                       </div>
@@ -12616,7 +12616,8 @@ import appStoreC from "../components/appStoreC.vue";
 import cocoFlowDia from "../components/cocoFlowDia.vue";
 import { myMixin } from "@/mixins/mixin.js"
 import { tools as toolsList } from "@/common/tools2.js";
-
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 let converter = OpenCC.Converter({
   from: "hk",
   to: "cn"
@@ -21538,6 +21539,16 @@ export default {
 		this.updateSplitScreenData(1);
   },
   computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    },
     isAndroid() {
       return /Android/i.test(navigator.userAgent);
     },
@@ -24308,7 +24319,9 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.tool_right_box >>> .katex {
+  font-size: 16px;
+}
 .tool_right_box + .tool_right_box {
   margin-top: 10px;
 }

src/components/studyStudent.vue

@@ -4425,7 +4425,7 @@
                               cursor: pointer;
                             "
                           >
-                            {{ index + 1 + "、" + item.teststitle }}
+                            {{ index + 1 + "、"  }} <span v-html="renderedFormula(item.teststitle)"></span>
                           </div>
                         </el-tooltip>
                       </div>
@@ -12554,7 +12554,8 @@ import appStoreC from "./components/appStoreC.vue";
 import cocoFlowDia from "./components/cocoFlowDia.vue";
 import { myMixin } from "@/mixins/mixin.js"
 import { tools as toolsList } from "@/common/tools2.js";
-
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 let converter = OpenCC.Converter({
   from: "hk",
   to: "cn"
@@ -21492,6 +21493,16 @@ export default {
 		this.updateSplitScreenData(1);
   },
   computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    },
     isAndroid() {
       return /Android/i.test(navigator.userAgent);
     },
@@ -24255,7 +24266,9 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.tool_right_box >>> .katex {
+  font-size: 16px;
+}
 .tool_right_box + .tool_right_box {
   margin-top: 10px;
 }

src/components/studySutdentClass/studyStudent.vue

@@ -6202,7 +6202,7 @@
                               cursor: pointer;
                             "
                           >
-                            {{ index + 1 + "、" + item.teststitle }}
+                            {{ index + 1 + "、"  }} <span v-html="renderedFormula(item.teststitle)"></span>
                           </div>
                         </el-tooltip>
                       </div>
@@ -15863,7 +15863,8 @@ import appStoreC from "../components/appStoreC.vue";
 import cocoFlowDia from "../components/cocoFlowDia.vue";
 import { myMixin } from "@/mixins/mixin.js"
 import { tools as toolsList } from "@/common/tools2.js";
-
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
 var OpenCC = require("opencc-js");
 let converter = OpenCC.Converter({
   from: "hk",
@@ -25515,6 +25516,16 @@ export default {
 		this.updateSplitScreenData(1);
   },
   computed: {
+    renderedFormula() {
+      return function(val){
+        try {
+          return katex.renderToString(val,{ throwOnError: false });
+        } catch (e) {
+          console.error('KaTeX渲染错误:', e);
+          return val;
+        }
+      }
+    },
     isAndroid() {
       return /Android/i.test(navigator.userAgent);
     },
@@ -28305,7 +28316,9 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.tool_right_box >>> .katex {
+  font-size: 16px;
+}
 .tool_right_box + .tool_right_box {
   margin-top: 10px;
 }