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:

これはtipです。

これは警告です。

危険

これは警告です。

目次(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/

サンプル

graph TD; A-->B; A-->C; B-->D; C-->D;

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