見た目を変える
シスアド：Markdownの書き方
基本的なMarkdownの構文については、以下のリンクを参照してください。
参考になるもの（日本語）
いずれも、Qiitaの記事です。
単にMarhdownといっても、GFM（GitHub Flavored Markdown）など拡張機能が使えたりしたりと、方言のようなものがあったりします。
簡単に見た感じ、こちらの記事が基本的な記法+α(GFM)に触れられていて、わかりやすいかなと思います。
公式リファレンス
このマニュアルを書くのに使っているVitePressの公式リファレンスです。
https://vitepress.dev/guide/markdown.html
【重要】独自実装とVitepress独自の部分について
Vitepress独自の実装に加えて、私自身が作成したコンポーネントもドキュメントの作成に利用できます。
ということで、通常のMarkdown機能に加えて、Vueコンポーネントを埋め込む方法についても説明します。
1. Mermaid.jsでER図やフローチャートを描く
Mermaid.jsで簡単にER図やフローチャートなどの図を描けます。
埋め込み方や記法の詳細は、Mermaid.js入門（マニュアル）を参照してください。
2. Vueでコードを書く
Vitepressでは、Vueと呼ばれるJSライブラリのコードをそのままかけます。
vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
カウンタ：{{ count }}
<button @click="count++">カウントアップ</button>これを、普通のMarkdownファイルに書くと、以下のように表示されます。
便利ですね。
カウンタ：0
3. 独自実装のコンポーネントを使う
先の内容に関連しますが、Vueコンポーネントをそのまま埋め込むこともできます。
先人の作成した便利なコンポーネントをそのまま使ったり、使い回したい部品ができたりしたときに便利です。
vue
<script setup>
// このように、Vueコンポーネントをインポートします。
// パスは適宜変更してください。
import Note from "../../components/Note.vue";
import Movie from "../../components/Movie.vue";
import VueQrcode from 'vue-qrcode'
</script>
<vue-qrcode value="https://sg-hamachi.tekkan.jp/" />
<Movie path="/movie/学生アカウント作成.mp4" />
<Note title="太字で出てくる文字">
この中には<u>普通に<b style="color:red">HTMLタグ</b></u>を書きます。<br/>
下のように、Markdownの構文はパースされないので注意しましょう。
[リンクの例](https://sg-hamachi.tekkan.jp/)
</Note>以下のように、Vueコンポーネントを埋め込むことができます。
注）多分音が出ます。
太字で出てくる文字
この中には普通にHTMLタグを書きます。下のように、Markdownの構文はパースされないので注意しましょう。 [リンクの例](https://sg-hamachi.tekkan.jp/)