Highlight the pwndbg prompt in docs code blocks (#3054)

* highlight pwndbg prompts in code blocks

* instant loading + thing that needs to be run on page load = pain

* better colors maybe

* new js in mkdocs

* better callback!

* change prompt color to green

docs/js/prompt-highlighter.js

@@ -0,0 +1,35 @@
+function highlightPrompts() {
+  document.querySelectorAll('pre > code').forEach(codeBlock => {
+    if (codeBlock.dataset.promptProcessed) return;
+    codeBlock.dataset.promptProcessed = 'true';
+
+    // Match `pwndbg>` and `>`.
+    const lines = codeBlock.querySelectorAll('span[id^="__span"]');
+
+    lines.forEach(lineEl => {
+      const text = lineEl.textContent;
+      const match = text.match(/^(pwndbg>|>)(.*)/);
+      if (match) {
+        const prompt = match[1];
+        const rest = match[2];
+
+        lineEl.innerHTML = '';
+
+        const promptSpan = document.createElement('span');
+        promptSpan.className = 'pwndbg-prompt';
+        promptSpan.textContent = prompt;
+
+        const contentSpan = document.createElement('span');
+        contentSpan.className = 'pwndbg-cmd';
+        contentSpan.textContent = rest;
+
+        lineEl.appendChild(promptSpan);
+        lineEl.appendChild(contentSpan);
+      }
+    });
+  });
+}
+
+// Run on page load.
+// https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
+document$.subscribe(highlightPrompts)

docs/stylesheets/extra.css

@@ -94,3 +94,21 @@ label.md-nav__link {
   background: var(--md-code-bg-color);
   padding: 5px;
 }
+
+/* Highlight the `pwndbg>` prompt in code blocks. */
+.pwndbg-prompt {
+  /* Desaturated red.
+    color: #bd4545; */
+  /* #00AA00 is the default alive prompt. */
+  color: #239923;
+  font-weight: bold;
+}
+
+.pwndbg-cmd {
+  color: #dddddd
+}
+
+pre > code .code-line {
+  white-space: pre;    /* preserve spaces */
+  font-family: monospace;
+}

mkdocs.yml

@@ -179,6 +179,9 @@ extra_css:
   - stylesheets/extra.css
   - stylesheets/mkdocstrings.css
 
+extra_javascript:
+  - js/prompt-highlighter.js
+
 markdown_extensions:
 # https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/
   - abbr