All blocks
Block
Markdown showcase
One assistant message exercising every pk-markdown feature at once: headings, fenced code, inline + block math, and a Mermaid diagram. Math + diagrams lazy-load only when the flags are on.
Math · code · Mermaid in one reply
<div hlmMessage>
<pk-message-avatar src="" alt="Assistant" fallback="AI" />
<pk-markdown
class="prose prose-sm dark:prose-invert flex-1"
[enableMath]="true"
[enableDiagrams]="true"
[content]="doc"
/>
</div>
// Component
protected readonly doc = `# How vector search works
Given a query vector \(q\) and document vectors \(d_1, ..., d_n\),
cosine similarity is
$$\text{sim}(q, d_i) = \frac{q \cdot d_i}{\|q\| \|d_i\|}$$
\`\`\`mermaid
flowchart LR
Q[Query text] --> E[Embedder] --> V[Query vector] --> S[ANN search]
\`\`\`
\`\`\`ts
async function search(query: string, k = 10) {
const [vec] = await embed([query]);
return db.execute(
'SELECT id, text FROM docs ORDER BY embedding <=> $1 LIMIT $2',
[vec, k],
);
}
\`\`\`
`;
// Reminder: KaTeX needs the stylesheet in angular.json:
// "node_modules/katex/dist/katex.min.css"
// and Mermaid auto-loads only when [enableDiagrams]="true".