[WP Githuber MD]WordPressでMarkdown

※「できたもの」中に見出し２を使用させているので目次に表示されています。

はじめに
結論
やったこと
説明
注意点
できたもの
見出し
あとがき

はじめに

記事作りをMD(Markdown:マークダウン)に変えたら、見た目そのまま、効率アップがすごくて、モチベーションアップしてなど良いことしかなかった！

経緯を含めてこんな具合。

MDが超便利で備忘録なども全てMDで記事を.mdファイルでVSCodeで書き溜めた
下書きをテキストファイルで作れてプレビュー付き編集がVSCode上でできる！
その(MDの形式)のままWordpressの記事に使いたい
WordPressの記事編集:ブロックエディタ（Gutenberg）に未だ慣れない
これを機にMD対応させてみよう。

結論

WP Githuber MDをプラグインに追加した程度で完了！
VSCodeでやっているのと同じレベルでWordPressの記事になった！
=これまでのWordpressと同じ見た目でVSCodeで作成した記事が表示された！
- つまり.mdで作成した内容をそのままコピペで対応OK
- mermaid使ってUMLも対応した！(重要)
- 編集画面でTabが使える！(重要)
既存のWordpressの表現力もカバー(結局一番重要)
すごく簡単。この記事も含めてMDのみで記述！できたものを下部に載せておきました。

ずっとHighlighting Code Blockを愛用させてもらっていましたが、MD形式で書けない・残せないので残念ですが不使用となりました。

やったこと

WP Githuber MDの導入
WP Githuber MDの設定
ブロックエディタをやめた
画像の置き場を変えた

1.WP Githuber MDの導入

プラグイン-> 新規追加->「WP Githuber MD」を検索。

1.WP Githuber MDの設定

modules
- SyntaxHighlight: prism.js
  評判がいいシンタックスハイライト
- Theme: tommorow
  darkでもいいんですが、よりシンプルなDarkっていう感じだったので
- Line Number: ON
  行番号が見えるようになります
- Copy to Clipboard: ON
  クリップボードにコピーさせるボタンが表示されるようになります
- Mermaid: ON
  mermaid記述のUMLが使えるようになります要はフロー図などがコードで描ける！
extensions（※表示されない環境もあるようです)
- GFM Task List: ON
  チェックボックスがMDで表記できます
- Inline Code Block with Keyboard Style: ON
  MDのインラインコードがキーボートのキーのように表示されます

2.ブロックエディタをやめた

詰まる話、VSCode上でMDをプレビューしながら書き、書いたMDと同時に見ることに慣れているため、ブロックエディタで即プレビューできるっていう書き方に慣れないだけなんですけどね。
これはやり方が間違っているかもしれませんがいろいろ試したけどMDで書いたらなんかhtmlに変換されて保存されたってこともあります。

やっぱりシンプルなテキスト記述がいい！

3.画像の置き場を変えた

WordPress内から外部に変えました。

MDにしたおかげでVSCodeなどで記事も書いて下書き保存できるし、同じ環境に画像も一緒に保存してプレビューしながら編集作業できます。

公開の際にその画像ファイルを公開用のWebストレージに保存し、そのパスをMD上から参照させるようにしました。

シンプルやり方は、

WordPressの画像としてメディアに登録
発行されたURLをコピー
こんなURLがクリップボードにコピーできます

https://[domain]/wp-content/uploads/[year]/[month]/[file_name]

もちろんこれ以外でも

FTPで自分の指定した場所にアップロードする
CDNなどクラウドサービスを利用してそこに置いて参照する

などもおすすめします。記事とWordpressの依存度を下げられ、作成したMDも一緒に保存しておいてもよいでしょう。

なんでそんなことを？？

これは記事にドラッグして登録した間違えた画像がどれかわからなくなるからです。

自分のブログのみならず、qiitaなどのコミュニティサービスでもアウトプットする前に、最低限でも推敲(文章を何度も練り直すこと)は人の目に触れるものであればとても大事です。

記事中の文字はすぐ修正できますが、登録した画像はデータとしてレコード作成されシステム管理下に保存されているため

非常に簡単に登録できる割に簡単には消せない場合

が多くあります。

私の場合、Wordpressもブロックエディタで記事から画像を消してもメディアに残っていて、推敲の結果、複数の似た画像が大量に残ることになってしまい、本当に消しても大丈夫かどうかわからなくなる場合も多くありました。

私の場合、結果的にキチンとわかりやすく整理できるようになったのでよかったと思います。

説明

開発のドキュメンテーションもWordpressの記事も基本的に表現したいことは同じだし、基本的なhtmlタグに対応したMD表現＋html直書きOKであることもあり大抵の記事づくりはカバーできます。

ただ開発柄コードを載せることが非常に多いので、単純にコードを表示させるだけじゃなく

シンタックスに色付けされている
行番号が出せる

などにも対応させる必要がありました。
貼り付けたコードはインデントを揃えたい場合があり

Tabキーが使える

ことも非常に重要だったりします。

さらに言えば、

UMLを使った図表示がテキストでできる

っていうのも大事なことです。
設計や説明の一部であるため改変もあります。その都度、画像ファイルを用意・差し替えするのも大変ですからね。（結局、これが面倒で設計書の改定や記事の更新がやらなくなってリテラシーのない情報として残ってしまうわけです）

注意点

このブログのようにCocoonを使っている場合、

目次はH2から表示されるため、各見出しは ##titile で書く

こと

できたもの

見出し

段落１
段落１中の改行

段落２
段落１中の改行

リンク

引用

引用

~~このテキストを打ち消し~~

list1
1. list1-1
2. list1-1-1
3. list1-2
4. list1-2-1
5. list1-3
6. list1-4
7. list1-4-1
8. list1-5
list2
1. list2-1
2. list2-1-1
list3
list4

list1
- list1-1
- list1-1-1
- list1-2
- list1-2-1
- list1-3
- list1-4
- list1-4-1
- list1-5
list2
- list2-1
- test
list3
list4

見出し２

index.js

function hello(){

}
hello();

index.php

function hello() {
    return 'Hello! World.';
}

echo hello();

index.html

<html>
<head>

</head>
<body>

</body>
</html>

UML

sequenceDiagram
participant Alice
participant Bob

Checkbox

Finish my changes
Push my commits to GitHub
Open a pull request

Keyboard Style

Use {ctrl}+{c} to copy text.
Use {ctrl}+{v} to paste text.
Open task manager: {ctrl}+{alt}+{del}

あとがき

MDで書く快適さは何事にも代えがたい。シンプルなテキストで記事を書きたい・・・。

ブロックエディタも優れていますが、記事を書くモチベーションがあるときに限って「なんでこの見え方になる？？」っていう状況が発生し、毎回ブロック毎の設定を確認する必要があります。そしてその仕様を覚えなければならないわけです。

なんとなく

せっかくXードやエXセルから脱却してシンプルなテキスト形式で書くだけになり、ソース管理で差分も簡単に確認できる時代になった！gitなどの各種プラットフォームも対応して記事作りのスタンダード！（大袈裟じゃないと思う）
それなのに、またUI操作が必要な記事編集をしなければならないの？しかもこのためだけに新しく学習する必要もある・・・

っていう~~言いたい放題な~~感覚になったのも強いかも。