更新记录

1.0.0（2025-03-16） 下载此版本

首次发布

平台兼容性

VerResponse 组件文档

VerResponse 是一个基于 mp-html 的组件封装，支持 LaTeX 公式渲染，并兼容代码和公式同时存在。

修改说明

为了实现 LaTeX 公式的兼容，并对代码和公式进行解析，以下文件被修改：

1. latex
   • 增加了if判断，让其位于<code>标签内时不要动。
2. markdown
   • 修改了 markdown 解析器，确保代码块和公式在同一文档中能够正确渲染做了一些处理，可能会造成一定的效率损失。
   • 添加了缓存
3. parser.js
   • 添加了 isCode 为katex提供解析标志。
   • 在遇到<code>开头和结尾时更改isCode

属性

主题样式

VerResponse 提供了三种主题样式：

1. vs 轻二次元风格的主题样式，为适合大多数场景做了很大程度的妥协，风格简洁。

2. heavyAnime 强二次元风格的主题，适合特定的展示场景。

3. none 非二次元风格主题，只做了简单的封装。

使用示例

1. 默认主题 (vs)

<VerResponse  theme="vs" :content="content" />

2. 二次元主题 (heavyAnime)

<VerResponse theme="heavyAnime" :content="content" />

3. 自定义颜色 (none)

<VerResponse theme="none" :content="content" themeColor="#FF69B4" />

注意事项

1. 确保传入的 content 是一个有效的 HTML 字符串。
2. 如果需要渲染复杂的 LaTeX 公式，请确保 katex 配置正确。
3. 如果主题样式不满足需求，可以通过 themeColor 自定义主题颜色。
4. 在缓存情况下公式可能会无法准确识别，如果你的格式出现了错误，可以把下方代码粘贴到ver-response\components\mp-html\markdown\index.js文件中覆盖掉全部内容：

   
   /**
   * @fileoverview markdown 插件
   * Include marked (https://github.com/markedjs/marked)
   * Include github-markdown-css (https://github.com/sindresorhus/github-markdown-css)
   */
   import marked from './marked.min'
   let index = 0
   function Markdown (vm) {
   this.vm = vm
   vm._ids = {}
   }
   let latexBlocks = [];
   let codeBlocks = [];
   /**
   * 提取 $$ 包围的内容并替换为占位符
   * @param {string} content 原始内容
   * @returns {string} 替换后的内容
   */
   function protectLatex(content) {
   return content.replace(/(?<![`$>\-])\${1,2}(?![`$])((?:\\.|[^\\$])+?)(?<![`$])\${1,2}(?![`$<\d])/g
   , (_, latex) => {
   if(latex.includes("`")||latex.includes("$")){//加入markdown
   latexBlocks.push(_);
   return;}
   latexBlocks.push(_); // 存储内容
   return `@@LATEX${latexBlocks.length - 1}@@`; // 返回占位符
   });
   }
   /**
   * 将占位符替换回原始内容
   * @param {string} content 替换后的内容
   * @returns {string} 恢复后的内容
   */
   function restoreLatex(content) {
   return content.replace(/@@LATEX(\d+)@@/g, (_, idx) => {
   return `${latexBlocks[parseInt(idx, 10)]}`; 
   });
   }
   Markdown.prototype.onUpdate = function (content) {
   if (this.vm.markdown) {
   let oopr=[]
   let part = content.split("```");
   for (var index = 0; index < part.length; index++) {
       var element = part[index];
       if(index%2 !== 1){element = protectLatex(element);oopr.push(element)}
       else oopr.push("\`\`\`"+element+"\`\`\`");
   }
   content = oopr.join('');
   let html = marked(content);
   html = restoreLatex(html);
   latexBlocks = [];
   codeBlocks = [];
   return html;
   }
   }
   Markdown.prototype.onParse = function (node, vm) {
   if (vm.options.markdown) {
   // 中文 id 需要转换，否则无法跳转
   if (vm.options.useAnchor && node.attrs && /[\u4e00-\u9fa5]/.test(node.attrs.id)) {
     const id = 't' + index++
     this.vm._ids[node.attrs.id] = id
     node.attrs.id = id
   }
   if (node.name === 'p' || node.name === 'table' || node.name === 'tr' || node.name === 'th' || node.name === 'td' || node.name === 'blockquote' || node.name === 'pre' || node.name === 'code') {
     node.attrs.class = `md-${node.name} ${node.attrs.class || ''}`
   }
   }
   }
   export default Markdown

## 感谢插件
感谢以下优秀的开源插件和库：
- **[zero-markdown-view](https://ext.dcloud.net.cn/plugin?id=9437)**：提供样式和 Markdown 解析更改。
- **[mp-html](https://ext.dcloud.net.cn/plugin?id=805)**：支持 HTML 和富文本渲染，功能全面且性能出色。
这些插件为我的开发和文档撰写提供了极大的帮助，特此致谢！

如有问题或建议，请联系开发者。
ps:第一次写组件，如果该组件有给你带来帮助，可以给我一个小星星吗？拜托了。