From e9c9091ef3849208cd47653572a24cd96121f767 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Sun, 7 Jun 2026 23:51:08 -0600 Subject: [PATCH 1/5] docs: add known extension search --- docs/USING_ADVANCED.md | 30 ++++++++++++++++++++++- docs/css/style.css | 2 +- docs/js/index.js | 55 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/docs/USING_ADVANCED.md b/docs/USING_ADVANCED.md index f2e459b102..6af6c2b5f9 100644 --- a/docs/USING_ADVANCED.md +++ b/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)`. + + +
+ + search + + + +
+ + + |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| diff --git a/docs/css/style.css b/docs/css/style.css index 39ec03ccbd..155fca5b51 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -228,7 +228,7 @@ pre { } /* Make tables scrollable on mobile */ - .prose table { + .prose table:not(.hidden) { display: block; overflow-x: auto; white-space: nowrap; diff --git a/docs/js/index.js b/docs/js/index.js index fe69aca6b5..3c5453e74b 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -210,4 +210,59 @@ 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); + } + + searchInput.addEventListener('input', filterExtensions); + + clearButton.addEventListener('click', function() { + searchInput.value = ''; + filterExtensions(); + searchInput.focus(); + }); + } + } }); From 4c33ca7e21c243cef0f2239cd12fc138f108fefc Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Mon, 8 Jun 2026 00:41:29 -0600 Subject: [PATCH 2/5] fix theme button on mobile --- docs/css/style.css | 18 +++++++++++++++--- docs/demo/demo.css | 13 ++++++++++++- docs/demo/index.html | 2 +- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 155fca5b51..7acf6fd5ad 100644 --- a/docs/css/style.css +++ b/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); } @@ -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; diff --git a/docs/demo/demo.css b/docs/demo/demo.css index 16d5f2de91..e156a4b2da 100644 --- a/docs/demo/demo.css +++ b/docs/demo/demo.css @@ -62,7 +62,7 @@ header h1 { .theme-toggle { - margin-left: 16px; + margin-inline: 16px 60px; display: flex; align-items: center; gap: 8px; @@ -78,6 +78,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); @@ -87,6 +94,10 @@ header h1 { font-size: 20px; } +@media screen { + +} + .containers { display: flex; height: calc(100vh - 68px); diff --git a/docs/demo/index.html b/docs/demo/index.html index 85dff2194f..df9fa87660 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -81,7 +81,7 @@

Marked Demo

ยท Daring Fireball Demo - From 910dc14f2d2f5492277a8d2c0b407fb714f935fd Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Mon, 8 Jun 2026 01:20:36 -0600 Subject: [PATCH 3/5] fix demo scrollbars --- docs/demo/demo.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/demo/demo.css b/docs/demo/demo.css index e156a4b2da..c3b83f3c15 100644 --- a/docs/demo/demo.css +++ b/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 { @@ -94,10 +96,6 @@ header h1 { font-size: 20px; } -@media screen { - -} - .containers { display: flex; height: calc(100vh - 68px); @@ -106,6 +104,12 @@ header h1 { box-sizing: border-box; } +@media (max-width: 900px) { + .containers { + flex-direction: column; + } +} + .container { flex-basis: 50%; display: flex; @@ -126,6 +130,8 @@ header h1 { align-items: center; gap: 8px; color: var(--text-color); + overflow-x: auto; + overflow-y: hidden; } From 0b002872a5af3baff359f76400f04361f076f2b7 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Mon, 8 Jun 2026 01:35:32 -0600 Subject: [PATCH 4/5] fix lint --- docs/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/index.js b/docs/js/index.js index 3c5453e74b..de9448cfed 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -246,7 +246,7 @@ document.addEventListener('DOMContentLoaded', function() { const packageName = cells[1]?.textContent?.toLowerCase() ?? ''; const description = cells[2]?.textContent?.toLowerCase() ?? ''; - const includesQuery = name.includes(query) || packageName.includes(query) || description.includes(query) + const includesQuery = name.includes(query) || packageName.includes(query) || description.includes(query); row.classList.toggle('hidden', !includesQuery); hasRows = hasRows || includesQuery; } From a22b2e82fdb319ba3f546ecbf4d68c25d8f24e3d Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Wed, 10 Jun 2026 22:28:27 -0600 Subject: [PATCH 5/5] debounce --- docs/js/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/js/index.js b/docs/js/index.js index de9448cfed..be35c7c306 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -256,13 +256,28 @@ document.addEventListener('DOMContentLoaded', function() { noResultsMsg.classList.toggle('hidden', hasRows); } - searchInput.addEventListener('input', filterExtensions); + 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; +}