メインコンテンツまでスキップ

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'}} />
aaa

太い水平線​

以下の 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>

20220625_dod_logo.jpg

画像もリンクも HTML​

<a href="/ds/img/20220625_dod_logo.jpg" target="_blank"><img alt="20220625_dod_logo.jpg" border="0" height="496" src="/ds/img/20220625_dod_logo.jpg" width="581"/></a>
20220625_dod_logo.jpg

テンプレート​

以下の /ds/img の後ろに画像ファイル名を追加する。align="top" や height="150px" なども必要に応じて用いることが可能。

静止画テンプレート
<a href="/ds/img/" target="_blank"><img alt="" border="0" src="/ds/img/" width="90%"/></a>

内部リンク​

基本的に Blog 記事から選んで特定のカテゴリの記事に登録する方針をとる。この場合は特定のカテゴリ、例えば UFO のディレクトリで

touch _link_@blog@＜特定の blog 記事＞

という形で仮想リンク用のファイルを作成することで、該当の＜特定の blog 記事＞を 修正/変更 すれば、自動的に UFO のカテゴリの記事も更新され、面倒が生じない。

この方法を採用する時は、その Blog 記事 を仮想リンクする際、その Blog 記事内部でリンクしている他の記事も同時に 仮想リンク しなくてはならない。この作業は現状は手作業で行っているが、近く自動化する予定。

これによって、

  • 同じ ディレクトリ/カテゴリ の記事にリンクする場合
  • 異なった ディレクトリ/カテゴリ の記事にリンクする場合

のどちらの場合でも xxx.md ファイルの変更は不要となる。

具体例​

例として、/blog/2024-07-21-synopsis_analysis.md の記事を、この記事の中からリンクしたのが下。

内部リンクの記法
[Oak Ridge 国立研究所による「Roswell金属破片」の分析結果報告書：pdf → テキスト抽出 → 和訳](2024-07-21-synopsis_analysis.md)

Oak Ridge 国立研究所による「Roswell金属破片」の分析結果報告書：pdf → テキスト抽出 → 和訳

記事内部で pdf ファイルなどを添付し download 可能にする​

以下の記述で可能。pdf ファイルは（static/img ではなく） static の直下に置く。

具体例​

pdf 添付の記法
[予備：本サイトから pdf(9.8MB) を download](/ORNL-Synopsis_Analysis_of_a_Metallic_Specimen.pdf)

予備：本サイトから pdf(9.8MB) を download

(2024-08-15)