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#

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
pnpm 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#

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.