Skip to content

docs: browser example for marked on page data #3864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
UziTech merged 5 commits into from
Dec 25, 2025
+45 −0
Merged

docs: browser example for marked on page data #3864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4aac6a6
docs: browser example for marked on page data
jhauga Dec 18, 2025
f51ebbd
Apply suggestions from code review
jhauga Dec 18, 2025
353e7aa
docs: browser example to USING_ADVANCED.md
jhauga Dec 24, 2025
0ef115a
Update docs/USING_ADVANCED.md
jhauga Dec 25, 2025
634822b
docs: update menu, close user ex details
jhauga Dec 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions docs/USING_ADVANCED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (<br/>, <img/>, 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`.
Expand Down
7 changes: 7 additions & 0 deletions docs/_document.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,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"
Expand Down