diff --git a/__tests__/unit/node/markdown/plugins/containers.test.ts b/__tests__/unit/node/markdown/plugins/containers.test.ts index ca2ec1ecc..e4b19cee2 100644 --- a/__tests__/unit/node/markdown/plugins/containers.test.ts +++ b/__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(` + "
+

content

+
+
+

content

+
+
Details +

still needs its summary

+
+ " + `) + }) + test('keeps fence line braces verbatim when attrs are disabled', async () => { expect( await render('::: details Click me {open}\ncontent\n:::', { diff --git a/docs/en/guide/markdown.md b/docs/en/guide/markdown.md index 762cefe79..50999dc1a 100644 --- a/docs/en/guide/markdown.md +++ b/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. diff --git a/docs/en/guide/what-is-vitepress.md b/docs/en/guide/what-is-vitepress.md index fd6930e17..91358ac55 100644 --- a/docs/en/guide/what-is-vitepress.md +++ b/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. -
- +::: tip {no-title} Just want to try it out? Skip to the [Quickstart](./getting-started). - -
+::: ## Use Cases diff --git a/docs/es/guide/what-is-vitepress.md b/docs/es/guide/what-is-vitepress.md index 0a57e85e9..03f8d865c 100644 --- a/docs/es/guide/what-is-vitepress.md +++ b/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. -
- +::: tip {no-title} ¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started). - -
+::: ## Casos de Uso {#use-cases} diff --git a/docs/fa/guide/what-is-vitepress.md b/docs/fa/guide/what-is-vitepress.md index 6ddb879b8..4ad21397c 100644 --- a/docs/fa/guide/what-is-vitepress.md +++ b/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 ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند. -
- +::: tip {no-title} فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید. - -
+::: ## موارد استفاده {#use-cases} diff --git a/docs/ja/guide/what-is-vitepress.md b/docs/ja/guide/what-is-vitepress.md index 0c9e9fc04..88e8c9d93 100644 --- a/docs/ja/guide/what-is-vitepress.md +++ b/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 ページを生成します。 -
- +::: tip {no-title} まずは試してみたい？ [クイックスタート](./getting-started) へどうぞ。 - -
+::: ## ユースケース {#use-cases} diff --git a/docs/ko/guide/what-is-vitepress.md b/docs/ko/guide/what-is-vitepress.md index 20e237255..fc34e9afc 100644 --- a/docs/ko/guide/what-is-vitepress.md +++ b/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 페이지를 생성합니다. -
- +::: tip {no-title} 그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요. - -
+::: ## 사용 사례 {#use-cases} diff --git a/docs/pt/guide/what-is-vitepress.md b/docs/pt/guide/what-is-vitepress.md index e11e7031a..3119c8934 100644 --- a/docs/pt/guide/what-is-vitepress.md +++ b/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. -
- +::: tip {no-title} Quer apenas experimentar? Pule para o [Início Rápido](./getting-started). - -
+::: ## Casos de Uso {#use-cases} diff --git a/docs/ru/guide/what-is-vitepress.md b/docs/ru/guide/what-is-vitepress.md index d70b13084..165a4f55c 100644 --- a/docs/ru/guide/what-is-vitepress.md +++ b/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-страницы, которые можно легко развернуть в любом месте. -
- +::: tip {no-title} Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started). - -
+::: ## Примеры использования {#use-cases} diff --git a/docs/zh/guide/what-is-vitepress.md b/docs/zh/guide/what-is-vitepress.md index f2dae037a..54203b48a 100644 --- a/docs/zh/guide/what-is-vitepress.md +++ b/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 页面。 -
- +::: tip {no-title} 只是想尝试一下？跳到[快速开始](./getting-started)。 - -
+::: ## 使用场景 {#use-cases} diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css index a960381c6..f3445a81d 100644 --- a/src/client/theme-default/styles/components/custom-block.css +++ b/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); diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts index 00cb88800..64b503840 100644 --- a/src/node/markdown/plugins/containers.ts +++ b/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 `
\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