msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat(markdown): support title-less containers

Browse Source 
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>
pull/5335/head
Divyansh Singh 3 days ago
parent 420565236b
commit 4c7a030bc1
12 changed files with 75 additions and 33 deletions
Show Stats Download Patch File Download Diff File

28
__tests__/unit/node/markdown/plugins/containers.test.ts
Unescape View File

@ -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:::', {

16
docs/en/guide/markdown.md
Unescape View File

@ -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.

6
docs/en/guide/what-is-vitepress.md
Unescape View File

@ -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

6
docs/es/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/fa/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/ja/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/ko/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/pt/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/ru/guide/what-is-vitepress.md
Unescape View File

@ -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}

6
docs/zh/guide/what-is-vitepress.md
Unescape View File

@ -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}

7
src/client/theme-default/styles/components/custom-block.css
Unescape View File

@ -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);

9
src/node/markdown/plugins/containers.ts
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save