docs: browser example for marked on page data

[jhauga]

Marked version:

Markdown flavor: https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js

Description

This is a simple PR to the documentations. It proposes an additional example for usage in the browser. A details tag was used so the example can be toggled, as to not break the flow of the current documentation.

The example shows how this tool could be used to render html elements as if markdown. See support-repo for an illustration of the example with markdown data. Click on the index.html link to view the GitHub page. The essentials from the example were carried over to the example index.html page.

Tested with npm run build:docs. All was good. And for fun ran npm run test. All was good.

Expectation

An additional example for browser use in the documentation.

Result

Someone first visiting the documentation will see how easy it is to use marked on an html page, using inline page data and how to render it as if markdown.

What was attempted

• php -S localhost with a test file with lots of data, and the elements from the proposed example. The rendered page was output as if markdown.

Contributor

• Test(s) exist to ensure functionality and minimize regression (if no tests added, list tests covering this PR); or,
• no tests required for this PR.
• If submitting new feature, it has been documented in the appropriate places.

Committer

In most cases, this should be a different person than the contributor.

• CI is green (no forced merge required).
• Squash and Merge PR following conventional commit guidelines.

[vercel]

@jhauga is attempting to deploy a commit to the MarkedJS Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @jhauga, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new, clear example to the documentation, showcasing how to easily integrate the marked library into a browser environment. The example specifically illustrates rendering inline markdown content within an HTML page, making it straightforward for developers to understand and implement marked for client-side markdown processing.

Highlights

• New Browser Example: An additional example for browser usage of marked has been added to the documentation.
• Inline Markdown Rendering: The example demonstrates how to render HTML elements containing markdown data directly on a page using marked.parse().
• Toggleable Content: The new example is enclosed within a <details> tag to prevent it from disrupting the flow of the existing documentation.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request adds a new browser usage example to the documentation, which is a great idea. However, the proposed implementation for rendering on-page markdown has a flaw: it can lead to incorrect rendering or data loss if the markdown contains characters that resemble HTML tags. I've provided review comments with a suggested alternative using a <textarea> which is a safer and more robust pattern. I've also suggested a more accurate title for the example. These changes will help ensure the example is reliable and clear for users.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
marked-website	Ready	Preview, Comment	Dec 24, 2025 6:59am

[UziTech]

Thanks for this. I think this would be better in the Advanced Usage page below the Known Extensions. We have a couple other examples of marked usage there.