Markdown, editors and content: live code examples
15 examples for 3 libraries. Open one to read how it works, run it in your browser and change it, by hand or with AI.
All 231 examples UI components and icons Utilities Forms, validation and schemas Animation and motion 3D and graphics Web frameworks State and data fetching Files, images and media Styling and CSS Auth and security libraries Charts and data visualisation HTTP clients and networking Game development
react-markdown 5 examples · usage and stats
Rendering markdown with react-markdownType in the left box: the right side re-renders the markdown on every keystroke.
Custom components in react-markdownChange the colours in the h2 or blockquote component and the rendered markdown updates at once.
Filtering elements in react-markdownEdit the tag lists in each panel and compare how the same markdown is rendered.
Handling HTML in markdown with react-markdownCompare the two panels: the left shows the raw tags as text, the right drops them.
Transforming link URLs in react-markdownCompare the hrefs in both panels; try adding a link with another protocol to the markdown.Marked 5 examples · usage and stats
Converting Markdown to HTML with MarkedChange the Markdown in the md string and both panels update when the code reruns.
GitHub Flavored Markdown tables in MarkedAdd a row to the table or tick another task with [x] to see it render.
The breaks option in MarkedThe left panel runs the four lines together; the right keeps them on separate lines.
A live Markdown preview with MarkedType in the left pane: headings, lists and **bold** text appear in the preview as you type.
Removing zero-width characters before MarkedCompare the two panels: the raw input shows "# Changelog" as text, the cleaned one renders a heading.React Syntax Highlighter 5 examples · usage and stats
Highlight code in ReactClick a language button to re-highlight a different snippet.
Prism highlighting for JSXEdit the codeString to see the JSX re-highlighted as you type.
Line numbers in react-syntax-highlighterChange startingLineNumber and the highlighted number in lineNumberStyle to move the marker.
Highlight specific linesEdit the added and removed sets to move the colored stripes.
Custom CSS theme with class namesChange a color in the css string, for example .hljs-string, to restyle every token of that kind.