naravisuals-web/test-render.html at main · naranyala/naravisuals-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test MathJax & Mermaid</title>

  <!-- MathJax -->
  <script>
    window.MathJax = {
                                      tex: {
                                        inlineMath: [["$", "$"], ["\\(", "\\)"]],
                                        displayMath: [["$$", "$$"], ["\\[", "\\]"]],
                                        processEscapes: true,
                                        processEnvironments: true,
                                      },
                                      options: {
                                        skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code"],
                                      },
                                    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

  <style>
    body {
                                      font-family: system-ui, -apple-system, sans-serif;
                                      max-width: 800px;
                                      margin: 2rem auto;
                                      padding: 0 1rem;
                                    }

                                    .math-inline {
                                      display: inline-block;
                                      vertical-align: middle;
                                    }

                                    .math-display {
                                      display: block;
                                      text-align: center;
                                      margin: 1.5rem 0;
                                      padding: 1.5rem;
                                      background: #f5f5f5;
                                      border-radius: 0.5rem;
                                    }

                                    .mermaid-diagram {
                                      margin: 1rem 0;
                                      padding: 1rem;
                                      background: #fafafa;
                                      border: 1px solid #ddd;
                                      border-radius: 4px;
                                    }

                                    .mermaid {
                                      display: block;
                                    }
  </style>
</head>
<body>
  <h1>Testing MathJax and Mermaid Rendering</h1>

  <h2>MathJax Test</h2>
  <p>Inline math: <span class="math-inline">\(E = mc^2\)</span></p>

  <p>Display math:</p>
  <div class="math-display">\[\int_0^\infty e^{-x} dx = 1\]</div>

  <h2>Mermaid Test</h2>
  <div class="mermaid-diagram" data-processed="false">
    <div class="mermaid">graph TD;
    A-->B;
    A-->C;</div>
  </div>

  <script type="module">
    // Render Mermaid
                                    const mermaidModule = await import('mermaid');
                                    const mermaid = mermaidModule.default;

                                    mermaid.initialize({
                                      startOnLoad: false,
                                      theme: 'default',
                                      securityLevel: 'loose',
                                    });

                                    const diagrams = document.querySelectorAll('.mermaid-diagram');
                                    for (const wrapper of diagrams) {
                                      const mermaidEl = wrapper.querySelector('.mermaid');
                                      if (!mermaidEl) continue;

                                      const diagramSource = mermaidEl.textContent.trim();
                                      try {
                                        const { svg } = await mermaid.render('test-diagram', diagramSource);
                                        wrapper.dataset.processed = 'true';
                                        mermaidEl.innerHTML = svg;
                                        mermaidEl.style.display = 'block';
                                      } catch (err) {
                                        console.error('Mermaid error:', err);
                                      }
                                    }
  </script>
</body>
</html>