Docusaurus 用 markdown の書き方
要約
Docusaurus 用 markdown の書き方を整理した。
注意
このサイト特有の方針を反映しているので、一般的なものではない。
履歴
(2024-09-02) 追加
(2024-08-15) 更新
(2024-07-25) update
水平線
<hr>
だとエラーで build が止まるので <hr/>
とする。
コメント
{/* コメント */}
とする。たとえば…
{/* <img src="/img/20230318_jordan_maxwell.jpg" width="90%" /> */}
折り畳み
以下のように <detail>
と <summary>
の間に改行が必要。改行がないとエラーで build が止まる。また、</summary>
の直後に改行が必要。
<details>
<summary>▼展開</summary>
<pre>
あいうえお
かきくけこ
さしすせそ
</pre>
</details>
▼展開
あいうえお かきくけこ さしすせそ
Youtube 動画
- 特に意識せず、従来どおりの FC2BLog や Honkit の書き方でよい。たとえば、 以下のような記述で良い。
Jordan Maxwell - Close Encounters and other stories with English subtitles 2010-07-29
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/dfg3M6ydZ0s" width="560"></iframe>
Jordan Maxwell - Close Encounters and other stories with English subtitles 2010-07-29
Youtube 動画以外の mp4 動画の埋め込み方法
-
markdown ファイル名の拡張子を
.mdx
とする。 -
ReactPlayer
を使用する必要がある。 -
動画を格納する位置により相対パスか絶対パスで指定。
mdx ファイルからの相対パス指定
import ReactPlayer from "react-player"
import RelativeUrl from './20230315_3dmap_skinwalker_anormaly.mp4';
<ReactPlayer muted controls url={RelativeUrl}/>
/img
に格納した動画を指定
import ReactPlayer from "react-player"
import AbsUrl from '/img/a_movie.mp4';
<ReactPlayer muted controls url={AbsUrl}/>
静止画像 : React 流
サイズ指定が不要な場合
![サイズ指定が不要な画像](/img/20221102_3dmap3.jpg)
画像のサイズを変更する場合
<img
src={require('/img/20221102_3dmap3.jpg').default}
alt="サイズ変えたい画像"
style={{ width: '90%' }}
/>
(静止画)
画像のサイズと配置を指定する場合
以下の HTML 記述、
<img src="../img/20220625_dod_logo.jpg" width="30%" align="top"><img src="../img/20220625_fd.jpg" width="40%" align="top">
に対応する react での記述方法が下。
<img
src={require('/img/20220625_dod_logo.jpg').default} alt="aaa" style={{width:'40%', align:'top'}} />
太い水平線
以下の HTML 記述はエラーとなる。
<hr style="height:10px;border-width:3;color:orange;background-color:blue"/>
その対処として以下の記述を用いる。
<hr style={{ height: '10px', borderWidth: '3px', color: 'orange', backgroundColor: 'blue' }} />
静止画(HTML 記述そのまま)
- src パラメータで指定する top directory を
/img
ではなく、/ds/img/
とする必要がある。
確認済み
- この設定で GitHub に deploy した時にも問題なく動作することを確認した。
設定
以下の docusaurus.config.js の条件で build して locla PC の xampp の apatche で確認している。
docusaurus.config.js
const config = {
...
baseUrl: '/ds/',
...
<img src="/ds/img/20220625_dod_logo.jpg" />
<img src="/ds/img/20220625_dod_logo.jpg" width="30%" align="top" />
リンク付きの画像
画像は React + リンクはHTML
<a href="/ds/img/20220625_dod_logo.jpg" target="_blank">
<img
src={require('/img/20220625_dod_logo.jpg').default}
alt="20220625_dod_logo.jpg"
style={{ border: 0, width: '30%' }}
/>
</a>