Chapter 2 of 3••approx 4m read•Getting Started with Books

Chapter 2: Advanced Features

Deep dive into advanced markdown features and reusable MDX components: callouts, tabs, steps, quotes, pros/cons, link cards, video embeds, math, and syntax highlighting.

In this chapter, we’ll explore advanced markdown features and a reusable MDX component system that make technical documentation shine.

Warning the Reader (Gracefully)

Sometimes you need to grab the reader’s attention quickly. Maybe a dependency is deprecated, or there is a security vulnerability they should be aware of. Instead of bold text, we use a universal <Callout /> component.

Interactive Installation Guides

Top-tier docs offer npm, pnpm, and yarn installation options. With our custom <Tabs> component, providing this is frictionless:

bash frame="terminal" npm install @astrojs/mdx astro-expressive-code

bash frame="terminal" pnpm add @astrojs/mdx astro-expressive-code

bash frame="terminal" yarn add @astrojs/mdx astro-expressive-code

Following the Process

Instead of a standard unordered list, the <Steps> component renders a clear vertical timeline for tutorials:

    Initialize your project Run npm create astro@latest and choose the

    blog template to instantly scaffold a highly optimized site.

    Add MDX Run npx astro add mdx to install the official MDX integration

    into your content layer.

    Write components Drop reusable .astro components into

    src/components/ui/ and import them inside any .mdx chapter.

Code Syntax Highlighting

Code fences support titles, line highlights, diff markers, and a copy button — powered by Expressive Code.

Astro Page with Highlights

src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
import { getCollection } from 'astro:content';
const posts = await getCollection('post');
const drafts = posts.filter(p => !p.data.published);
const all = posts;
---
<Layout title="Welcome">
  <main><h1>Hello World</h1></main>
</Layout>

MDX is a format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

Chris Coyier — Co-founder of CodePen

Mathematics (KaTeX)

Calculus

Taylor Series Expansion:

f(x)=f(a)+f′(a)(x−a)+f′′(a)2!(x−a)2+f′′′(a)3!(x−a)3+⋯f(x) = f(a) + f'(a)(x-a) + \frac{f''(a)}{2!}(x-a)^2 + \frac{f'''(a)}{3!}(x-a)^3 + \cdots

Fourier Transform:

F{f(t)}=F(ω)=∫−∞∞f(t)e−iωt dt\mathcal{F}\{f(t)\} = F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-i\omega t} \,dt

Inverse Fourier Transform:

f(t)=12π∫−∞∞F(ω)eiωt dωf(t) = \frac{1}{2\pi} \int_{-\infty}^{\infty} F(\omega) e^{i\omega t} \,d\omega

Tables

Feature Comparison Matrix

FeaturePyTorchTensorFlowJAXNumPy
Dynamic Graph✅⚠️ (TF 2.x)✅N/A
GPU Support✅✅✅⚠️ (via CuPy)
AutoDiff✅✅✅❌
TPU Support❌✅✅❌
Production⚠️✅⚠️❌
Research✅⚠️✅✅
Learning CurveEasyModerateHardEasiest

Highlighting Information

When reviewing frameworks or methodologies, a ProsCons list is invaluable for letting your readers digest the trade-offs quickly:

Pros
  • Visually striking pages out-of-the-box
  • Higher reader engagement
  • Enforces consistent design system
Cons
  • Slightly increases initial build time
  • Authors must remember component syntax
Programming laptop
Programming at night: where bugs hide and features shine.

Sometimes explaining complex architectural concepts requires video. The <YouTube> embedder is zero-layout-shift and lazy-loaded:

When referencing external documentation, prefer a <LinkCard> over a bare hyperlink:

Astro 5.0 Release
Astro 5 brings a new Content Layer API, improved type safety, and better build performance.
astro.build

Sidenotes

Gradient descent Gradient descent is an optimization algorithm used to minimize a function by iteratively moving in the direction of steepest descent — the negative of the gradient. is the foundation of modern deep learning.

The learning rate The learning rate controls how much to adjust the model in response to the estimated error each step. Typical values: 0.001, 0.01, 0.1. is one of the most important hyperparameters.

Further Reading

Discussion

Sign in with GitHub to comment or react. Powered by giscus.