Skip to content

Contribute to the Docs > Documentation Style Guide の翻訳 #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/guide/contributing/doc-style-guide.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
# Documentation Style Guide
# ドキュメントスタイルガイド

This guide will provide an overview of different design elements that are available for your use in creating documentation.
このガイドでは、ドキュメントの作成に使用できるさまざまな設計要素の概要を説明します。

## Alerts
## アラート

VuePress provides a custom container plugin to create alert boxes. There are four types:
VuePress は、アラートボックスを作成するためのカスタムコンテナプラグインを提供します。 4つのタイプがあります:

- **Info**: Provide information that is neutral
- **Tip**: Provide information that is positive and encouraged
- **Warning**: Provide information that users should be aware of as there is a low to moderate
- **Danger**: Provide information that is negative and has a high risk to the user
- **Info**: 中立的な情報を提供する
- **Tip**: ポジティブで奨励する情報を提供する
- **Warning**: 低から中程度、ユーザが知っておくべき情報を提供する
- **Danger**: ネガティブで、ユーザにリスクの高い情報を提供する

**Markdown Examples**
**マークダウンの例**

```
::: info
You can find more information at this site.
あなたはこのサイトでより多くの情報を見つけることができます。
:::

::: tip
This is a great tip to remember!
これは覚えておくべき素晴らしいヒントです!
:::

::: warning
This is something to be cautious of.
これは注意が必要なことです。
:::

::: danger DANGER
This is something we do not recommend. Use at your own risk.
これはお勧めしません。自己責任で使用してください。
:::
```

**Rendered Markdown**
**レンダリングされたマークダウン**

::: info
You can find more information at this site.
あなたはこのサイトでより多くの情報を見つけることができます。
:::

::: tip
This is a great tip to remember!
これは覚えておくべき素晴らしいヒントです!
:::

::: warning
This is something to be cautious of.
これは注意が必要なことです。
:::

::: danger DANGER
This is something we do not recommend. Use at your own risk.
これはお勧めしません。自己責任で使用してください。
:::

## Code Blocks
## コードブロック

VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block:
VuePress は、Prism を使用して、コードブロックの最初のバッククォートに言語を追加することにより、言語構文の強調表示を提供します:

**Markdown Example**
**マークダウンの例**

````
```js
Expand All @@ -63,20 +63,20 @@ export default {
```
````

**Rendered Output**
**レンダリングされた出力**
```js
export default {
name: 'MyComponent'
}
```

### Line Highlighting
### 行の強調表示

To add line highlighting to your code blocks, you need to append the line number in curly braces.
コードブロックに行の強調表示を追加するには、中括弧で行番号を追加する必要があります。

#### Single Line
#### 一行

**Markdown Example**
**マークダウンの例**

````
```js{2}
Expand All @@ -90,7 +90,7 @@ export default {
```
````

**Rendered Markdown**
**レンダリングされたマークダウン**

```js{2}
export default {
Expand All @@ -102,7 +102,7 @@ export default {
}
```

#### Group of Lines
#### 行のグループ

````
```js{4-5}
Expand All @@ -126,7 +126,7 @@ export default {
}
```

#### Multiple Sections
#### 複数のセクション

````
```js{2,4-5}
Expand Down