Syntax-highlight colourize comments in pre blocks

chromium · Sep 11, 2023 · 697051f · 697051f
1 parent 4ae2d6a
commit 697051f
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 0 deletions.
diff --git a/subdoc/gen_tests/markdown/Syntax.html b/subdoc/gen_tests/markdown/Syntax.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<head>
+  <meta name="generator" content="subdoc"></meta>
+  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+  <meta property="og:type" content="website"></meta>
+  <meta property="og:site_name" content="PROJECT NAME"></meta>
+  <title>Syntax - PROJECT NAME</title>
+  <meta property="og:title" content="Syntax - PROJECT NAME"></meta>
+  <meta name="description" content="A code block with syntax highlighting."></meta>
+  <meta property="og:description" content="A code block with syntax highlighting."></meta>
+  <link rel="stylesheet" href="../subdoc-test-style.css">
+  <link rel="icon" type="image/svg+xml" href="../icon.svg">
+  <link rel="alternate icon" type="image/png" href="../icon.png">
+  <meta property="og:image" content="../icon.svg"></meta>
+</head>
+
+<body>
+  <nav class="topbar">
+    <button class="sidebar-menu-button" onclick="let e = document.getElementsByClassName('sidebar')[0];e.classList.toggle('shown');">
+      ☰
+    </button>
+    <a class="topbar-logo-link" href="index.html"><div class="topbar-logo-border">
+        <img class="topbar-logo" src="PROJECT LOGO.png"></img>
+      </div></a>
+    <span class="topbar-text-area">
+      <span class="topbar-title">
+        <a href="#">Syntax</a>
+      </span>
+    </span>
+  </nav>
+  <nav class="sidebar">
+    <a class="sidebar-logo-link" href="index.html"><div class="sidebar-logo-border">
+        <img class="sidebar-logo" src="PROJECT LOGO.png"></img>
+      </div></a>
+    <div class="sidebar-pretitle sidebar-text">
+      struct
+    </div>
+    <div class="sidebar-title sidebar-text">
+      <a href="#">Syntax</a>
+    </div>
+    <div class="sidebar-subtitle sidebar-text">
+    </div>
+    <div class="sidebar-links sidebar-text">
+      <ul>
+      </ul>
+    </div>
+  </nav>
+  <main>
+    <div class="type record struct">
+      <div class="section overview">
+        <div class="section-header">
+          <span>
+            Struct
+          </span>
+          <a class="project-name" href="index.html">PROJECT NAME</a>
+          <span class="namespace-dots">::</span>
+          <a class="type-name" href="#">Syntax</a>
+        </div>
+        <div class="type-signature">
+          <span class="struct">
+            struct
+          </span>
+          <span class="type-name">
+            Syntax
+          </span>
+          <div class="record-body">
+            { ... };
+          </div>
+        </div>
+        <div class="description long">
+          <p>A code block with syntax highlighting.</p>
+<pre><code>A comment;  <span class="comment">// At the end of the line.</span>
+<span class="comment">// At the start of the line.</span>
+  <span class="comment">// And after some whitespace.</span>
+</code></pre>
+
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
diff --git a/subdoc/gen_tests/markdown/index.html b/subdoc/gen_tests/markdown/index.html
@@ -52,6 +52,9 @@
         <li>
           <a class="sidebar-item" href="S.html">S</a>
         </li>
+        <li>
+          <a class="sidebar-item" href="Syntax.html">Syntax</a>
+        </li>
       </ul>
     </div>
   </nav>
@@ -91,6 +94,16 @@
               <p>The <code>summary</code> has <b>html tags</b> in it.</p>
             </div>
           </li>
+          <li class="section-item">
+            <div class="item-name">
+              <div class="type-signature">
+                <a class="type-name" href="Syntax.html">Syntax</a>
+              </div>
+            </div>
+            <div class="description short">
+              <p>A code block with syntax highlighting.</p>
+            </div>
+          </li>
         </ul>
       </div>
     </div>

diff --git a/subdoc/gen_tests/markdown/test.cc b/subdoc/gen_tests/markdown/test.cc
@@ -8,3 +8,11 @@ struct S {};
 /// newlines in
 /// it.
 struct N {};
+
+/// A code block with syntax highlighting.
+/// ```
+/// A comment;  // At the end of the line.
+/// // At the start of the line.
+///   // And after some whitespace.
+/// ```
+struct Syntax {};
diff --git a/subdoc/gen_tests/subdoc-test-style.css b/subdoc/gen_tests/subdoc-test-style.css
@@ -206,6 +206,9 @@ main {
     color:rgb(230, 230, 230);
     overflow-x: auto;
 }
+pre > code span.comment {
+    color: #3ff9bd;
+}
 
 .section-header {
     font-size: 125%;

diff --git a/subdoc/lib/gen/markdown_to_html.cc b/subdoc/lib/gen/markdown_to_html.cc
@@ -256,6 +256,40 @@ sus::Result<MarkdownToHtml, MarkdownToHtmlError> markdown_to_html(
     }
   }
   std::string str = sus::move(parsed).str();
+  usize pos;
+  while (true) {
+    pos = str.find("<pre>", pos);
+    if (pos == std::string::npos) break;
+    usize end_pos = str.find("</pre>", pos + 5u);
+    if (end_pos == std::string::npos) break;
+
+    while (true) {
+      usize comment_pos = str.find("// ", pos);
+      if (comment_pos == std::string::npos) {
+        pos = str.size();
+        break;
+      }
+      if (comment_pos >= end_pos) {
+        // If we went past </pre> then back up and look for the next <pre>.
+        pos = end_pos + 6u;
+        break;
+      }
+
+      const std::string_view open = "<span class=\"comment\">";
+      const std::string_view close = "</span>";
+
+      str.insert(comment_pos, open);
+      comment_pos += open.size();
+      end_pos += open.size();
+
+      usize eol_pos = str.find("\n", comment_pos);
+      if (eol_pos == std::string::npos) eol_pos = str.size();
+      str.insert(eol_pos, close);
+      eol_pos += close.size();
+      end_pos += close.size();
+      pos = eol_pos;
+    }
+  }
   return sus::ok(MarkdownToHtml{
       .full_html = sus::clone(str),
       .summary_html = summarize_html(str),