From f36fe573b145ceb88661ca296f0444f28e6ec7f4 Mon Sep 17 00:00:00 2001
From: Shinigami92 <chrissi92@hotmail.de>
Date: Sun, 23 Jul 2023 10:59:40 +0200
Subject: [PATCH] Add code groups to docs

---
 docs/guide/index.md | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/docs/guide/index.md b/docs/guide/index.md
index 958116e8..b2c35a76 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -4,27 +4,49 @@
 
 Simply install `prettier` and `@prettier/plugin-pug` as your project’s npm `devDependencies`:
 
-```bash
+::: code-group
+
+```shell [npm]
 npm add --save-dev prettier @prettier/plugin-pug
-yarn add --dev prettier @prettier/plugin-pug
+```
+
+```shell [pnpm]
 pnpm add --save-dev prettier @prettier/plugin-pug
 ```
 
+```shell [yarn]
+yarn add --dev prettier @prettier/plugin-pug
+```
+
+:::
+
 ## Usage
 
 Format all pug files in your project:
 
-```bash
+::: code-group
+
+```shell [npm]
 npx prettier --write "**/*.pug"
-yarn prettier --write "**/*.pug"
+```
+
+```shell [pnpm]
 pnpm prettier --write "**/*.pug"
 ```
 
+```shell [yarn]
+yarn prettier --write "**/*.pug"
+```
+
+:::
+
 ### Selectively ignoring automatic formatting
 
 You can disable code formatting for a particular element by adding `//- prettier-ignore` comments in your pug templates:
 
-```pug
+::: code-group
+
+```pug [Input]
 div.text( color =   "primary",  disabled  ="true"  )
 //- prettier-ignore
 div.text( color =   "primary",  disabled  ="true"  )
@@ -33,9 +55,7 @@ div
   div.text( color =   "primary",  disabled  ="true"  )
 ```
 
-Prettified output:
-
-```pug
+```pug [Output]
 .text(color="primary", disabled)
 //- prettier-ignore
 div.text( color =   "primary",  disabled  ="true"  )
@@ -44,6 +64,8 @@ div
   div.text( color =   "primary",  disabled  ="true"  )
 ```
 
+:::
+
 You can also disable code formatting in Markdown for a particular ` ```pug ` block by adding`<!-- prettier-ignore -->` before the block:
 
 ````markdown