【WordPress】Jetpack Markdown と SyntaxHighlighter Evolved を使う設定

Jetpack Markdown と SyntaxHighlighter Evolved を使うように変更いたしました！

そのときのポイントや、変更した設定などの項目をノートしておきます♪

ポイント

マークダウン記法は、テキストエディタでのみ使用可能。 ビジュアルエディタでは使用できない。
テキストエディタからビジュアルエディタへ切り替えるとコードのインデント空白が削除されてしまう。 これに対応するにはビジュアルエディタを使わないようにするしか無い。
Jetpack プラグインの Markdown で書いたコードは、SyntaxHighlighter Evolved プラグインを通してシンタックスハイライト表示できる。
SyntaxHighlighter Evolved プラグインは、ショートコードだけでなく、<pre> タグにも対応している。
マークアップリファレンス↓
Markdown quick reference — Support — WordPress.com
Jetpack のマークアップに対応したプログラミング言語↓
Posting Source Code — Support — WordPress.com

変更点・設定内容など

新しく導入や変更した設定したこと

Jetpack プラグインの Markdown をオンにした。
SyntaxHighlighter Evolved プラグインをインストールした。
WordPress の、ユーザー > あなたのプロフィール、ビジュアルリッチエディターを使用しないにチェックを打ち、ビジュアルエディタの機能自体をオフにした。

SyntaxHighlighter Evolved をインストールしますと、プラグイン一覧画面で次のようにありましたの。

TIP: Don’t use the Visual editor if you don’t want your code mangled. TinyMCE will “clean up” your HTML.

ポイントにも書きましたけれども、ビジュアルエディタに切り替えますと TinyMCE の働きによってコードが編集されてしまいます。ですのでビジュアルエディタを停止いたしました。

SyntaxHighlighter Evolved プラグイン設定

テーマ: Eclipse
すべてのブラシを読み込む: チェックを打った。ショートコードではなく、<pre> タグを直接使用するため
他の設定

テーマは他に無いのかしら。また、フォントを変えることはできるのかしら？そんなことを感じましたの。

すべてのブラシを読み込み、にチェックを打つ理由です。今まで WP SyntaxHighlighter プラグインを使用してきましたけれども、コードを書くためにはショートコードではなく、<pre> タグを使用してきました。ですので <pre> タグに対応するためにブラシの読み込みにチェックを打ちましたの。

また、Markdown 記法でコードを挿入しますと <pre> タグに置き換えられますの。この状態を SyntaxHighlighter Evolved プラグインに拾っていただくためにもチェックをいれておりますわ♪

使わなくなった、不要になったプラグインなど

TinyMCE Advanced プラグインを停止した。
WP SyntaxHighlighter プラグインを停止した。

マークダウンを使い始めて気がついたこと

コードを入力するための文字、「`」バックティックの存在に初めて気がついた。入力するには、shift + @ (Mac)
「~~~javascript」と書くこと。「~~~ javascript」と半角スペースを入れるとシンタックスハイライト機能が作動しない。
HTML タグを書く場合は、` で囲んでコード扱いにすること。慣れが必要。
``` や ~~~ で囲ったコード内では「<」がエスケープされて「& lt;」となってしまう。対処法は見つかっていない＞＜。。。
[ code lang=”javascript”][/code] などのショートコードで囲めば「<」などはエスケープされない。とはいえ、ショートコードではマークダウンの恩恵が半減するように感じる。。。
ショートコードタグのエスケープは、[] で囲む。
- ショートコード – WordPress Codex 日本語版
~~ で囲む取消線のマークダウンは使えない。WordPress のテキストエディタに備わっているボタンを利用して、タグ <del datetime="2015-09-09T04:38:41+00:00"></del> を使用すること。例: ~~取り消し線~~
マークダウンではリンクに target=“_blank” を指定できない。従って、HTML でリンクを指定する必要がある。
WordPress で投稿を書いていて、ビジュアルエディタを使わず、テキストエディタで書くようになったためか保存した時の処理時間が短くなった気がする。
バックスラッシュ [\] をつけると次に来る文字をエスケープできる。
例: <abc\> という...
- Markdownを導入してみたから記法まとめ。 | Ginpen.com

おわりに

WordPress のテーマを Twentytwelve ベースに変更して以来、プラグラムコードの表示が崩れて困っておりました。

また、WordPress 4.3 となってから、ビジュアルエディタで ## を先頭に入力した行は <h2> に変換されるなど、マークアップ記法のようなことができるようになり、便利に使っておりました。

そのような状況の中で、次のページを読んでみますとマークアップで書いた WordPress の投稿をシンタックスハイライトできるとありますの！

さらにリンクをたどります。Markdown quick reference — Support — WordPress.com ページの「Syntax highlighting」の「See Posting Source Code for supported languages」リンクから、対応プラグインがあることがわかりました。

それが SyntaxHighlighter Evolved ですの！WordPress を開発している会社に属している方が開発しており、最近 1 ヶ月の間にバージョンアップもされており開発が続けられております。

今まで使用していた WP SyntaxHighlighter は残念ながら 2 年程更新がございません。

ですので今回プラグインの乗換、そして WordPress で文章を書く方法をビジュアルエディタからテキストエディタに変え、マークダウン記法を採用することといたしました。

ちなみに、今回停止したプラグイン 2 つは、今回変更した新しい構成に慣れましたらアンインストールをするつもりですわ。

以上です。