@@ -172,8 +170,7 @@ If you wish to distribute the theme as an npm package, follow these steps:
To consume an external theme, import and re-export it from the custom theme entry:
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import Theme from 'awesome-vitepress-theme'
export default Theme
@@ -181,8 +178,7 @@ export default Theme
If the theme needs to be extended:
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import Theme from 'awesome-vitepress-theme'
export default {
@@ -195,8 +191,7 @@ export default {
If the theme requires special VitePress config, you will need to also extend it in your own config:
-```ts
-// .vitepress/config.ts
+```ts [.vitepress/config.ts]
import baseConfig from 'awesome-vitepress-theme/config'
export default {
@@ -207,8 +202,7 @@ export default {
Finally, if the theme provides types for its theme config:
-```ts
-// .vitepress/config.ts
+```ts [.vitepress/config.ts]
import baseConfig from 'awesome-vitepress-theme/config'
import { defineConfigWithTheme } from 'vitepress'
import type { ThemeConfig } from 'awesome-vitepress-theme'
diff --git a/docs/en/guide/data-loading.md b/docs/en/guide/data-loading.md
index 3005f642..10ba8b57 100644
--- a/docs/en/guide/data-loading.md
+++ b/docs/en/guide/data-loading.md
@@ -8,8 +8,7 @@ Data loaders can be used to fetch remote data, or generate metadata based on loc
A data loader file must end with either `.data.js` or `.data.ts`. The file should provide a default export of an object with the `load()` method:
-```js
-// example.data.js
+```js [example.data.js]
export default {
load() {
return {
@@ -84,8 +83,7 @@ export default {
When building a content focused site, we often need to create an "archive" or "index" page: a page where we list all available entries in our content collection, for example blog posts or API pages. We **can** implement this directly with the data loader API, but since this is such a common use case, VitePress also provides a `createContentLoader` helper to simplify this:
-```js
-// posts.data.js
+```js [posts.data.js]
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', /* options */)
@@ -135,8 +133,7 @@ import { data as posts } from './posts.data.js'
The default data may not suit all needs - you can opt-in to transform the data using options:
-```js
-// posts.data.js
+```js [posts.data.js]
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', {
@@ -162,8 +159,7 @@ Check out how it is used in the [Vue.js blog](https://github.com/vuejs/blog/blob
The `createContentLoader` API can also be used inside [build hooks](../reference/site-config#build-hooks):
-```js
-// .vitepress/config.js
+```js [.vitepress/config.js]
export default {
async buildEnd() {
const posts = await createContentLoader('posts/*.md').load()
diff --git a/docs/en/guide/deploy.md b/docs/en/guide/deploy.md
index fe7ac715..a4093df2 100644
--- a/docs/en/guide/deploy.md
+++ b/docs/en/guide/deploy.md
@@ -10,7 +10,7 @@ The following guides are based on some shared assumptions:
- You are using the default build output directory (`.vitepress/dist`).
- VitePress is installed as a local dependency in your project, and you have set up the following scripts in your `package.json`:
- ```json
+ ```json [package.json]
{
"scripts": {
"docs:build": "vitepress build docs",
@@ -121,7 +121,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
1. Create a file named `deploy.yml` inside `.github/workflows` directory of your project with some content like this:
- ```yaml
+ ```yaml [.github/workflows/deploy.yml]
# Sample workflow for building and deploying a VitePress site to GitHub Pages
#
name: Deploy VitePress site to Pages
@@ -204,7 +204,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
2. Create a file named `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
- ```yaml
+ ```yaml [.gitlab-ci.yml]
image: node:18
pages:
cache:
@@ -237,7 +237,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
`firebase.json`:
- ```json
+ ```json [firebase.json]
{
"hosting": {
"public": "docs/.vitepress/dist",
@@ -248,7 +248,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
`.firebaserc`:
- ```json
+ ```json [.firebaserc]
{
"projects": {
"default": ""
@@ -276,7 +276,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
2. Create a file called `static.json` in the root of your project with the below content:
- ```json
+ ```json [static.json]
{
"root": "docs/.vitepress/dist"
}
diff --git a/docs/en/guide/extending-default-theme.md b/docs/en/guide/extending-default-theme.md
index acec1275..799d1773 100644
--- a/docs/en/guide/extending-default-theme.md
+++ b/docs/en/guide/extending-default-theme.md
@@ -22,8 +22,7 @@ Before proceeding, make sure to first read [Using a Custom Theme](./custom-theme
The default theme CSS is customizable by overriding root level CSS variables:
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import './custom.css'
@@ -46,8 +45,7 @@ VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will inc
To avoid including Inter in the build output, import the theme from `vitepress/theme-without-fonts` instead:
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'
@@ -68,8 +66,7 @@ If you are using optional components like the [Team Page](../reference/default-t
If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with hashed filename. To preload this file, use the [transformHead](../reference/site-config#transformhead) build hook:
-```js
-// .vitepress/config.js
+```js [.vitepress/config.js]
export default {
transformHead({ assets }) {
// adjust the regex accordingly to match your font
@@ -94,8 +91,7 @@ export default {
## Registering Global Components
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
/** @type {import('vitepress').Theme} */
@@ -109,8 +105,7 @@ export default {
```
If you're using TypeScript:
-```ts
-// .vitepress/theme/index.ts
+```ts [.vitepress/theme/index.ts]
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
@@ -129,8 +124,7 @@ Since we are using Vite, you can also leverage Vite's [glob import feature](http
The default theme's `` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the before outline:
-```js
-// .vitepress/theme/index.js
+```js [.vitepress/theme/index.js]
import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'
@@ -142,8 +136,7 @@ export default {
}
```
-```vue
-
+```vue [.vitepress/theme/MyLayout.vue]