Markdown-Parser-Performance-Benchmark/index.html at main · timan-z/Markdown-Parser-Performance-Benchmark · 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
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Rust vs JS Markdown Parsers</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>TESTING MY RUST-POWERED MARKDOWN PARSER!!!</h1>
    <h2>(And also benchmarking it against two JS-powered Markdown parsers: marked, markdown-it)</h2>
    <hr>

    <!-- So, what I want here is a just a simple text input box with a button.
    And then beneath it is another box but it's not interactable and there is no text
    (this is my render panel for making sure that the RUST parser works good).
    NOTE: Do not bother at all with styling here. Remember what I'm building; this is an add-on feature for my CMDE project. -->
    <div class="wrapper">
      <!-- 1. The Text(well, Markdown)-Input Box: -->
      <div id="mdInputWrapper">
        <textarea id="markdownInput" class="displayBox"></textarea>
        <button id="renderBtn" type="button" class="button"><b>Click to Render</b> (Markdown above -> Render Panel on the RHS!)</button>
        <button id="benchmarksBtn" type="button" class="button"><b>Click to Run Benchmarks</b> (Warning - may take <i>very</i> long!)</button>
      </div>

      <!-- 2. The Render Box (Area): -->
      <div id="renderBoxWrapper">
        <div id="renderBox"><i>This is the render panel (markdown will be rendered here!)</i></div>
        <div id="renderBoxInfo"></div>
      </div>
    </div>
    <hr>

    <!-- Going to have a box beneath the main interactive area of the webpage where info about the benchmarks appear after they were run: -->
    <div class="wrapper">
      <div id="bmResWrapper">
        <!-- Drafting up a Test table here to use as a reference for when I programmatically create it in benchmark.js: -->
        <!---->
        <!--<table id="resTable">
          <thead>
            <tr>
              <th>Unit Test Type</th>
              <th>Comrak (RUST)</th>
              <th>Marked (JS)</th>
              <th>MarkdownIt (JS)</th>
            </tr>
          </thead>
          <tbody id="resBody">
            <tr>
              <td><button class="unitTestBtn">smallHeadingV1</button></td>
              <td>17.2ms</td>
              <td>30.3ms</td>
              <td>28.2ms</td>
            </tr>
          </tbody>
        </table>-->
      </div>
    </div>

    <!-- Linking ./utility/benchmark.js where all the JavaScript functions are: -->
    <script type="module" src="./utility/benchmark.js"></script>

  </body>
</html>