demo.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Markdown-it with MathJax</title>
  6. <!-- 引入 MathJax CDN -->
  7. <!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -->
  8. <!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> -->
  9. <!-- <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-chtml.min.js"></script> -->
  10. <script type="text/javascript" async
  11. src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  12. </head>
  13. <body>
  14. <div id="content"></div>
  15. <div class="latexDiv">
  16. $$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$$
  17. 臭氧层的形成与耗损是一个复杂的化学过程,它涉及到大气中氧气(O2)的转化,尤其是在平流层中。其主要反应过程可以通过两个关键步骤来描述:
  18. 1. **形成过程(光解反应)**:
  19. - 当分子氧气(O2)吸收太阳紫外线(hν)时,会发生光解,生成一个氧原子(O·)和一个未结合的氧分子(0·O2)。这一反应可以用化学方程式表示为:
  20. \[
  21. \mathcal{O}_{2} + h\nu \rightarrow O· + O·O
  22. \]
  23. - 接着,这两个氧原子会相互结合生成一个臭氧分子(O3),即:
  24. \[
  25. O· + O·O \rightarrow O_3
  26. \]
  27. 这些反应吸收了大量的紫外线,起到了地球生物的天然防晒屏作用。
  28. 2. **耗损过程(还原反应)**:
  29. - 臭氧分子在受到紫外线激发后,可能发生两个反应:一是直接返回到氧气状态,释放出一个氧原子,反应为:
  30. \[
  31. O_3 + h\nu \rightarrow O_2 + O·
  32. \]
  33. - 另一反应是臭氧与另一个氧原子结合,生成两个氧气分子,即:
  34. \[
  35. O_3 + O· \rightarrow 2O_2
  36. \]
  37. 这两个过程共同维持了臭氧层的动态平衡。
  38. 总的来说,平流层中的臭氧通过不断的生成与耗损,形成了一个微妙的平衡,这个平衡对于阻挡有害紫外线对地球表面生物至关重要。尽管紫外线照射不断促使臭氧的分解,但同样数量的臭氧通过上述反应得以再生,确保了地球生命得以在适宜的环境中繁衍。
  39. </div>
  40. <script src="https://markdown-it.github.io/markdown-it.js"></script>
  41. <script>
  42. // 初始化 markdown-it
  43. const md = window.markdownit();
  44. // 假设你的Markdown内容存储在一个变量中
  45. const markdownContent = `你的Markdown内容,包括 LaTeX 公式如: $$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$$`;
  46. // 使用 markdown-it 渲染Markdown到HTML
  47. const htmlContent = md.render(markdownContent);
  48. // 将渲染后的HTML插入到页面中
  49. document.getElementById('content').innerHTML = htmlContent;
  50. // MathJax.js
  51. let isMathjaxConfig = false// 用于标识是否配置
  52. const initMathjaxConfig = () => {
  53. if (!window.MathJax) {
  54. return
  55. }
  56. window.MathJax.Hub.Config({
  57. showProcessingMessages: false, // 关闭js加载过程信息
  58. messageStyle: 'none', // 不显示信息
  59. // jax: ['input/TeX', 'output/HTML-CSS'],
  60. tex2jax: {
  61. inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式选择符
  62. displayMath: [['$$', '$$'], ['\\[', '\\]']], // 段内公式选择符
  63. skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] // 避开某些标签
  64. },
  65. 'HTML-CSS': {
  66. availableFonts: ['STIX', 'TeX'], // 可选字体
  67. showMathMenu: false // 关闭右击菜单显示
  68. }
  69. })
  70. isMathjaxConfig = true // 配置完成,改为true
  71. }
  72. const MathQueue = function (elementId) {
  73. if (!window.MathJax) {
  74. return
  75. }
  76. window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementsByClassName(elementId)]) // 根据class
  77. window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById(elementId)]) // 根据id
  78. }
  79. if (MathJax.isMathjaxConfig) { // 是否配置MathJax
  80. MathJax.initMathjaxConfig()
  81. }
  82. MathJax.MathQueue('latexDiv') // 渲染对应的id/class
  83. </script>
  84. </body>
  85. </html>