creatersnest4

記事の中でキレイなソースコードを表示できるおすすめプラグイン3つ


記事中のコードを綺麗に表示できるプラグインを紹介します。
ブログなどを書く場合、ソースコードを記事の中に掲載したい場合などに
使用する事があります。そいいった事を考えている方、必見です。
厳選した3つのプラグインをそれぞれ紹介しますので、最後までお読み下さい。

 

インストールについて

最初にインストールについて説明しておきます。
これから紹介させていただくプラグインは全て、WordPressの管理画面より
新規追加にて追加が可能なプラグインを紹介していきます。

プラグイン追加

さらに詳しく知りたい方は、下記のリンクで詳細に説明されています。
初心者向けの記事になっていましたので、参考になるハズです。

http://wp-exp.com/blog/how-to-install/

 

【厳選】記事中でキレイなソースコード表示ができるプラグイン3選

Crayon Syntax Highlighter

Crayon Syntax Highlighter

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/screenshots/

「Crayon Syntax Highlighter」はかなり人気のプラグインです。
50種類以上のプログラム言語をサポートしています。

他言語対応

テーマもかなりの数が用意されているので、お好みのテーマが見つる事でしょう
残念ながら、多すぎて掲載はできませんが、設定画面を掲載しておきます。

Crayon Syntax Highlighter 設定

テーマの多さが、伝わったのではないでしょうか。
その他のテーマ以外の各種設定も、使用者への配慮を感じます。
キーワード検索で上位の人気だというのも、うなずけるプラグインです。

これから説明する2つのプラグインの特徴を確認して頂き迷った際は、
一度このプラグインをインストールして、使用してみる事をオススメします。

 

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

https://ja.wordpress.org/plugins/syntaxhighlighter/

「SyntaxHighlighter Evolved」も人気のプラグインです。
便利に使う為に、「SyntaxHighlighter TinyMCE Button」のインストールも必要です。
投稿の編集欄に設定ボタンが追加され、編集が可能になります。

投稿ボタン欄

7種類のテーマを設定できる事が特徴です。
それぞれ、画像にて掲載しますので、確認をしてみてください。
モード選択画面

Default

Default

Django

Django

Eclipse

Eclipse

Emacs

Emacs

Fade to Grey

スクリーンショット 2015-11-03 23.36.19

Midnight

Fade to Grey

RDark

RDark

 

Enlighter – Customizable Syntax Highlighter

Enlighter – Customizable Syntax Highlighter

https://wordpress.org/plugins/enlighter/

「Enlighter」もキレイなコードを表示する為のプラグインです。
これまで紹介してきたプラグインよりはマイナーですが、
かなりの高評価を受けているのが、プラグイン追加画面から伺えます。

プラグイン追加画面

特徴は、かなりシンプルなコード表示となっています。
色も少なくあっさりとしています。
しかし、これが良いという方も、少なくないハズです。
記事内容を、あまりチカチカさせたくない人向けのプラグインとなっております。
下記は、公式ページのスクリーン画面になります。参考までに掲載しておきます。

Enlighterスクリーンショット

注意しなければいけない点として、その他のコード表示をキレイにするプラグイン
からの移行は、提供されていません。
これまで紹介した「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」には
そういった機能が搭載されているという事です。

ただ、それを差し引いても、使い続ける人がいるという事も事実です。
最初に分かっていれば、使ってみて決めていけば良いでしょう。

 

まとめ

さて、厳選した3つのプラグインは、いかがでしたでしょうか。
コード表示は、記事にとっては肝となる部分の場合があります。
あなたにあったプラグインを見つけて頂き、良いWordPressライフをお送り下さい。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleWordPressで実装されたサイトが見れるギャラリーサイトまとめ