feat(markdown): support title-less containers

A no-title attribute (`::: tip {no-title}`) renders a container without
its title element, and the theme reduces the top padding for containers
without one. It has no effect on `details`, which always needs its
summary. The docs previously hand-rolled this with a raw div and an
inline style - those are now switched to the new syntax.

close #4928
close #4932
close #4929

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

__tests__/unit/node/markdown/plugins/containers.test.ts

@@ -157,6 +157,34 @@ describe('node/markdown/plugins/containers', () => {
     `)
   })
 
+  test('skips the title element with a no-title attr', async () => {
+    const src = [
+      '::: tip {no-title}',
+      'content',
+      ':::',
+      '',
+      '::: warning Discarded {no-title .extra-class}',
+      'content',
+      ':::',
+      '',
+      '::: details {no-title}',
+      'still needs its summary',
+      ':::'
+    ].join('\n')
+    expect(await render(src)).toMatchInlineSnapshot(`
+      "<div  class="tip custom-block">
+      <p>content</p>
+      </div>
+      <div  class="extra-class warning custom-block">
+      <p>content</p>
+      </div>
+      <details  class="details custom-block"><summary>Details</summary>
+      <p>still needs its summary</p>
+      </details>
+      "
+    `)
+  })
+
   test('keeps fence line braces verbatim when attrs are disabled', async () => {
     expect(
       await render('::: details Click me {open}\ncontent\n:::', {

docs/en/guide/markdown.md

@@ -295,6 +295,22 @@ console.log('Hello, VitePress!')
 ```
 :::
 
+The special `no-title` attribute renders a container without a title element (it has no effect on `details`, which always needs its summary):
+
+**Input**
+
+```md
+::: tip {no-title}
+Just want to try it out? Skip to the [Quickstart](./getting-started).
+:::
+```
+
+**Output**
+
+::: tip {no-title}
+Just want to try it out? Skip to the [Quickstart](./getting-started).
+:::
+
 ### `raw`
 
 This is a special container that can be used to prevent style and router conflicts with VitePress. This is especially useful when you're documenting component libraries.

docs/en/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress is a static site generator designed for building fast, co
 
 VitePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in [Markdown](https://en.wikipedia.org/wiki/Markdown), applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 Just want to try it out? Skip to the [Quickstart](./getting-started).
-
+:::
-</div>
 
 ## Use Cases
 

docs/es/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress es un generador de sitios estáticos diseñado para crear
 
 VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) diseñado para construir sitios web rápidos y enfocados en el contenido. En pocas palabras, VitePress toma tu contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), le aplica un tema y genera páginas HTML estáticas que se pueden desplegar fácilmente en cualquier lugar.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-  
 ¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started).
-
+:::
-</div>
 
 ## Casos de Uso {#use-cases}
 

docs/fa/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: ویت‌پرس یک تولیدکننده سایت ایستا بر
 
 ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید.
-
+:::
-</div>
 
 ## موارد استفاده {#use-cases}
 

docs/ja/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePressはViteとVueを基盤とした、高速でコンテンツ
 
 VitePress は、高速でコンテンツ中心の Web サイトを構築するための [静的サイトジェネレーター（SSG）](https://en.wikipedia.org/wiki/Static_site_generator) です。要するに、VitePress は [Markdown](https://en.wikipedia.org/wiki/Markdown) で書かれたソースコンテンツにテーマを適用し、どこにでも簡単にデプロイできる静的 HTML ページを生成します。
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 まずは試してみたい？ [クイックスタート](./getting-started) へどうぞ。
-
+:::
-</div>
 
 ## ユースケース {#use-cases}
 

docs/ko/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress는 Vite와 Vue로 구동되는 빠르고 콘텐츠 중심
 
 VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요.
-
+:::
-</div>
 
 ## 사용 사례 {#use-cases}
 

docs/pt/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress é um gerador de sites estáticos projetado para criar si
 
 O VitePress é um [Gerador de Site Estático](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) projetado para criar sites rápidos e centrados em conteúdo. Em suma, VitePress utiliza seu conteúdo-fonte escrito em [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica um tema a ele e gera páginas HTML estáticas que podem ser facilmente implantadas em qualquer lugar.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 Quer apenas experimentar? Pule para o [Início Rápido](./getting-started).
-
+:::
-</div>
 
 ## Casos de Uso {#use-cases}
 

docs/ru/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress — это генератор статических са
 
 VitePress — это [Генератор статических сайтов](https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B_%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2) (ГСС), предназначенный для быстрого создания сайтов, ориентированных на контент. В двух словах, VitePress берёт ваш исходный контент, написанный на [Markdown](https://ru.wikipedia.org/wiki/Markdown), применяет к нему тему и генерирует статические HTML-страницы, которые можно легко развернуть в любом месте.
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started).
-
+:::
-</div>
 
 ## Примеры использования {#use-cases}
 

docs/zh/guide/what-is-vitepress.md

@@ -6,11 +6,9 @@ description: VitePress 是一个专为构建快速、以内容为中心的网站
 
 VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
 
-<div class="tip custom-block" style="padding-top: 8px">
+::: tip {no-title}
-
 只是想尝试一下？跳到[快速开始](./getting-started)。
-
+:::
-</div>
 
 ## 使用场景 {#use-cases}
 

src/client/theme-default/styles/components/custom-block.css

@@ -1,12 +1,17 @@
 .custom-block {
   border: 1px solid transparent;
   border-radius: 8px;
-  padding: 16px 16px 8px;
+  padding: 8px 16px;
   line-height: 24px;
   font-size: var(--vp-custom-block-font-size);
   color: var(--vp-c-text-2);
 }
 
+/* containers rendered with `{no-title}` keep the reduced padding */
+.custom-block:has(> .custom-block-title, > summary) {
+  padding-top: 16px;
+}
+
 .custom-block.info {
   border-color: var(--vp-custom-block-info-border);
   color: var(--vp-custom-block-info-text);

src/node/markdown/plugins/containers.ts

@@ -71,8 +71,11 @@ function createOpenRender(
     const token = tokens[idx]
     let info = token.info.trim().slice(name.length).trim()
     if (attrs) info = applyFenceAttrs(token, info)
+    // details always needs its summary, so no-title is ignored there
+    const noTitle = attrPop(token, 'no-title') === '' && name !== 'details'
     token.attrJoin('class', `${name} custom-block`)
     const renderedAttrs = md.renderer.renderAttrs(token)
+    if (noTitle) return `<div ${renderedAttrs}>\n`
     const title = md.renderInline(info || defaultTitle, {
       references: env.references
     })
@@ -84,6 +87,12 @@ function createOpenRender(
   }
 }
 
+function attrPop(token: Token, name: string): string | null {
+  const idx = token.attrIndex(name)
+  if (idx < 0) return null
+  return token.attrs!.splice(idx, 1)[0][1]
+}
+
 // `::: tip Title {#id .class key="value" bare}` - the attrs plugin only
 // handles fence lines through its `fence` rule, which is disabled to keep
 // code block meta intact, so its trailing-braces syntax is parsed here