VisualStudioCodeを使い、マークダウン記法でHTMLを作成し、WordPressへ投稿する方法

以下は簡易版です。本編は「ネタ書き出し」から始まります。

  1. 文章を書く
  2. 要素間1行
  3. hタグ書き直し
  4. class名追記
  5. <style>退避
  6. md保存
  7. 変換実行
  8. ブラウザで開く
  9. エディタで開く
  10. 自動更新metaタグ追記<meta http-equiv=”refresh” content=”2; URL=”>
  11. <script>削除
  12. <style>戻し
  13. class名削除
  14. preの「class=”hljs”」削除
  15. preのcodeのdivを削除
  16. target=”_blank”追記
  17. 最終確認
  18. htmlコピペ
  19. 投稿完了

ネタ書き出し

VisualStudioCodeでとにかくtxtで書き出しまくる。できるなら最初からMarkdown記法で書く。最初はメモ帳でもいいが、まとまってきた辺りから言語モードはMarkdownでプレビューを利用し、さらにまとめていく。

構成がわかりやすいように自分だけのスタイルシートを本文の上部に設定しておくとよい。わかりやすいデザインを決めておく。基本的なタグは以下です。

  • h
  • p
  • br
  • strong
  • リンク
  • 画像
  • リスト
  • 水平線
  • pre
  • 引用
  • dl定義
  • テーブル
<style>
h1{
  color: rgb(212, 25, 25);/*文字色*/
  border: solid 3px rgb(212, 25, 25);/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  
}
h2 {
  color: rgb(255, 49, 49);/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  //border-top: solid 3px black;/*上線*/
  border-bottom: solid 3px rgb(255, 49, 49);/*下線*/
}
h3{
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: red;/*文字色*/
  background: transparent;/*背景透明に*/
  //background-color: #eeeeee;
  border-left: solid 5px #f58f8f;/*左線*/
}
h4{
  padding: 0.25em 0.0em;/*上下 左右の余白*/
  color: black;/*文字色*/
  //background-color: #eeeeee;
}

a{
  text-decoration: none;
  color: rgb(231, 65, 93);
}
pre{
   background-color: #eeeeee;
   overflow: auto;
}
.textright{
  text-align: right;
}
.liststyle_none{
  list-style: none;
}
</style>

文章構成仕上げ

本文を仕上げていく。

Webツールが使えなくなった…。

こちらのWEBツール「markdownテキスト変換ツール」で「“`」のpreタグうまく変換できなくなりました。自分の記述が間違っているのかもしれません。

いまのところ変換ツールに選択肢なし イコール 一択!

MarkdownからHTMLへの変換は一択になりました。
それは「VisualStudioCodeのMarkdownPDF:Export(html)」での変換です。

しかし、このツールは変換にクセがあります。よって変換前に少し調整が必要です。
変換方法と修正方法を合わせた内容を「フロー」として以下に記載します。

フロー

1.要素間は必ず1行あける

変換時の不具合を防ぐためです。

2.hタグの修正

  • hタグ書き直し
  • class名追記

「#」「##」「###」などの見出しタグをHTMLのhタグに直し、全てのhタグに共通のclass名を追加する。実質「##」などのMarkdownの見出しタグはプレビューの表示確認ぐらいでしか使用しなくなります。理由は「VisualStudioCodeのMarkdownPDF:Export(html)」変換時に、hタグにユニークなIDが追加されるのを防ぐためです。検証した結果、こちらで記述するのはclassでもいいことがわかりました。

3.スタイルシートを設定している場合、一旦削除しておく

変換時に不具合起こらないようにするため。

4.拡張子.mdで保存

mdファイルじゃないと「MarkdownPDF:Export(html)」が使えません。

5.変換

「表示」→「コマンドパレット」→「MarkdownPDF:Export(html)」→クリック

6.HTML編集準備

  • htmlをブラウザで開く
  • htmlをエディタで開く
    • 余計なscriptを削除してもいい
    • 一時退避したスタイルシートを戻してもいい
  • 自動更新metaタグを追記してもいい
<meta http-equiv="refresh" content="2; URL=">
  • 修正する
    • hタグの適当に付けたclassを消す
    • preの「class=”hljs”」を消す
    • preのcodeのdivを消す
    • リンクに「target=”_blank”」を追記する

7.HTMLを編集する

HTMLの記述は分厚い本ができてしまうので、都度調べてはひとつずつ覚えていく。

8.body内のhtmlをWordpressへコピペし、投稿完了

その他

自分で使えそうと思ったものをひとつずつ使えるようにしていく。

<table border="1">
<th width="15%">
&nbsp;

などのもの。