This Template's MDX Extensions

On top of standard MDX syntax, this template adds a few extensions that make writing post content easier.

• Call up a <Callout> / <Alert> with :::type[label]
• Expand a paragraph containing only a URL into an external link card
• Generate a link or card to an internal post with [[slug]]
• Code highlighting via astro-expressive-code

This post is a sample for checking each piece of syntax and how it actually looks.

Callout (:::type[label])

Add a label like :::type[title] and it is converted into a <Callout>. This page shows five types: tip / warning / check / info / help / alert.

:::tip[Tip title]
Use this to emphasize a key point.
:::

:::warning[Warning title]
Use this to call attention to something.
:::

...

Alert (:::type)

Omit the label ([]) and it is converted into an <Alert> with no title area.

:::warning
Omit the label and you get an Alert with no title area.
:::

A case with multiple elements inside

You can use basic Markdown directly inside ::: as well. Let’s check that lists, links, emphasis, and the like line up without breaking.

External link cards (automatic URL expansion)

A paragraph containing only a URL is expanded at build time into a <LinkCard type="external"> by fetching the target site’s OGP. Fetch results are cached as JSON with an MD5 hash under .cache/ogp/, and within the 7-day TTL they are not re-fetched.

https://lism-css.com/en/

How it looks:

Lism CSS The official documentation site for Lism CSS.

Lism CSS

GitHub - lism-css/lism-css Contribute to lism-css/lism-css development by creating an account on GitHub.

GitHub

Overriding

For sites where the fetch fails, or when you want to set the title and description yourself, you can write <LinkCard type="external"> directly in MDX.

<LinkCard type="external" href="https://example.com" title="Custom title" description="Write your own description here." />

Custom title Write your own description here.

example.com

Internal link cards ([[slug]])

Use Obsidian-style [[slug]] syntax to reference a post within the same blog. The slug is the filename (without extension) under src/posts/{category}/.

Card from a standalone paragraph

Write [[slug]] as a standalone paragraph and it pulls the post’s info from Content Collections and outputs a <LinkCard type="internal">.

[[lism-css-intro]]

An Overview of Lism CSS Lism CSS is a lightweight CSS design framework that brings together @layer-based cascade management, design tokens, Property Classes, layout primitives, and React/Astro components. This post walks through its main building blocks.

2026.04.20 TECH

Inside the blog-astro-techlog template A spec summary of the Astro template for tech blogs that ships with the Lism CSS repository.

2026.04.25 TECH

Inline links

Write [[slug]] in the middle of a paragraph and you get an inline link with the post title as its text.

For details, see [[lism-css-intro]].

For details, see An Overview of Lism CSS.

Overriding the display text

Use [[slug|display text]] to override the display text. Even as a standalone paragraph, it is treated as a link when an alias is present (write it without an alias when you want a card).

See [[lism-css-intro|the previous post]].

See the previous post.

Code highlighting (astro-expressive-code)

Syntax highlighting for code blocks uses astro-expressive-code. Because astro.config.mjs sets themes: 'github-dark', the same color scheme (GitHub Dark) is applied in both light and dark mode. To switch between multiple themes, pass an array such as themes: ['github-dark', 'github-light'] and use themeCssSelector to sync with your site’s theme toggle.

Beyond plain code blocks, you can also add a filename title, highlight specific lines, show diffs, and more.

```ts title="src/lib/archive.ts" {3}
export function getArchiveKey(date: string) {
  const [year, month] = date.split(/[-./]/);
  return { year, month };
}
```

export function getArchiveKey(date: string) {
  const [year, month] = date.split(/[-./]/);
  return { year, month };
}

```bash title="Terminal"
pnpm install
pnpm dev
```

pnpm install
pnpm dev

Where the specs live

The remark plugins that implement each piece of syntax are gathered under src/lib/.

For details, see the template walkthrough in Inside the blog-astro-techlog template.