|
|
@@ -1,11 +1,11 @@
|
|
|
<script setup>
|
|
|
-import { computed, onMounted } from 'vue';
|
|
|
+import { computed, onMounted , ref} from 'vue';
|
|
|
import MarkdownIt from 'markdown-it';
|
|
|
import hljs from 'highlight.js';
|
|
|
import mila from 'markdown-it-link-attributes';
|
|
|
import markdownItMath from 'markdown-it-math';
|
|
|
import mdKatex from 'markdown-it-katex';
|
|
|
-
|
|
|
+const formulaContainer = ref(null);
|
|
|
const props = defineProps({
|
|
|
content: {
|
|
|
type: String,
|
|
|
@@ -50,7 +50,7 @@ mdi.use(markdownItMath, {
|
|
|
});
|
|
|
|
|
|
mdi.use(mdKatex, {
|
|
|
- blockClass: 'katexmath-block rounded-md p-[10px]',
|
|
|
+ blockClass: 'katexmath-block rounded-md p-[10px]',
|
|
|
errorColor: ' #cc0000',
|
|
|
})
|
|
|
|
|
|
@@ -61,25 +61,14 @@ const text = computed(() => {
|
|
|
return value
|
|
|
})
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
const defaultImageRender = mdi.renderer.rules.image;
|
|
|
|
|
|
-mdi.renderer.rules.image = function (tokens, idx, options, env, self) {
|
|
|
-
|
|
|
- const token = tokens[idx];
|
|
|
- // console.log("token", token, token.attrIndex('src'));
|
|
|
- // // 可以在此处对token进行任何修改，例如修改图片的属性
|
|
|
- // // 例如，为图片添加一个自定义的CSS类名
|
|
|
- // token.attrs[token.attrIndex('class')] = ['custom-image-class'];
|
|
|
-
|
|
|
- // // 或者动态改变图片的src路径
|
|
|
- const originalSrc = token.attrs[token.attrIndex('src')][1];
|
|
|
- console.log("originalSrc", originalSrc);
|
|
|
- // const newSrc = modifyImageSrc(originalSrc); // 自定义函数来修改src
|
|
|
- // token.attrs[token.attrIndex('src')][1] = newSrc;
|
|
|
-
|
|
|
-
|
|
|
- return defaultImageRender(tokens, idx, options, env, self);
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
function modifyImageSrc(src) {
|
|
|
if (src.startsWith('http')) {
|
|
|
@@ -91,13 +80,72 @@ function modifyImageSrc(src) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const md = new MarkdownIt();
|
|
|
+// 自定义规则以匹配 AA 开头的内容
|
|
|
+md.core.ruler.push('custom_aa_rule', function (state) {
|
|
|
+ state.tokens.forEach(function (token, index) {
|
|
|
+ // console.log( token, index );
|
|
|
+ if (token.type === 'inline' && token.content.match(/^AA/)) {
|
|
|
+ // 创建一个新的 token 来表示自定义的渲染
|
|
|
+ let customToken = new state.Token('custom_aa_open', 'div', 1);
|
|
|
+ customToken.block = true;
|
|
|
+ customToken.attrs = [['class', 'aa-custom-class']];
|
|
|
+
|
|
|
+ let textToken = new state.Token('text', '', 0);
|
|
|
+ textToken.content = token.content;
|
|
|
+
|
|
|
+ let closeToken = new state.Token('custom_aa_close', 'div', -1);
|
|
|
+ closeToken.block = true;
|
|
|
+
|
|
|
+ // 插入新 tokens 并移除原始 token
|
|
|
+ state.tokens.splice(index, 1, customToken, textToken, closeToken);
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+md.renderer.rules['custom_aa_open'] = function () { return '<div class="aa-custom-class">'; };
|
|
|
+md.renderer.rules['custom_aa_close'] = function () { return '</div>'; };
|
|
|
+let result = md.render(`臭氧层的形成与耗损是一个涉及化学反应的关键过程，它对于地球生物的生存至关重要。臭氧（O3）主要通过以下两个化学反应来调控其在大气层中的浓度：
|
|
|
+
|
|
|
+1. 形成过程（紫外线催化）：
|
|
|
+ 在紫外线（UV）的作用下，氧气分子（O2）接受能量（hν，表示光子能量），经历一个激发态的过程，发生以下反应：
|
|
|
+ \[
|
|
|
+ \mathcal{O}_2 + h\nu \rightarrow O^{\cdot} + O^{\cdot}
|
|
|
+ \]
|
|
|
+ 紧接着，两个单个氧原子（O•）在存在中间物质M（通常为大气中的其他分子如氮气或氢）的情况下，结合生成臭氧分子：
|
|
|
+ \[
|
|
|
+ O^{\cdot} + O^{\cdot} + M \rightarrow O_3 + M
|
|
|
+ \]
|
|
|
+
|
|
|
+2. 耗损过程：
|
|
|
+ 臭氧在吸收更多紫外线后会发生分解，首先是单线程反应：
|
|
|
+ \[
|
|
|
+ O_3 + h\nu \rightarrow O_2 + O^{\cdot}
|
|
|
+ \]
|
|
|
+ 而在大气条件下，进一步的反应会导致臭氧分子与一个单个氧原子结合，形成两个氧气分子：
|
|
|
+ \[
|
|
|
+ O_3 + O^{\cdot} \rightarrow 2O_2
|
|
|
+ \]
|
|
|
+
|
|
|
+这两个反应（反应2和3）在平流层中持续循环，它们吸收大量的紫外线辐射，起到了地球生物的天然遮阳伞作用。然而，这个动态平衡一旦被破坏，例如由于人类活动产生的化学物质（如氯氟碳化物CFCs）的排放，臭氧层的稳定性就会受到威胁。
|
|
|
+
|
|
|
+总之，臭氧层的形成与耗损是一个复杂的光化学过程，它在平流层中维持着微妙的平衡，确保地球免受有害紫外线的直接照射。任何影响这个平衡的因素都可能对生态系统产生深远影响。`);
|
|
|
+
|
|
|
+// md.renderer.rules['custom_aa_open'] = function () { return '<div class="aa-custom-class">'; };
|
|
|
+// md.renderer.rules['custom_aa_close'] = function () { return '</div>'; };
|
|
|
+
|
|
|
const img = mdi.render(' 这是一只我为你画的猫。 第二只第二只。')
|
|
|
|
|
|
+
|
|
|
+const res123 = mdi.render(`$$P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C$$`)
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
+ <div ref="formulaContainer" class="formula-container"></div>
|
|
|
<div class="markdown-body text-[15px] break-all" v-if="content">
|
|
|
- <!-- <div v-html="img"></div> -->
|
|
|
+ <!-- <div v-html="result"></div> -->
|
|
|
<div v-html="text"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -117,9 +165,11 @@ const img = mdi.render('
whh