WordPressでblogを書いてる時にソースコードを表示したい時には、
プラグインでSyntax系のプラグインを使用することはよくあると思います。
その際にビジュアルとHTMLの切り替えで、ソースコード中のTabやSpaceが消えてしまうことは結構あると思います。
そんな時に使用するプラグインのご紹介です。
- TinyMCE Advanced
- SyntaxHighlighter Evolved
- SyntaxHighlighter TinyMCE Button
の3つです。
TinyMCE Advanced
『TinyMCE Advanced』は、とても有名なビジュアル用のブラグインです。
こちらをインストールしておくと、pタグやbrタグも消えないのでおすすめです。
SyntaxHighlighter Evolved
『SyntaxHighlighter Evolved』はSyntax用のプラグインです。
SyntaxHighlighter TinyMCE Button
『SyntaxHighlighter TinyMCE Button』こちらが今回一番オススメしたいプラグインです。
使用方法はとても簡単で、設定へいき、使用しているSyntaxプラグインを選択して使用することができます。
こちらをインストールすると、初期状態ではビジュアル画面のボタンの一番上の右に表示されます。そのボタンの『code』をクリックすると、文中にソースコードを挿入できます。
また、言語の表示・非表示の設定も出来るので自分が普段使っている言語のみを表示することが出来ます。
こちらのプラグインを入れることで、ビジュアルとHTMLを切り替えてもソースが崩れることもなくなくなります。
注意としては、そのままでは装飾がされないので、SyntaxHighlighter Evolvedの設定画面へ行き、『すべてのブラシを読み込む』にチェックを入れないと装飾がされません。
今回は『TinyMCE Advanced』を使用しましたが、『CKEditor』でも『SyntaxHighlighter CKEditor Button』を使用することで、利用することが出来ます。
