Markdown

Example

import { Markdown, MarkdownInline } from "@toimetdev/pathlogs-core";

<Markdown text={task.description} mentions={members.map((m) => m.name)} />

// inline markup only — for list entries and one-line captions
<MarkdownInline text={item.title} />

What is supported

# Heading           (levels 1–3)
**bold** *italic* ~~strikethrough~~ `code`

- bulleted list
1. numbered list

> a quote

---

[a link](https://example.com)

```ts
a code block
```

Heading levels stop at three, and the heading itself renders as a paragraph in a large face: user text has no business interfering with the page's heading structure or breaking its layout.

Safety

<Markdown text={"<script>alert(1)</script> — stays text.\n\n[Dangerous](javascript:alert(1)) — not a link."} />

Images are deliberately absent: they let someone pull a reader's IP to a third-party server, and they break list layout.

Mentions

A list of known names highlights @mentions in the text:

<Markdown text={comment.body} mentions={project.members.map((m) => m.name)} />

Names are sorted from longest to shortest: otherwise «@John» would swallow the start of «@John Smith», and the mention would fall apart into a highlight plus a tail of text. Special characters in names are escaped — a name with a dot does not become «any character».

The parser, separately

The grammar is available without React too — for a table of contents or search:

import { parseBlocks, parseInline, parseInlineWithMentions } from "@toimetdev/pathlogs-core";

parseBlocks("# Heading\n\ntext");
// [{ kind: "h", level: 1, text: "Heading" }, { kind: "p", lines: ["text"] }]

parseInline("**bold**");
// [{ kind: "strong", children: [{ kind: "text", text: "bold" }] }]