docs: add known extension search

docs/USING_ADVANCED.md

@@ -77,6 +77,34 @@ console.log(marked.parse(markdownString));
 
 Marked can be extended using [custom extensions](/using_pro#extensions). This is a list of extensions that can be used with `marked.use(extension)`.
 
+<!-- Extension search box -->
+
+<div id="extension-search-container" class="relative my-6 max-w-lg">
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-subtle-light dark:text-subtle-dark">
+    <span class="material-icons text-xl">search</span>
+  </span>
+  <input
+    type="text"
+    id="extension-search"
+    placeholder="Search extensions by name, package, or description..."
+    class="w-full pl-10 pr-10 py-2.5 bg-gray-50 dark:bg-gray-800/50 border border-border-light dark:border-border-dark rounded-xl text-text-light dark:text-text-dark placeholder-subtle-light dark:placeholder-subtle-dark focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 shadow-sm"
+  />
+  <button
+    id="extension-search-clear"
+    type="button"
+    class="absolute inset-y-0 right-0 flex items-center pr-3 text-subtle-light dark:text-subtle-dark hover:text-text-light dark:hover:text-text-dark hidden"
+    aria-label="Clear search"
+  >
+    <span class="material-icons text-lg">close</span>
+  </button>
+</div>
+
+<div id="no-extensions-msg" class="hidden p-8 text-center bg-gray-50 dark:bg-gray-800/30 border border-dashed border-border-light dark:border-border-dark rounded-xl my-6">
+  <span class="material-icons text-4xl text-subtle-light dark:text-subtle-dark mb-2">search_off</span>
+  <p class="text-text-light dark:text-text-dark font-medium">No extensions found</p>
+  <p class="text-sm text-subtle-light dark:text-subtle-dark mt-1">Try adjusting your keywords or search term.</p>
+</div>
+
 <!-- Keep this list ordered alphabetically by name -->
 
 |Name|Package Name|Description|
@@ -102,11 +130,11 @@ Marked can be extended using [custom extensions](/using_pro#extensions). This is
 |[Katex Code](https://github.com/UziTech/marked-katex-extension)|[`marked-katex-extension`](https://www.npmjs.com/package/marked-katex-extension)|Render [katex](https://katex.org/) code|
 |[LinkifyIt](https://github.com/UziTech/marked-linkify-it)|[`marked-linkify-it`](https://www.npmjs.com/package/marked-linkify-it)|Use [linkify-it](https://github.com/markdown-it/linkify-it) for urls|
 |[Mangle](https://github.com/markedjs/marked-mangle)|[`marked-mangle`](https://www.npmjs.com/package/marked-mangle)|Mangle mailto links with HTML character references|
-|[Marked Responsive Images](https://github.com/ELowry/MarkedResponsiveImages)|[`marked-responsive-images`](https://www.npmjs.com/package/marked-responsive-images)|Generate responsive (`srcset`) images based on structured filenames|
 |[Math](https://github.com/webc-site/math/tree/main/plugin/marked)|[`@webc.site/math-marked`](https://www.npmjs.com/package/@webc.site/math-marked)|Ultra-lightweight native MathML math rendering extension|
 |[Misskey-flavored Markdown](https://akkoma.dev/sfr/marked-mfm)|[`marked-mfm`](https://www.npmjs.com/package/marked-mfm)|Custom extension for [Misskey-flavored Markdown](https://github.com/misskey-dev/mfm.js/blob/develop/docs/syntax.md)|
 |[More Lists](https://github.com/jasny/marked-more-lists)|[`marked-more-lists`](https://www.npmjs.com/package/marked-more-lists)|Support for alphabetical and roman numeral ordered lists|
 |[Plaintify](https://github.com/bent10/marked-extensions/tree/main/packages/plaintify)|[`marked-plaintify`](https://www.npmjs.com/package/marked-plaintify)|Converts Markdown to Plaintext|
+|[Responsive Images](https://github.com/ELowry/MarkedResponsiveImages)|[`marked-responsive-images`](https://www.npmjs.com/package/marked-responsive-images)|Generate responsive (`srcset`) images based on structured filenames|
 |[Shiki](https://github.com/bent10/marked-extensions/tree/main/packages/shiki)|[`marked-shiki`](https://www.npmjs.com/package/marked-shiki)|Integrating [Shiki](https://shiki.style/) syntax highlighting|
 |[Sequential Hooks](https://github.com/bent10/marked-extensions/tree/main/packages/sequential-hooks)|[`marked-sequential-hooks`](https://www.npmjs.com/package/marked-sequential-hooks)|Enables the sequential preprocessing and post-processing within [sequential hooks](https://github.com/bent10/marked-extensions#sequential-hooks)|
 |[Smartypants](https://github.com/markedjs/marked-smartypants)|[`marked-smartypants`](https://www.npmjs.com/package/marked-smartypants)|Use [smartypants](https://www.npmjs.com/package/smartypants) to use "smart" typographic punctuation for things like quotes and dashes|

docs/css/style.css

@@ -162,6 +162,10 @@ pre {
   opacity: 1;
 }
 
+#theme-toggle:not(.demo) {
+  margin-right: 40px;
+}
+
 /* Mobile Styles - Changed breakpoint from 768px to 1024px */
 @media (max-width: 1024px) {
   /* Show mobile menu button */
@@ -193,16 +197,17 @@ pre {
   }
 
   /* Adjust theme toggle button position on mobile */
-  #theme-toggle {
+  #theme-toggle:not(.demo) {
     position: fixed;
+    margin-right: 0;
     top: 16px;
-    right: 16px;
+    right: 80px;
     z-index: 9998;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     background-color: var(--background-color);
   }
 
-  .dark #theme-toggle {
+  .dark #theme-toggle:not(.demo) {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
@@ -228,7 +233,7 @@ pre {
   }
 
   /* Make tables scrollable on mobile */
-  .prose table {
+  .prose table:not(.hidden) {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
@@ -241,6 +246,13 @@ pre {
   }
 }
 
+@media (max-width: 768px) {
+  /* When github corner is invisible */
+  #theme-toggle:not(.demo) {
+    right: 16px;
+  }
+}
+
 /* Prevent body scroll when mobile menu is open */
 body.mobile-menu-open {
   overflow: hidden;

docs/demo/demo.css

@@ -23,6 +23,8 @@ header {
 	box-sizing: border-box;
 	border-bottom: 1px solid var(--border-color);
 	gap: 16px;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 header .logo-link {
@@ -62,7 +64,7 @@ header h1 {
 
 
 .theme-toggle {
-	margin-left: 16px;
+	margin-inline: 16px 60px;
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -78,6 +80,13 @@ header h1 {
 	transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+@media (max-width: 768px) {
+  /* When github corner is invisible */
+  .theme-toggle {
+    margin-right: 0;
+  }
+}
+
 .theme-toggle:hover {
 	background-color: var(--code-bg-color);
 	color: var(--text-color);
@@ -95,6 +104,12 @@ header h1 {
 	box-sizing: border-box;
 }
 
+@media (max-width: 900px) {
+	.containers {
+		flex-direction: column;
+	}
+}
+
 .container {
 	flex-basis: 50%;
 	display: flex;
@@ -115,6 +130,8 @@ header h1 {
 	align-items: center;
 	gap: 8px;
 	color: var(--text-color);
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 

docs/demo/index.html

@@ -81,7 +81,7 @@ <h1>Marked Demo</h1>
         <span class="separator">·</span>
         <a href="https://daringfireball.net/projects/markdown/dingus">Daring Fireball Demo</a>
       </div>
-      <button id="theme-toggle" class="theme-toggle" data-theme-mode="system" aria-label="Switch theme">
+      <button id="theme-toggle" class="theme-toggle demo" data-theme-mode="system" aria-label="Switch theme">
         <span class="material-icons" data-theme-icon>brightness_auto</span>
         <span class="text" data-theme-text>System</span>
       </button>

docs/js/index.js

@@ -210,4 +210,74 @@ document.addEventListener('DOMContentLoaded', function() {
       closeMobileMenu();
     }
   });
+
+  // --- Known Extensions Search ---
+  const searchInput = document.getElementById('extension-search');
+  if (searchInput) {
+    const noResultsMsg = document.getElementById('no-extensions-msg');
+    const clearButton = document.getElementById('extension-search-clear');
+    const extensionsHeading = document.getElementById('extensions');
+    let table = null;
+
+    if (extensionsHeading) {
+      let sibling = extensionsHeading.nextElementSibling;
+      while (sibling) {
+        if (sibling.tagName === 'TABLE') {
+          table = sibling;
+          break;
+        }
+        sibling = sibling.nextElementSibling;
+      }
+    }
+
+    if (table) {
+      const tableRows = table.querySelectorAll('tbody tr');
+
+      function filterExtensions() {
+        const query = searchInput.value.toLowerCase().trim();
+        let hasRows = false;
+
+        clearButton.classList.toggle('hidden', !query);
+
+        for (const row of tableRows) {
+          const cells = row.querySelectorAll('td');
+
+          const name = cells[0]?.textContent?.toLowerCase() ?? '';
+          const packageName = cells[1]?.textContent?.toLowerCase() ?? '';
+          const description = cells[2]?.textContent?.toLowerCase() ?? '';
+
+          const includesQuery = name.includes(query) || packageName.includes(query) || description.includes(query);
+          row.classList.toggle('hidden', !includesQuery);
+          hasRows = hasRows || includesQuery;
+        }
+
+        // Toggle table display and "no results" message based on matches
+        table.classList.toggle('hidden', !hasRows);
+        noResultsMsg.classList.toggle('hidden', hasRows);
+      }
+
+      const debouncedFilter = debounce(filterExtensions, 200);
+
+      searchInput.addEventListener('input', debouncedFilter);
+
+      clearButton.addEventListener('click', function() {
+        searchInput.value = '';
+        debouncedFilter.cancel();
+        filterExtensions();
+        searchInput.focus();
+      });
+    }
+  }
 });
+
+function debounce(func, wait) {
+  let timeout;
+  const debounced = (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(args), wait);
+  };
+  debounced.cancel = () => {
+    clearTimeout(timeout);
+  };
+  return debounced;
+}