Markdown に Note: が欲しい
概要
日本語では注釈とも
「注釈」と言うと Web サイトでよくある脚注が連想されやすく、ここでは区別したいので「Note:」と書いた
最初「コラム」と書いていたが、コラムは本来新聞の囲み記事のことを指し、ちょっと意味合いが違う気もした
英語だと Note:、 Tips:、 Warning: とかそういうやつ
こんな感じの UI で表わされがち
https://gyazo.com/4edd372dbc711420cb15607c31824ed5
UI 的には HTML Living Standerd の window.alert() のようなモーダルウィンドウと似ている?
モーダルウィンドウのは IDE とかオフィスソフトでよく見る
モチベーション
以下のものを表現できる書き方が欲しい
アウトライナーのようなものではない教科書や手順書のような流れのある文章において、本文に入れると流れを邪魔するが、内容の理解に有用な情報や、注意すべき内容
本文に含めたくはないが、脚注ほど脱線しない内容
事例
引用ブロックを使う方法
code:md
**Note:** これがメモの書き方です。
複数行を入れることもできます。
https://gyazo.com/fcdd61e225f45df89d5cb14df1e09181
MDN の仕様策定の Issue によると、GFM でほぼ同じように表示されること、内側に複数の段落や他の Markdown の記法が書けることからこの形になったらしい 個人的にはあまりこの記法は好きじゃない
この記法を GFM で解釈すると <blockquote> 要素になり、<blockquote> は HTML Living Standardで「Content inside a blockquote must be quoted from another source」と書かれているので 仕様に反している以外でも blockquote の中身が引用である(=どこかに同じ文章がある)として処理するときに何か不具合が起きる気がするな~
太字にしたキーワードを使用する方法
code:md
**Note:** orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
一つの段落でしか書けないので MDN では採用されなかった
slidev や fusuma では HTML のコメントを使ってたわね
スピーカーノートと注釈では意味も見る人も違うけど
独自の記法を用いる(:::)
code:md
:::message
メッセージをここに
:::
https://gyazo.com/c65b2974135ee7901b989a02ae4f1712
GitHub ではこうなる(そらそう)https://gyazo.com/fecc3e255716683b12393a41a86d9a68
GitHub を始めとした広く使われている Markdown 処理系で処理できないはちょっとしんどいかも
--- で挟まれた意味段落とキーワードを組み合わせる方法
code:md
A paragraph.
***
Notice. A notice.
***
A paragraph.
code:html
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
↑ の HTML に適当に CSS を付けたもの https://gyazo.com/31bf73db76b0c9ed77ab580b1e392901
かなりよさげ
HTML とかに変換しなくてもテキストで見やすい
GFM でほぼ見た目を変えずに表示され、かつ意味的にもおかしくはない
変換の実装はきつそう
ちゃんと変換、表示されるかどうかはぱっと見て分かりづいかも
この書き方やライブラリが他の書き方に比べてほとんど普及してなさそうなのが懸念っちゃ懸念
remark には同様のプラグインは現在なさそう
frontmatter や Astro のコンポーネントスクリプトと競合しそう