Markdownで書いた記事をワンダー部に貼り付ける時の対処など

はじめまして。やーご(@ateruimashin)と申します。なにかのキャストをEXにするたびに記事を書いております。
私はワンダー部の記事を書くとき、Typoraを用いてMarkdown記法で書いたあとにHTMLで出力させ、ソースコードをワンダー部に貼り付ける方法で書いています。
しかし、ワンダー部では見出しが未対応なので、エディタ上で一括で置換を行っています。
毎回何をどう置換していたか忘れるのでメモとして残しておこうと思います。というのは建前で、本音はやることなくて暇で暇でしょうがないので、いい機会だし暇つぶしにまとめてみようというものです。
  よく使っているものを挙げていきます。Markdown記法については、GFM(GitHub Flavored Markdown)で使えるものを書いています。また、確認は全てTyporaで行っています。

	Markdown記法	HTMLタグ	ワンダー部
段落	なし	<p></p>	なし
改行	文末にスペース2つ	<br>	<br />
見出し	#,##,###…	<h1> ~ <h6>	なし
太字	**text** or __text__	<strong></strong>	<strong></strong>
斜体	*text* or _text _	<em></em>	<em></em>
下線	<u></u>	<u></u>	<u></u>
取り消し	~~text~~	<s></s>	<s></s>
文字色	なし※1	<span style="color: "></span>	<span style="color: "></span>
背景色	なし※1	<span style="background-color: "></span>	<span style="background-color: "></span>
文字サイズ	なし※1	<span style="font-size: "></span>	<span style="font-size: "></span>※2
フォント	なし※1	<span style="font-family: "></span>	<span style="font-family: "></span>
左寄せ	なし	<div style="text-align:left;"></div>	なし
中央寄せ	なし	<div style="text-align:center;"></div>	<div style="text-align:center;"></div>
右寄せ	なし	<div style="text-align:right;"></div>	<div style="text-align:right;"></div>
リンク	[title](url)	<a href=""></a>	<a href=""></a>
画像		<img src="">	<img src="">
水平線	--- or *** or ___	<hr>	なし
番号なしリスト	- text or * text	<ul></ul> ※3	<ul></ul>※3
番号ありリスト	1. text	<ol></ol>※3	<ol></ol>※3
表	※4	<table></table>※5	<table></table>※5
引用	> text	<blockquote></blockquote>	なし
インライン表示	`code`　※6	わからない	なし
コードの表示	※7	<code></code>※8	なし
チェックボックス	- [ ] or - [x]	<input type="checkbox">	なし
数式	$LaTeX$	mathjaxかなにかライブラリを使おう	なし
絵文字	※9	※9	なし
twitter埋め込み	twitterから埋め込みコードをコピーするのが楽 ※10	twitterから埋め込みコードをコピーするのが楽	リッチエディタを使おう
youtube埋め込み	youtubeから埋め込みコードをコピーするのが楽 ※10	youtubeから埋め込みコードをコピーするのが楽	リッチエディタを使おう

※1
Markdown記法には文字色や文字の大きさを変えるなどには対応していないので、エディタ上ではHTMLで書くと実現できます。
※2
ワンダー部のリッチエディタでは文字サイズは、8 ~ 12は1刻み、12 ~ 24は2刻みです。単位はpx。しかし、ソースコード上では任意の数値が可能。ソースコード上で指定した数値はリッチエディタにも反映されます。絶対サイズや%でも文字サイズを指定できます。
※3
このタグの間に<li></li>でリストの項目を記述します。
※4
表内に書くのがめんどくさかったので画像にしています。2行目の:---:で中央を指定しています。左寄せなら:---、右寄せなら---:を2行目に入れます。
※5
基本的には、<table></table>の間に<tr></tr>で表の横一列を定義、さらにその中に<th></th>(見出しを定義)や<td></td>(データを定義)でセルを定義します。ワンダー部の場合、 <tr>,<th>,<td>は<tbody></tbody>内に記述されています。フッターを入れる場合は、<tfoot></tfoot>を入れます。
※6
最初、シングルクォーテーション(shift+7)とバッククォート(shift+@)の見分けがつかなかった。Markdownはバッククォートです。
※7
バッククォート*3の後ろに言語を書きます。その下にコードを書き、最後にバッククォート3つで囲みます。
※8
整形化済みテキストとして扱うため、<pre></pre>の中に<code></code>を書きます。そもそもワンダー部にソースコードを上げるというのが稀有なので使う機会はないと思います。
※9
MarkdownもHTMLも関係ないけど書いた項目。例えば:blush:と打てばそれに対応した絵文字が表示されます。
※10
ソースコードモードにして貼り付けるとライブプレビューで表示されます。
  MarkdownからHTMLにするのはTyporaの機能を使うので問題ありません。問題はソースコードをワンダー部に貼り付けるときです。
しかし、2からわかるように、基本文章を書いてたまに画像を貼り付ける程度ならば、問題となるのは見出しのみです。
つまり、<h1>など見出しのタグをstyleで再現してあげれば解決します。
調べると、だいたい次のようになっているらしいです。(私はh3までしか使わないので、h4~h6は省略します)

要素	絶対サイズ	font要素	％
h1	xx-large	6	200%
h2	x-large	5	150%
h3	large	4	120%

(参考:font-sizeの理解)
見出しのサイズがわかったので、置換していきましょう。

しかし、ここで問題になったのは、文字サイズを200%にすると上の文に見出しがめり込みます。そのため、marginを指定します・・・したかったのですが、ワンダー部ではmarginを指定することができません。※追記2を参照

次のようにすればちゃんとワンダー部でもちゃんと表示できるHTMLソースコードになります。

1. </h1>など見出しの閉じタグを</div>に置換
2. <h1>など見出しに開始タグを<div style="font-size:200%">に置換。(<h1>の時。それ以外は上の表を参考にfont-sizeを変えて下さい)
3. リッチエディタ上で調整

置換作業は好きなエディタで行って下さい。
  他の人のワンダー部の記事を見ていると、見出しとかつけずに改行だけで書いている人が多いので、見出しダグは需要ないのかなと思います。しかし、ちゃんと見出しをつけたい私としては、こういうフォーラムを作る場合は見出しタグは対応してほしいなと思います。
しかし、それ以外は特に文句がないですし、すでに非推奨となったタグを使っていないので偉いなあと思いました。
さて、おじの暇つぶしによって生まれた記事を最後まで読んでいただきありがとうございます。marginとpaddingの違いすら知らない初心者が調べながら書いたので間違っていることもあります。その場合は、@ateruimashinまでリプなどでご指摘下さい。
｡оО(｡´•ㅅ•｡)Оо。おじはとても暇なんだよ・・・
  スマホで見るとタイトルが2行以上になり、タイトル同士がぶつかります。そのため、200%ではなく180%ぐらいにすると良いのではないかと思いました。 後で調べていましたところ、ふと「見出しはインライン要素ではなくブロックレベル要素にしてやればよくね？」となったのでやってみたら、いい感じになりました。
そもそも見出しはブロックレベル要素なので、インライン要素で置換することはかなり無理があったようです。そのため、全体的に記述を変更しました。 一部表記ミスがあったのを修正しました。また、埋め込みコードについては、Typoraでは対応していることが判明したので記述を変更しました。