Markdown＋α(HTML埋め込み)

今回のお題

MarkDown等で使う、埋め込みHTMLについて
WindowsOSでのお話になります。

気付き

最近VScodeを使っているが、非常に便利である。特に、1つのことではなく沢山の事を学んでしまうとその瞬間から忘れて行ってしまいそのままになってしまうことも多い。そういう意味もあってBLOGなどを書き始めたが、備忘録にもなってない。よく言う、メモは取るがメモは見ないである。ということでMarkDownである、最近はJupyterNoteBookや、ソースコードのドキュメント埋め込み、BLOGの文章とあちこちで活躍するMarkDown言語であるが使っている装飾が少ない。昔調べたときはたくさんの機能があったがチートシートが手元にないのがいけないのか覚えている数種のマークしか使っていない。これではいけないと、過去の記事を見直したがフムフムなるほどと思うがまた忘れそうである。チートシートでも作るかと思ったが今回は、特に便利そうな色付け機能等を何とか忘れないようにと思った次第だ。

chiyoh.hatenablog.com

方法

VScodeを使いだしてから、最近のトレンド？スニペットによる補完である。オートコンプリートよりもう少し大きいブロックになるこういうのは、あるアプリケーション上で動くPlug-in的動作であったり基本機能であったりする。そこまでしなくてもいいのだがなにか方法がないかと思っていたが、別途調べていたIMEの日本語ON/OFF勝手に切り替え機能を何とか黙らせる方法を探していて昔懐かしい機能に遭遇した。 単語登録機能である。最近は、辞書機能も進化していて辞書のビックデータ化などあり、マニアックな変換もサポートされているらしい。基本機能をインターネット越しというのも気持ち悪いので使用してないが。 さて、IMEも進化して、いつのころか同音異義語の中身の説明をしてくれる補助機能が付くようになっていた。

さらに、単語記録にもその機能を追加できるらしいのでこれを使えばべんりじゃね？とおもい組み込んでみた。

使用方法

単純に画面の右下のトレイのIMEアイコン「あ」とかあるやつを右クリックして単語の登録を起動左下のユーザー辞書ツールボタンをクリックしてメニューからヘルプ

ユーザー辞書を作るを見て作る。

メニューのツール-テキストファイルからの登録を使い一括登録

misc/imeWordReg.txt at master · chiyo-h/misc · GitHub

IME ONにして、「ｈｔｍｌ」と打って変換するだけ簡単でしょ？

結果

改行

改行

マークダウンでは、スペース２つ以上の後改行コードか改行コード２つ以上だが見た目分かりにくい

<BR>

改行タグ

」 <br> 短縮よみ 改行 Enterキーの横の'」'とスペースとEnterで
を追加するようにしてみた。

スペース２つや、改行２つより、改行が歩かないかわからないスペースや文章が縦長になるより<BR>を入れるだけで組み込みHTMLになるので便利。

エンティティ

＆  &   短縮よみ    HTMLエンティティ
＜ <    短縮よみ    HTMLエンティティ
＞ >    短縮よみ    HTMLエンティティ
＜＞  <>    短縮よみ    HTMLエンティティ
” "  短縮よみ    HTMLエンティティ

無意識に文章を書いていて、変換されなかったりする文字変換されなければ思い出すが頭に浮かばない時もあるのでIMEで全角変換されて腹が立つこともあるのでここでは、逆に全角で登録して置いて変換してしまおうという試み。><&<>"便利そうだ。

色付け

ｈｔｍｌ <span style="color: #ff8800"></span>    短縮よみ    色コード
ｈｔｍｌ    <span style="color: rgb(197,93,161)"></span>    短縮よみ    RGB表記
ｈｔｍｌ    <span style="color:white,background-color:black"></span>    短縮よみ    バックカラー
ｈｔｍｌ    <span style="color:black"></span>   短縮よみ    黒
ｈｔｍｌ    <span style="color:silver"></span>  短縮よみ    銀
ｈｔｍｌ    <span style="color:gray"></span>    短縮よみ    灰
ｈｔｍｌ    <span style="color:white"></span>   短縮よみ    白
ｈｔｍｌ    <span style="color:maroon"></span>  短縮よみ
ｈｔｍｌ    <span style="color:red"></span> 短縮よみ    赤
ｈｔｍｌ    <span style="color:purple"></span>  短縮よみ    紫
ｈｔｍｌ    <span style="color:fuchsia"></span> 短縮よみ
ｈｔｍｌ    <span style="color:green"></span>   短縮よみ    緑
ｈｔｍｌ    <span style="color:lime"></span>    短縮よみ    ライム色
ｈｔｍｌ    <span style="color:olive"></span>   短縮よみ    オリーブ色
ｈｔｍｌ    <span style="color:yellow"></span>  短縮よみ    黄色
ｈｔｍｌ    <span style="color:navy"></span>    短縮よみ
ｈｔｍｌ    <span style="color:blue"></span>    短縮よみ    青
ｈｔｍｌ    <span style="color:teal"></span>    短縮よみ
ｈｔｍｌ    <span style="color:aqua"></span>    短縮よみ

<span style="color: #ff8800">RGBコード表記(16進)</span><br>
<span style="color: rgb(197,93,161)">RGBコード表記(10進)</span><br>
<span style="color:blue">色指定</span><br>
<span style="color:blue">色指定</span><br>
<span style="color:white,background-color:black">背景色有</span>

RGBコード表記(16進)
RGBコード表記(10進)
色指定
背景色有

フォントサイズ

ｈｔｍｌ <span style="font-size:1em">1em</span>  短縮よみ    フォントサイズ(em)
ｈｔｍｌ    <span style="font-size:24pt"> 24pt</span>   短縮よみ    フォントサイズ(pt)

<span style="font-size:1em">1 </span>
<span style="font-size:1.5em">1.5 </span>
<span style="font-size:2em">2 </span>
<span style="font-size:2.5em">2.5 </span>
<span style="font-size:3em">3 </span>
<span style="font-size:3.5em">3.5 </span>
<span style="font-size:4em">4 </span>
<span style="font-size:4.5em">4.5 </span>
<span style="font-size:5em">5 </span>
<span style="font-size:5.5em">5.5 </span>
<span style="font-size:6em">6 </span>
<span style="font-size:6.5em">6.5 </span>
<span style="font-size:7em">7</span><br>

emサイズ 1 1.5 2 2.5 3 3.5 4 4.5 5 5.5 6 6.5 7

ptサイズ 1 2 3 4 5 6 7 8 9 10

6 8 10 10.5 11 12 14 16 18 20 22 24 26 28 36 48 72

pt表記は、7以上からっぽい。

下付き,上付き,ルビ

ｈｔｍｌ <sub></sub> 短縮よみ    下付き
ｈｔｍｌ    <sup></sup> 短縮よみ    上付き
ｈｔｍｌ    <mark></mark>   短縮よみ    ハイライト
ｈｔｍｌ    <ruby>漢字<rp>(</rp><rt>カンジ</rt><rp>)</rp></ruby>   短縮よみ    ルビ

H<sub>2</sub>SO<sub>4</sub>+Zn → ZnSO<sub>4</sub>+H<sub>2</sub>

<sup></sup>
<ruby>漢字<rp>(</rp><rt>カンジ</rt><rp>)</rp></ruby>

H₂SO₄+Zn → ZnSO₄+H₂
c²=a²+b²
漢字(カンジ)