docs: browser example for marked on page data (#3864)

jhauga · gemini-code-assist[bot] · UziTech · web-flow · commit e1458594761f · 2025-12-24T19:57:14.000-07:00
* docs: browser example for marked on page data

* Apply suggestions from code review

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;

* docs: browser example to USING_ADVANCED.md

* Update docs/USING_ADVANCED.md

Applied suggestion. Thank you.

Co-authored-by: Tony Brix &lt;tony@brix.ninja&gt;

* docs: update menu, close user ex details

---------

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;
Co-authored-by: Tony Brix &lt;tony@brix.ninja&gt;
diff --git a/docs/USING_ADVANCED.md b/docs/USING_ADVANCED.md
@@ -111,6 +111,44 @@ Marked can be extended using [custom extensions](/using_pro#extensions). This is
 |[Typograf](https://github.com/laidrivm/marked-typograf)|[`marked-typograf`](https://www.npmjs.com/package/marked-typograf)|Use [typograf](https://www.npmjs.com/package/typograf) as a more powerful and extendable alternative to Smartypants for creating “smart” typographic punctuation, such as quotes and dashes.|
 |[XHTML](https://github.com/markedjs/marked-xhtml)|[`marked-xhtml`](https://www.npmjs.com/package/marked-xhtml)|Emit self-closing HTML tags for void elements (&lt;br/&gt;, &lt;img/&gt;, etc.) with a "/" as required by XHTML.|
 
+<h2 id="user-examples">User Examples</h2>
+
+<details>
+
+<summary>Marked can render on-page content as markdown in the browser.</summary>
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+   <!-- Suggested stylesheet -->
+   <link rel="stylesheet" 
+    href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css"
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+   <title>Marked for the full page</title>
+ </head>
+
+ <body> 
+  <textarea id="markdown-source" style="display: none;">
+# Title
+
+Lots of text using **markdown syntax.**
+  </textarea>
+  <div id="content" class="markdown-body"></div>
+  
+  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
+  <script>
+    const source = document.getElementById('markdown-source').value;
+    
+    // Parse the markdown and render it into the content div.
+    document.getElementById('content').innerHTML = marked.parse(source);
+  </script>
+ </body>
+</html>
+```
+</details>
+
 <h2 id="inline">Inline Markdown</h2>
 
 You can parse inline markdown by running markdown through `marked.parseInline`.
diff --git a/docs/_document.html b/docs/_document.html
@@ -259,6 +259,13 @@
                   >Known Extensions</a
                 >
               </li>
+              <li>
+                <a
+                  class="block hover:text-primary dark:hover:text-primary"
+                  href="/using_advanced#user-examples"
+                  >User Examples</a
+                >
+              </li>
               <li>
                 <a
                   class="block hover:text-primary dark:hover:text-primary"
