From 0851827d7f39ef9166ea487085e4c31a976fa4b8 Mon Sep 17 00:00:00 2001 From: Derek Pollard Date: Mon, 21 Sep 2020 16:38:02 -0500 Subject: [PATCH 1/4] docs: add in CodeGroup and CodeBlock usage docs --- .../docs/docs/theme/default-theme-config.md | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index d2982c1549..cdaac78701 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -557,6 +557,90 @@ layout: SpecialLayout This will render `.vuepress/components/SpecialLayout.vue` for the given page. +## Code Groups and Code Blocks +The default theme comes with custom components `` and `` that can help you to better group +separate code paths that have the same end result. + +**Example** + +Yarn and NPM installation instructions + +**Input** +````md + + +```bash +yarn create vuepress-site [optionalDirectoryName] +``` + + + +```bash +npx create-vuepress-site [optionalDirectoryName] +``` + + +```` + +**Output** + + + +```bash +yarn create vuepress-site [optionalDirectoryName] +``` + + + +```bash +npx create-vuepress-site [optionalDirectoryName] +``` + + + +::: tip +Each `` must have a line break after it in order to render properly +::: + +### Default Code Block + +By default, `` will use the first `` as the active initial code block. + +If you would like to manually set the active ``, you can do so by simply adding `active` to the element: + +**Input** +````md + + +```bash +yarn create vuepress-site [optionalDirectoryName] +``` + + + +```bash +npx create-vuepress-site [optionalDirectoryName] +``` + + +```` + +**Output** + + + +```bash +yarn create vuepress-site [optionalDirectoryName] +``` + + + +```bash +npx create-vuepress-site [optionalDirectoryName] +``` + + + ## Ejecting You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn’t install VuePress globally, run `./node_modules/.bin/vuepress eject`. From a55b91cd084bc48f559ea39198310664b74fc7b4 Mon Sep 17 00:00:00 2001 From: Derek Pollard Date: Mon, 21 Sep 2020 16:48:37 -0500 Subject: [PATCH 2/4] docs: add in CodeGroup and CodeBlock usage docs --- packages/docs/docs/theme/default-theme-config.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index cdaac78701..7d1b5ea472 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -559,11 +559,11 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page. ## Code Groups and Code Blocks The default theme comes with custom components `` and `` that can help you to better group -separate code paths that have the same end result. +separate code paths that have the same result. **Example** -Yarn and NPM installation instructions +Yarn and npm installation instructions **Input** ````md @@ -599,14 +599,14 @@ npx create-vuepress-site [optionalDirectoryName] ::: tip -Each `` must have a line break after it in order to render properly +Each `` must have a line break after it to render properly ::: ### Default Code Block By default, `` will use the first `` as the active initial code block. -If you would like to manually set the active ``, you can do so by simply adding `active` to the element: +To manually set the active ``, just add the `active` prop to the ``: **Input** ````md From 121ce6a752651c9fd2616ed12b542ba7b55c5043 Mon Sep 17 00:00:00 2001 From: Derek Pollard Date: Mon, 21 Sep 2020 16:53:51 -0500 Subject: [PATCH 3/4] docs: fix confusing output code --- packages/docs/docs/theme/default-theme-config.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 7d1b5ea472..c80280b089 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -585,7 +585,7 @@ npx create-vuepress-site [optionalDirectoryName] **Output** - + ```bash yarn create vuepress-site [optionalDirectoryName] ``` @@ -628,7 +628,7 @@ npx create-vuepress-site [optionalDirectoryName] **Output** - + ```bash yarn create vuepress-site [optionalDirectoryName] ``` From 0338b86efb38bc7ec2ffcac1dacc76f92ab6fcb0 Mon Sep 17 00:00:00 2001 From: Derek Pollard Date: Fri, 25 Sep 2020 10:30:50 -0500 Subject: [PATCH 4/4] docs: add in version badge to code group --- packages/docs/docs/theme/default-theme-config.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index c80280b089..feef6ee2ae 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -557,7 +557,7 @@ layout: SpecialLayout This will render `.vuepress/components/SpecialLayout.vue` for the given page. -## Code Groups and Code Blocks +## Code Groups and Code Blocks The default theme comes with custom components `` and `` that can help you to better group separate code paths that have the same result.