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

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

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

ネタ書き出し
文章構成仕上げ
Webツールが使えなくなった…。
いまのところ変換ツールに選択肢なしイコール一択！
フロー
その他

ネタ書き出し

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;

などのもの。