docs: format

pull/5113/head
Divyansh Singh 7 months ago
parent 5b7ccbccdd
commit 5e12ef7f13

@ -179,7 +179,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -49,7 +49,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -174,7 +174,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -45,7 +45,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -174,7 +174,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -49,7 +49,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -31,7 +31,7 @@ CMS ごとに動作が異なるため、ここでは各自の環境に合わせ
}
})).json()
return data.map(entry => {
return data.map((entry) => {
return {
params: { id: entry.id, /* title, authors, date など */ },
content: entry.content

@ -50,7 +50,6 @@ siteData: Ref<SiteData> // サイト全体のメタデータ
テーマエントリファイルでは、このテーマをデフォルトエクスポートとして公開します。
```js [.vitepress/theme/index.js]
// テーマエントリでは Vue ファイルを直接インポートできます
// VitePress は @vitejs/plugin-vue をあらかじめ設定済みです
import Layout from './Layout.vue'
@ -164,7 +163,6 @@ npm パッケージとして配布する場合は、次の手順を踏みます
## カスタムテーマの利用 {#consuming-a-custom-theme}
外部テーマを利用するには、カスタムテーマエントリからインポートして再エクスポートします。
```js [.vitepress/theme/index.js]

@ -179,7 +179,6 @@ interface ContentOptions<T = ContentData[]> {
## 型付きデータローダー {#typed-data-loaders}
TypeScript を使用する場合は、ローダーと `data` エクスポートを型付けできます。
```ts
@ -202,7 +201,6 @@ export default defineLoader({
## 設定情報の取得 {#configuration}
ローダー内で設定情報を取得するには次のようにします。
```ts

@ -4,7 +4,6 @@ outline: deep
# VitePress サイトをデプロイする {#deploy-your-vitepress-site}
以下のガイドは、次の前提に基づいています。
- VitePress のサイトはプロジェクトの `docs` ディレクトリ内にある。
@ -22,7 +21,6 @@ outline: deep
## ローカルでビルドしてテストする {#build-and-test-locally}
1. 次のコマンドでドキュメントをビルドします。
```sh
@ -51,14 +49,12 @@ outline: deep
## 公開ベースパスの設定 {#setting-a-public-base-path}
デフォルトでは、サイトはドメインのルートパス(`/`)にデプロイされることを想定しています。サイトをサブパス、例:`https://mywebsite.com/blog/` で配信する場合は、VitePress の設定で [`base`](../reference/site-config#base) オプションを `'/blog/'` に設定してください。
**例:** GitHubまたは GitLabPages に `user.github.io/repo/` としてデプロイするなら、`base` を `/repo/` に設定します。
## HTTP キャッシュヘッダー {#http-cache-headers}
本番サーバーの HTTP ヘッダーを制御できる場合は、`cache-control` ヘッダーを設定して、再訪時のパフォーマンスを向上させましょう。
本番ビルドでは静的アセットJavaScript、CSS、`public` 以外のインポートアセット)にハッシュ付きファイル名が使用されます。ブラウザの開発者ツールのネットワークタブで本番プレビューを確認すると、`app.4f283b18.js` のようなファイルが見られます。
@ -109,7 +105,6 @@ Cache-Control: max-age=31536000,immutable
## プラットフォーム別ガイド {#platform-guides}
### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render {#netlify-vercel-cloudflare-pages-aws-amplify-render}
新しいプロジェクトを作成し、ダッシュボードで次の設定に変更します。
@ -231,7 +226,6 @@ HTML の _Auto Minify_ のようなオプションを有効にしないでくだ
1. [公式ドキュメント](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration) に従います。
2. 設定ファイルで次の値を指定します(`api_location` のように不要なものは削除)。
- **`app_location`**: `/`
- **`output_location`**: `docs/.vitepress/dist`
- **`app_build_command`**: `npm run docs:build`

@ -70,7 +70,9 @@ export default DefaultTheme
export default {
transformHead({ assets }) {
// 使うフォントに合わせて正規表現を調整
const myFontFile = assets.find(file => /font-name\.[\w-]+\.woff2/.test(file))
const myFontFile = assets.find((file) =>
/font-name\.[\w-]+\.woff2/.test(file)
)
if (myFontFile) {
return [
[

@ -38,7 +38,7 @@ Markdown ファイル内での使用例:
VitePress は JSON フロントマター構文もサポートしています。中括弧で開始・終了する形式です。
```json
```md
---
{
"title": "Blogging Like a Hacker",

@ -80,7 +80,7 @@ VitePress には組み込みの Markdown 拡張機能が用意されています
```md
| テーブル | は | クール |
| -------------- | :---------: | ------: |
| -------- | :-------: | -----: |
| 3列目は | 右寄せ | $1600 |
| 2列目は | 中央 | $12 |
| シマ模様 | neat です | $1 |
@ -89,7 +89,7 @@ VitePress には組み込みの Markdown 拡張機能が用意されています
**出力**
| テーブル | は | クール |
| -------- | :----: | ------: |
| -------- | :------: | -----: |
| 3列目は | 右寄せ | \$1600 |
| 2列目は | 中央 | \$12 |
| シマ模様 | neatです | \$1 |
@ -289,7 +289,6 @@ VitePress は [GitHub 形式のアラート](https://docs.github.com/en/get-star
**入力**
```md
> [!NOTE]
> 流し読みでも目に留めてほしい情報を強調します。
@ -305,12 +304,10 @@ VitePress は [GitHub 形式のアラート](https://docs.github.com/en/get-star
> [!CAUTION]
> 行動による望ましくない結果の可能性です。
```
**出力**
> [!NOTE]
> 流し読みでも目に留めてほしい情報を強調します。
@ -326,14 +323,13 @@ VitePress は [GitHub 形式のアラート](https://docs.github.com/en/get-star
> [!CAUTION]
> 行動による望ましくない結果の可能性です。
## コードブロックのシンタックスハイライト {#syntax-highlighting-in-code-blocks}
VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown のコードブロックに色付きのシンタックスハイライトを適用します。Shiki は多くのプログラミング言語をサポートしています。コードブロックの先頭のバッククォートに有効な言語エイリアスを付けるだけで利用できます。
**入力**
````
````md
```js
export default {
name: 'MyComponent',
@ -341,7 +337,8 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
}
```
````
````
````md
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
@ -359,6 +356,7 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
// ...
}
```
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
@ -375,7 +373,7 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
**入力**
````
````md
```js{4}
export default {
data() {
@ -407,7 +405,7 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
**入力**
````
````md
```js{1,4,6-8}
export default { // Highlighted
data() {
@ -425,7 +423,6 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
**出力**
```js{1,4,6-8}
export default { // Highlighted
data() {
@ -444,7 +441,7 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
**入力**
```
````md
```js
export default {
data() {
@ -454,10 +451,10 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
}
}
```
````
**出力**
```js
export default {
data() {
@ -476,7 +473,7 @@ VitePress は [Shiki](https://github.com/shikijs/shiki) を使って、Markdown
**入力**
````
````md
```js
export default {
data() {
@ -506,7 +503,7 @@ export default {
**入力**
````
````md
```js
export default {
data() {
@ -538,7 +535,7 @@ export default {
**入力**
````
````md
```js
export default {
data() {
@ -584,7 +581,7 @@ export default {
**入力**
````
````md
```ts {1}
// 既定では line-numbers は無効
const line2 = 'This is line 2'
@ -727,7 +724,6 @@ export default {
**出力**
::: code-group
```js [config.js]
@ -922,6 +918,7 @@ VS Code のリージョンの代わりに、ヘッダーアンカーを使って
```md
## 拡張セクション
<!--@include: ./parts/basics.md#my-base-section-->
```
@ -974,7 +971,7 @@ npm add -D markdown-it-mathjax3@^4
**マクスウェル方程式:**
| 方程式 | 説明 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | 磁束密度 $\vec{\mathbf{B}}$ の発散は 0 |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | 電場 $\vec{\mathbf{E}}$ の回転は、磁束密度 $\vec{\mathbf{B}}$ の時間変化に比例 |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _え_ |
@ -988,7 +985,7 @@ npm add -D markdown-it-mathjax3@^4
**マクスウェル方程式:**
| 方程式 | 説明 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | 磁束密度 $\vec{\mathbf{B}}$ の発散は 0 |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | 電場 $\vec{\mathbf{E}}$ の回転は、磁束密度 $\vec{\mathbf{B}}$ の時間変化に比例 |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _え_ |

@ -8,7 +8,7 @@ MPA モードでは、既定で **あらゆるページが JavaScript を含ま
また、「既定で JS なし」ということは、実質的に Vue をサーバーサイドのテンプレート言語としてのみ使うことを意味します。ブラウザ側ではイベントハンドラがアタッチされないため、インタラクティブ性はありません。クライアントサイドの JavaScript を読み込むには、特別な `<script client>` タグを使用します:
```html
```md
<script client>
document.querySelector('h1').addEventListener('click', () => {
console.log('client side JavaScript!')

@ -42,7 +42,7 @@ Vue の使用は SSR 互換である必要があります。詳細と一般的
Markdown ファイルのルート直下に置く `<script>``<style>` タグは、Vue の SFC と同様に動作します(`<script setup>` や `<style module>` などを含む)。大きな違いは `<template>` タグが無い点で、その他のルート直下のコンテンツは Markdown になることです。すべてのタグはフロントマターの**後**に配置してください。
```html
```md
---
hello: world
---
@ -75,7 +75,7 @@ VitePress のランタイム API現在ページのメタデータにア
**入力**
```html
```md
<script setup>
import { useData } from 'vitepress'
@ -133,7 +133,7 @@ Markdown ファイルで、Vue コンポーネントを直接インポートし
見出し内で Vue コンポーネントを使うこともできますが、次の書き方の違いに注意してください。
| Markdown | 出力 HTML | 解析される見出し |
| ------------------------------------------------------- | ------------------------------------------- | --------------- |
| ------------------------------------------------------- | ----------------------------------------- | ---------------- |
| <pre v-pre><code> # text &lt;Tag/&gt; </code></pre> | `<h1>text <Tag/></h1>` | `text` |
| <pre v-pre><code> # text \`&lt;Tag/&gt;\` </code></pre> | `<h1>text <code>&lt;Tag/&gt;</code></h1>` | `text <Tag/>` |
@ -268,11 +268,11 @@ Vue は [Vue - Official VS Code plugin](https://marketplace.visualstudio.com/ite
"include": [
"docs/**/*.ts",
"docs/**/*.vue",
"docs/**/*.md",
"docs/**/*.md"
],
"vueCompilerOptions": {
"vitePressExtensions": [".md"],
},
"vitePressExtensions": [".md"]
}
}
```
:::

@ -17,7 +17,7 @@
### オプション {#options}
| オプション | 説明 |
| ------------------ | -------------------------------------------------------------------- |
| --------------- | ----------------------------------------------------- |
| `--open [path]` | 起動時にブラウザを開く(`boolean \| string` |
| `--port <port>` | ポート番号を指定(`number` |
| `--base <path>` | 公開時のベースパス(既定: `/``string` |
@ -38,7 +38,7 @@
### オプション {#options-1}
| オプション | 説明 |
| ----------------------------- | -------------------------------------------------------------------------------------------------- |
| ------------------------------ | ------------------------------------------------------------------------------------------ |
| `--mpa`(実験的) | クライアント側ハイドレーションなしの [MPA モード](../guide/mpa-mode) でビルド(`boolean` |
| `--base <path>` | 公開時のベースパス(既定: `/``string` |
| `--target <target>` | トランスパイルターゲット(既定: `"modules"``string` |
@ -58,7 +58,7 @@
### オプション {#options-2}
| オプション | 説明 |
| ------------------ | ----------------------------------------- |
| --------------- | ------------------------------------------- |
| `--base <path>` | 公開時のベースパス(既定: `/``string` |
| `--port <port>` | ポート番号を指定(`number` |

@ -6,7 +6,7 @@
グローバルに利用可能な `Badge` コンポーネントを使用します。
```html
```md
### Title <Badge type="info" text="default" />
### Title <Badge type="tip" text="^1.9.0" />
### Title <Badge type="warning" text="beta" />
@ -24,7 +24,7 @@
`<Badge>` は子要素(`children`)を受け取り、バッジ内に表示できます。
```html
```md
### Title <Badge type="info">custom element</Badge>
```

@ -186,3 +186,4 @@ hero:
npm init
npx vitepress init
```
````

@ -179,7 +179,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -49,7 +49,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -174,7 +174,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -49,7 +49,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -174,7 +174,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -45,7 +45,7 @@ interface PageData {
titleTemplate?: string | boolean
description: string
relativePath: string
filePath: string,
filePath: string
headers: Header[]
frontmatter: Record<string, any>
params?: Record<string, any>

@ -179,7 +179,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

@ -174,7 +174,7 @@ export default defineConfig({
async _render(src, env, md) {
const html = await md.renderAsync(src, env)
if (env.frontmatter?.title)
return await md.renderAsync(`# ${env.frontmatter.title}`) + html
return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html
return html
}
}

Loading…
Cancel
Save