首页 > 其他分享 >mathjax 动态渲染 typeset问题

mathjax 动态渲染 typeset问题

时间:2024-12-21 11:53:41浏览次数:7  
标签:渲染 typeset MathJax typesetPromise mathjax 动态

使用mathjax渲染数理化公式,静态正常,动态内容出现问题,简单解决如下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
      
  <script id="MathJax-script" async
          src="/wwwroot/lib/mathjax/es5/tex-chtml-full.min.js">
  </script>
  <script>
//下面注释这段是罪魁祸首,因为自定义的mathjax覆盖了原库的对象,
//导致动态渲染使用的typesetPromise()或typeset()失效.
//在官方文档示例也有类似的写法,应该只是针对静态页面。
// window.MathJax = {
//     tex: {
//         inlineMath: [['$', '$'], ['\\(', '\\)']]
//     },
//     svg: {
//         fontCache: 'global'
//     }
// };
    setTimeout(() => {
      const e = document.getElementById('target');
      // MathJax.typesetClear();
      e.innerText = '\\(x^2 - y\\)';
      MathJax.typesetPromise();
    }, 2000);
  </script>
</head>
<body>
  <p id="target">\(a^2+b\)</p>
</body>
</html>

  

标签:渲染,typeset,MathJax,typesetPromise,mathjax,动态
From: https://www.cnblogs.com/sun51586/p/18620598

相关文章

  • 浏览器如何渲染inline元素中空格的?
    浏览器在渲染inline元素中的空格时,主要遵循以下规则和步骤:空格的识别与处理:浏览器会识别HTML代码中的空格字符,包括空格、换行符(如\n)和制表符(如\t)等。在解析和渲染过程中,浏览器通常会将多个连续的空格字符合并为一个空格进行处理,这是为了防止多余的空格影响页面的布局和显示......
  • 开发大数据看板时,使用的数据是静态的还是实时渲染的?
    在开发大数据看板时,使用的数据可以是静态的,也可以是实时渲染的,具体取决于看板的需求和设计。以下是对这两种数据使用方式的详细解释:静态数据:静态数据通常是在看板开发过程中预先加载和处理好的数据。这些数据可能来自于各种数据源,如数据库、文件、API等,并经过一系列的数据清......
  • 浏览器怎么渲染数据的
    突然发现自己对于css的样式规则一直都没有完全明白,今天写文好好整明白浏览器渲染原理1.浏览器向服务器请求html文件2.html文件返回浏览器3.浏览器解读html文件<!DOCTYPEhtml>//告诉浏览器,这是html5文件//html树<htmllang="en">//语言<head>......
  • 组件 画线渲染 拖尾
     了解属性 挂载脚本 还可以设置开始颜色宽度结束颜色等 补充  ......
  • 鸿蒙Flutter性能调优分析之帧渲染跟踪
    鸿蒙Flutter性能调优性能分析之帧渲染跟踪Flutter应用进行性能分析时,需利用分析工具捕获应用的trace数据,并对其进行分析。鉴于Flutter应用中可能会出现需要单独追踪某帧渲染的情况,如帧率卡顿或帧丢失,本文特介绍了一种针对单帧追踪的方法。分析工具常用的分析工具包括DevEcoStu......
  • 从浏览器的渲染角度来进行性能优化
    从浏览器的渲染角度来进行性能优化性能瓶颈js执行引擎与渲染引擎是互斥的,他们是共同存在与浏览器的UI线程里面js引擎负责执行我们的js代码从而产生Dom树,渲染引擎则是依据Dom树,样式树来构建渲染树,然后排版与绘制,然后组合,从而计算出显示的像素点。整个的流程需要在......
  • 鸿蒙Next循环渲染ForEach用法总结
    在鸿蒙Next开发中,ForEach接口用于循环渲染数组类型数据,与容器组件配合使用,可高效构建动态列表等UI元素。以下是ForEach用法的详细总结。一、键值生成规则系统默认规则:若开发者未定义keyGenerator函数,ArkUI框架使用默认函数(item:Object,index:number)=>{returnindex+'......
  • 鸿蒙Next条件渲染用法总结
    在鸿蒙Next开发中,ArkTS提供了强大的渲染控制能力,其中条件渲染(if/else)可根据应用不同状态显示相应UI内容。以下是对其用法的详细总结。一、使用规则1.语句支持支持if、else和elseif语句,可灵活构建条件判断逻辑。2.变量类型if、elseif后的条件语句可使用状态变量(值改变实时......
  • 11CSS属性-颜色表示-chrome调试-浏览器渲染
    一、今日内容首先对这些属性进行一个演练想要深刻理解所有常用的CSS属性,最好先学会以下几个最基础最常用的CSS属性font-size文字大小color前景色(文字颜色)background-color背景色width宽度height高度二、对CSS常用属性进行演练1、字体的默认大小是16px的还可以看到字......
  • [BootstrapBlazor] Blazor 使用 Mermaid 渲染详细图表
    BootstrapBlazor是一套基于Bootstrap和Blazor的企业级组件库,无缝整合了Bootstrap框架与Blazor技术。它提供了一整套强大的工具,使开发者能够轻松创建响应式和交互式的Web应用程序。项目地址Gitee:https://gitee.com/LongbowEnterprise/BootstrapBlazorGitHub:https://g......