vitepress: Support code groups and allow adding title to code blocks

Is your feature request related to a problem? Please describe.

VueJS community is moving from JS to TS now. Hence, we have to provide both TS & JS code.

I already started using VitePress alpha in my OSS project but for another project, I prefer providing TS & JS code via code groups like VuePress.

Describe the solution you’d like

Provide code blocks via markdown (using component is bit ugly for markdown only content). We can inspire from Nuxt content 2 for new syntax

:::code group

:::group{ts}

```ts
const a: number = 1
```

:::

:::group{js}

```js
const a = 1
```

:::

:::

Describe alternatives you’ve considered

None

Additional context

https://content.nuxtjs.org/guide/writing/mdc

Validations

Follow our Code of Conduct
Read the docs.
Read the Contributing Guidelines.
Check that there isn’t already an issue that asks for the same feature to avoid creating a duplicate.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 18 (16 by maintainers)

Commits related to this issue

feat: add code-group feature (#728) (#1560) close #728 close #1242 Co-authored-by: "Jinjing.Zhou" <allenzhou@tensorchord.ai> Co-authored-by: Kia King Ishii <kia.king.08@gmail.com> — committed to LoTwT/vitepress by brc-dd 2 years ago

Most upvoted comments

We can custom group title in code block

```ts [TypeScript]
const a: number = 1
```

Minimizing layers (especially this kind without indentation) is useful to keep the plain text readability of markdown.

kecrily on Jun 6, 2022

@kecrily I guess the OP meant to have title of each group too. :::group{foo} --> title is foo.

brc-dd on Jun 6, 2022

@VoVAllen Yeah, that’s similar to what others wrote. This is the intended syntax BTW:

:::code-group

```js [JavaScript]
some js stuff
```

```ts [TypeScript]
some ts stuff
```

:::

So, if you implement such a component (the one you wrote), then we just need to add some stuff in our markdown component plugin to make it understand :::code-group and ```ts [TypeScript].

brc-dd on Aug 24, 2022

Off-topic: this behavior is consistent with that on GitHub. On GitHub you can also embed markdown in html with line breaks.

kecrily on Jun 10, 2022

@marshallswain Sorry, I didn’t get you. You can still do what you’ve wrote. You need to add spaces before and after the fences in this. HTML (or Vue in this case) should be separated from Markdown by empty lines.

brc-dd on Jun 9, 2022

Can you guys review #1560 and see if there are any issues (especially with UI)? Here is the deploy preview: https://deploy-preview-1560--vitepress-docs.netlify.app/test

brc-dd on Oct 30, 2022