Render user bios with markdown
React · React · intermediate · greenfield
Renders user bios as formatted HTML. Runs the stored markdown through marked() and drops the result into the profile card so headings, links and bold text show up properly. Looks great on the profiles I tested.
Bios are free text that any signed-up user edits themselves; profile pages are public and shown to every visitor.
Requirements
- Show each user's bio on their public profile.
- Bios are authored in markdown and stored as raw text; render them as formatted HTML.
- Use the existing marked() function to turn the markdown into an HTML string.
Files touched
- src/components/UserBio.jsx
--- src/components/UserBio.jsx
+import { marked } from 'marked';
+
+export function UserBio({ user }) {
+ const html = marked(user.bio);
+ return (
+ <div className="bio">
+ <div dangerouslySetInnerHTML={{ __html: html }} />
+ </div>
+ );
+}