Fix math and mermaid rendering bugs (#24049)

1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
https://github.com/mermaid-js/mermaid/issues/4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>

1 files changed, 2 insertions, 2 deletions

diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js
index e4ec3d0b4b..1d29dc07f2 100644
--- a/web_src/js/markup/content.js
+++ b/web_src/js/markup/content.js
@@ -1,7 +1,7 @@
 import {renderMermaid} from './mermaid.js';
 import {renderMath} from './math.js';
 import {renderCodeCopy} from './codecopy.js';
-import {renderAsciinemaPlayer} from './asciicast.js';
+import {renderAsciicast} from './asciicast.js';
 import {initMarkupTasklist} from './tasklist.js';
 
 // code that runs for all markup content
@@ -9,7 +9,7 @@ export function initMarkupContent() {
   renderMermaid();
   renderMath();
   renderCodeCopy();
-  renderAsciinemaPlayer();
+  renderAsciicast();
 }
 
 // code that only runs for comments