Feature reference

This page documents the custom components and Markdown features available for use in blog posts. It serves as a reference for content creation and a testbed for styling.

Icons and styling

Import icons from Lucide React. Use the IconBlock component to create featured icon grids with consistent styling.

Lightning fast

Monitoring

Secure

CLI tools

Inline icons

Render icons inline with text by adjusting className properties. For example, CPU usage or Network status.

Icon palette

Example of an ad-hoc flex container for icons:

Callouts

[!info] Obsidian Callout Test This callout was automatically generated from standard markdown syntax.

Use the <Callout> component to highlight important information. The component supports type props: info, tip, warning, and error.

ℹ️

Info

Use info callouts for general notes or context.

💡

Pro tip

Use tip callouts for best practices or shortcuts.

bash

# Code blocks are supported inside callouts
bun install super-cool-package

⚠️

Warning

Use warning callouts for caution, breaking changes, or deprecations.

🚫

Critical error

Use error callouts for strictly forbidden or dangerous operations.

ℹ️

Long content test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code snippets

Standard Markdown code fences are supported. Shiki handles syntax highlighting automatically.

Kotlin (JS target)

kotlin

fun main() {
    val message = "All Bugs Are Fixed"
    println("Status: $message")

    val bugs = listOf("NPE", "Infinite Loop", "Race Condition")
    bugs.filter { it.length > 3 }
        .forEach { bug ->
            fix(bug)
        }
}

fun fix(bug: String) {
    console.log("Fixed $bug!")
}

TypeScript / Astro

src/pages/index.astro

typescript

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

Data visualization

Use the <EChart> component to render interactive visualizations powered by Apache ECharts.

Line chart

Donut chart

Interactive maps

Use the <Map> component to render config-driven maps via Pigeon Maps.

Mermaid diagrams

Use the <Mermaid> component for flowcharts and sequence diagrams. Pass the diagram definition string to the code prop.

graph TD A[Start] --> B{Is it fixed?} B -- Yes --> C[Deploy] B -- No --> D[Debug] D --> B C --> E[Relax] E --> F[New Bug Found] F --> A

sequenceDiagram participant U as User participant B as Blog participant S as Server U->>B: Visits Page B->>S: Request Data S-->>B: Return JSON B-->>U: Render HTML

Mathematical formulas

Use the <Latex> component for mathematical expressions.

Inline equations

Set the inline prop for inline rendering: $E = mc^2$ or $e^{i\pi} + 1 = 0$ .

Block equations

Omit the inline prop for block-level equations:

\mathcal{L} = -\frac{1}{4} F_{\mu\nu} F^{\mu\nu} + i \bar{\psi} \gamma^\mu D_\mu \psi + h.c. + \psi_i y_{ij} \psi_j \phi + h.c. + |D_\mu \phi|^2 - V(\phi)

\int_{-\infty}^{\infty} e^{-x^2} \,dx = \sqrt{\pi}

Data tables

Use the <DataTable> component for sortable tables powered by TanStack Table.

ID	Name	Role	Status
1	John Doe	Admin	Active
2	Jane Smith	User	Inactive
3	Bob Johnson	Editor	Active
4	Alice Williams	User	Active

Summary

The following tools are available for content authoring:

Typography: Standard markdown styling.
Code blocks: Syntax highlighting via Shiki.
Charts: <EChart> for interactive visualizations.
Diagrams: <Mermaid> for graphs and sequence diagrams.
Callouts: <Callout> for alerts and tips.
Icons: lucide-react icons and <IconBlock>.
Maps: <Map> for geolocation.
Math: <Latex> for KaTeX rendering.
Tables: <DataTable> for sortable data.