シスアド：vitepress独自コンポーネント（Note）

役割

重要な部分や、注意してほしい点、よく読んでほしい点や補足事項などに使いやすい、吹き出し形式のコンポーネントです。
タイトルを指定でき、その下に通常のHTML記法で内容を記述できます。

使い方

以下のように、Vueコンポーネントを埋め込むことができます。

<script setup>
// 最初の1回のみ、Vueコンポーネントをインポートします。
import Note from "../../components/Note.vue";
</script>

<Note title="太字で出てくる文字">
この中には<u>普通に<b style="color:red">HTMLタグ</b></u>を書きます。<br/>
下のように、Markdownの構文はパースされないので注意しましょう。
[リンクの例](https://sg-hamachi.tekkan.jp/)
</Note>

太字で出てくる文字

この中には普通にHTMLタグを書きます。
下のように、Markdownの構文はパースされないので注意しましょう。 [リンクの例](https://sg-hamachi.tekkan.jp/)

受け付けるパラメータ

• title：吹き出しのタイトルを指定します。未指定でも問題ありません。
  • 例：title="太字で出てくる文字"
  • 例：title="タイトル"
• character：吹き出しに利用するキャラクターをオーバーライドできます。未指定の場合は、デフォルトのキャラクターが表示されます。受け付けられるキャラクターは"student1"（女性の学生） "student2"（男性の学生） "robot"（ロボット）で、未指定時はstudent1になります。吹き出しの色も自動で変化します。 （コンポーネント運用の都合上消しました。）
  • 例：character="student1"
  • 例：character="robot"

また、コンポーネント内のデフォルトスロット（<Note>ここに入る内容</Note>）には、通常のHTML記法で吹き出しの中身を記述できます。