ドキュメント編集ガイドライン

Markdownファイルの追加

最大3レベルまで階層化された`contents/zh/`（中国語の投稿）または`contents/en/`（英語の投稿）ディレクトリにMarkdownファイルを追加します。`contents/zh/posts.yml`または`contents/en/posts.yml`のパスとタイトル情報を更新してください。

Markdownファイル名は小文字を使用してください。

Prettierによるコードの自動フォーマット

始める前に、Prettier VSCodeプラグインのインストールをお勧めします。これにより、保存時にコードが自動的にフォーマットされます。

自動フォーマットによってコードブロックが壊れると感じた場合は、次のコメントを追加して、ブロック内のコードのフォーマットをprettierで回避できます。

<!-- prettier-ignore-start -->
<!-- prettier-ignore-end -->

フォーマットされていないコードブロックが見つかった場合は、まずコードの構文エラーを確認してください。

組み込み変数

  • optionPath
  • mainSitePath
  • exampleViewPath
  • exampleEditorPath
  • lang

使用方法

${xxxxx}

[Get Apache ECharts](${lang}/basics/download)

Apache EChartsの取得

コードの埋め込み

基本的な使用方法

```js
option = {
    series: [{
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
    }]
};
\```
option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

ツールによるコードフォーマットを有効にするために、構文的に問題のある書き方は避けるようにしてください。

例えば、コメント`...`

option = {
  series: [
    {
      type: 'bar'
      // ...
    }
  ]
};

ライブプレビューと編集

現在、オプションコードのプレビューのみサポートされています。

\```js live
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```
option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
ライブ

その他のプレビューレイアウト

左から右

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'lr'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'lr'}" />

#### Right to left

<!-- prettier-ignore-start -->
markdown
option = {
  ...
};
\```
ライブ

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
ライブ

上から下

<md-live lang="js" code="'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'" v-bind="{layout: 'bt'}" />

<!-- prettier-ignore-end -->

<md-live lang="js" code="'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'" v-bind="{layout: 'bt'}" />

### Highlighting Lines of Code and Adding Filenames

Use.

<!-- prettier-ignore-start -->
markdown

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
\```

効果。

option = {
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

画像の埋め込み

ソース画像は`static/images/`下に保存されています。

![image description](images/demo.png)

画像の高さと幅の設定

現在のページの一時的なスタイルについては、HTMLを記述するだけで済みます。

<img data-src="images/demo.png" style="width: 50px" />

サンプルiframeの追加

srcは、https://echarts.dokyumento.jp/examples/en/editor.html?c=line-simpleアドレスの`?c=`以降の文字列です。

使用例

<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>

結果

使用例

<md-option link="series-bar.itemStyle.color"></md-option>

結果: series-bar.itemStyle.color

その他コンポーネントの使用

このドキュメントでは、グローバルに登録されたmarkdownコンポーネントの使用をサポートしています。既に説明したmd-exampleコンポーネントに加えて、以下のコンポーネントも使用できます。

md-alert

プロンプトコンポーネント

<md-alert type="info">
This is an info alert.
</md-alert>

これは情報アラートです。

<md-alert type="success">
This is a success alert.
</md-alert>

これは成功アラートです。

<md-alert type="warning">
This is a warning alert.
</md-alert>

これは警告アラートです。

<md-alert type="danger">
This is a danger alert.
</md-alert>

これは危険アラートです。

貢献者 GitHubでこのページを編集

pissang pissangplainheart plainheart