BETA

WordPressにMarkdown+LaTeXで書いた記事を投稿する

投稿日:2018-12-11
最終更新:2018-12-11
※この記事は外部サイト(https://willow-leaf.net/post_markdown-late...)からのクロス投稿です

前書き

最近WordPressでブログを始めようと思い立ち,ローカル環境でせっせと環境構築に勤しんでいます → ブログ始めました!

まったり生活(仮)

勢いにまかせて立ち上げたのでデザインとかまだまだ課題は残っていますが少しずつ改善していきたいです.

折角なので,QrunchやQiitaにあげた記事もまとめて投稿してみたいと思ったのですが,デフォルトのWordPressではMarkdown形式のテキストをそのまま綺麗に表示させることは出来ません.

土日を丸々潰したりとかなりドツボに嵌ってしまいましたが,悪戦苦闘の末ようやく整備出来たので共有させていただきたいと思います.

環境

私が試した環境は以下のようになっております.

  • Windows10 64bit
  • WordPress 4.9.8 5.0 で動作しました!

WordPressの準備

数式を表示させる為に以下のプラグインを導入します.

設定画面を開いて以下の画像のようにチェックしておきます.

最初,WordPress5.0から採用のGutenbelgエディターを使用していましたが,何かとトラブルに見舞われたので,以下のプラグインを導入して旧版のエディターに戻しておくことを推奨します.

Classic Editor を導入したら一緒にWordPressの自動整形機能を無効にするために以下のプラグインを導入することをおすすめします.

インストール出来たらTinyMCEの設定画面を開き,高度なオプション - 段落タグの保持にチェックを入れておきます.

最後に,お好みでWordPressをMarkdownに対応させるために以下のプラグインを導入します(詳しくは後述の「Markdownを投稿する」で説明します).

以上でWordPress側の準備は完了です.

Markdownを投稿する

WordPressをプラグインで無理矢理Markdownに対応させる方法と,

HTMLへの変換機能を持ったMarkdownエディターを使って,MarkdownをHTMLに変換したコードをWordPressに投稿する方法の2つを見つけたので紹介します.

どちらの方法で投稿するにしても,以下のソフトは非常に便利なので是非インストールしておきましょう.

通常のMarkdownエディターとしても使え,更にMarkdownをHTML形式に変換する機能も持っているエディターです.

特に二番目の「MarkdownをHTMLに変換してWordPressに投稿する方法」を採用する方には必須レベルのソフトです.

私は,ブラウザ上で執筆していた記事が不意の事故で消えてしまったという経験をして以来,まずはTyporaのMarkdownで記事を書いてローカルの環境で確認してから適宜貼り付けして投稿するという運用をしていますが,いまのところ非常に快適なのでおすすめです.

方法1. プラグインを使ってMarkdownに対応させる

色々と試行錯誤していましたが,手軽さと簡単さでこちらのやり方に軍配が上がりそう…?

メリット

  • WordPressのエディター画面から直接Markdown形式の記事を執筆できる
  • QiitaやQrunchの記事をコピー&ペーストするだけで動作することを確認済み
  • 導入や設定がすごく簡単

デメリット

  • エディター画面がMarkdownエディターに強制的に変更される
  • ↑の仕様に関連して,過去のHTML形式の記事を編集する際などに意図しない挙動をする可能性がある(レビューに一件報告があったが当方の環境では確認できず)
  • エディター画面のフォントがおしゃれじゃない

導入方法

上の方で紹介していたプラグインをインストールします.

なんとこれでおしまいです!

エディター画面を開くとMarkdownエディターが立ち上がると思うので思う存分Markdown記事を書いちゃいましょう!

方法2. MarkdownをHTML形式に変換して投稿する

若干まわりくどい方法で管理コストは上がってしまいますが,プラグイン等に頼らない為頑強な記事が書けると思われる方法です.

メリット

  • HTMLコードに変換する為,デフォルトのWordPressでほぼ確実に動作する
  • CSS等で細かく見た目の調整が出来る
  • プラグインを使わないのでクリーンな環境を維持できる

デメリット

  • 変換からアップロードまでやることが多くて面倒臭い
  • 編集画面の可読性が悪くなる

以下,Typoraをインストールした前提で話を進めていきます.

Typoraの画面を開いたらMarkdown形式で記述されたテキストを貼り付けましょう(元々Typoraで編集していた場合はこの作業は不要です).

メニューバーに 編集 - HTMLとしてコピー という項目があるので選択します.

これで,HTML形式に変換された文章がクリップボードにコピーされました.

あとはWordPressの編集画面にペーストすれば完成です.

数式を表示させる

次はWordPressで数式を表示させる方法を紹介していきます.

といってもそんなに難しいことはなく,記事の先頭に [mathjax] と記入して,$$ -[ここに数式を記入]- $$ のように二つの$$マークの間に LaTeX 形式で数式を記述すればOKです.

簡単ですね!

こんなにあるぞ!ドツボに嵌まれる落とし穴!!

私の休日を無慈悲にも奪い去っていったドツボポイントを紹介していきます.

とりあえず上で紹介した方法が上手く動かない場合はこちらをご確認ください.

数式が上手く表示されないぞ…….もしかして!?

はい,そうです.

WordPressに投稿した記事は最初の " \ " が無視されてし まうんです(分かるかッ!!)

もしかしたら私の環境固有の問題かもしれませんがね…….

対処法は簡単で,すべての " \ " 記号の前にもう一つ " \ " を付ければOKです.

例えば改行は以下のようになります

// 改行されないパターン  
$$  
f(x) = x \\  
g(y) = y  
$$  
// OK  
$$  
f(x) = x \\\  
g(y) = y  
$$  

目次の表示がおかしいな…?

テーマによっては,記事の中から自動的に目次を生成してくれる機能がついたものがありますね.

大体の場合は記事中の <h2>タグ (Markdownの場合 ## に対応)を大見出しとして,以下<h3> <h4>  と階層構造を作っているようです.

従って,記事中に <h1>タグ(Markdownの場合 #)が出てくると上手く目次を拾えないという事態が発生します.

対処法は簡単です.

すべての h タグ もしくは # をインクリメントしましょう.

<h1> → <h2>

# → ##

といった具合ですね.

Markdownのリストが表示されない

前後に空行を入れましたか?チェックしてください.

// NG  
なんか文章  
+ リスト1  
+ リスト2  
つぎの文章  
// OK  
なんか文章  

+ リスト1  
+ リスト2  

つぎの文章  

インラインで数式が表示されないよ

$ - $ のシンタックスはWordPressの予約語となっているようで,使用が非推奨になっています.インラインで数式を書きたい場合は以下のシンタックスに置き換えましょう.

[latex] - [/latex]

方法2. で数式が表示されません

以下のようなコードがあったとすると,

$$  
f(x) = x^2  
$$  

TyporaのHTML変換機能では次のように変換されてしまいます.

<p class='md-math-block'>$  
f(x) = x^2  
$</p>  

この<p class='md-math-block'></p>は(自分の環境では動作しなかったので)取り除いてやる必要があります.

手動でやるとあまりにも面倒臭いので勝手に置き換えてくれる正規表現を作りました.

適当な正規表現での置換に対応したエディタにHTMLをコピーして実行してみてください(私はSublime Textを使いました).

Find:    <p class='md-math-block'>(\$\n(.*\n){0,100}?\$)</p>  
Replace: <p>\n\$$1\$\n</p>  

$ - $[latex] - [/latex] に変換するのが面倒くさいよ!

置換用の正規表現をつくりました.お使いください.

Find:    \$(.*?)\$  
Replace: [latex]$1[/latex]  

# を一個ずつ増やしていく作業が面倒くさいよ!

置換用の(ry

Find:    ^(#+)  
Replace: #$1  

(行頭の # を見つけて一個足しているだけなので,Pythonコードを掲載していて行頭にコメントアウトを使用しているような場合は誤動作するのでご注意ください)

正規表現で一々置換していくのが面倒くさいよ!自動化して!

私もそう思います.

もっと簡単な方法があるのであれば是非教えて頂きたいです.

終わりに

この記事が皆さんのブログライフを少しでも豊かに出来れば幸いです.

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@yanagiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!