# Vuepress

https://v1.vuepress.vuejs.org/guide/markdown.html#header-anchors

# インストール

# 事前条件

1. npmまたはyarnコマンドが使えること。

yarn

# 記法

# ソースコード

    ```javascript
    console.log('Hello World')
    ```

console.log('Hello World')

# Tip, Warning, Danger

::: tip
これはtipです。
:::

::: warning
これは警告です。
:::

::: danger 危険
これは警告です。
:::

output:

# 目次（Table of Contents）

[[toc]]

output:

# テーマ

# 全文検索（Algolia Search）

デフォルトの検索窓だと検索が弱いので、しっかり検索したいときは入れたほうが良い。

https://www.algolia.com/ GitHubアカウントでログインできる。 ダッシュボートのAPI KeyからAPIキーが、Indexページで好きな名前でインデックスを作成する。 config.jsにAPIキーとindexNameを設定する。

module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '***',
      indexName: '***'
    }
  }
};

# プラグイン

# Mermaid

PluntUML的なもの。フロー図を書いたり。

# 導入

ココに全部書いてある。 https://vuepress-examples.netlify.com/demos/diagrams/

# サンプル

# mermaidを使って図を書く

docs/.vuepress/components/mermaid.vueを作る。

<template>
  <div class="mermaid">
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true,
        // dark, default, forest, neutral
        theme: "forest"
      });
      m.init();
    });
  }
};
</script>

<style>
.mermaid svg {
  text-align: center;
}
</style>

.mdファイルで次のようにmermaidを書ける。

<mermaid>
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
</mermaid>

# plantUMLを使う

yarn add -D markdown-it-plantuml

Ref: https://qiita.com/uphy/items/509fae0551afe8063037