ソースコードやLinuxコマンドをWordPress記事内に美しく表記できるプラグイン

      2017/11/14

こんにちは!りょうへいです。
最近は、いろいろやってるブログの対応や
新たなサイト立ち上げに夢中になっていたら
当ブログ「ほぼゼロ」が久々の更新になってしまいました(^^;

書きたいことはいろいろあるので、ぼちぼちがんばります♪

そんなこんなで、今回のお題はこちら!

コードやコマンドをWordPressブログ記事の中でかっこよく表示したい!

よくPHPのコードとか参考にさせていただくために
参考にさせてもらうブログ記事とかって枠の中にコードが書いてあったりして
しかもコピーできるボタンがついていたりして便利でかっこいいですよね♪

当ブログでも、コードを掲載している記事もありましたが
りょうへいの記事のコードはなんだか様子がちがいw
あまりかっこよくありません….

そこで、いろいろと調べてみると記事内にコード表示するための
WordPressプラグインの存在を知りましたのでさっそくインストール♪

Enlghter-Customizable Syntax Highlighter をインストールする

WordPress管理画面のプラグイン→新規追加 から 「enlighter」で検索したらすぐに出てまいりました。

とりあえずプラグインを有効化させる

なんだかGIFアニメーションのデモが表示されて楽しげ♪

使うとどんな感じになるか?

Enlighter 使用前

<div id=”topnews”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?>
<?php if ($count == 2): ?>
<!– 記事2番目位置に表示する広告コード1 –>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”-e3-a+9s-gb+ub”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ソースコードを貼り付けているだけなので、なんか締りがありません(^^;

 

Enlighter 使用後

<div id=”topnews”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?>
<?php if ($count == 2): ?>
<!– 記事2番目位置に表示する広告コード1 –>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”-e3-a+9s-gb+ub”
data-ad-client=”ca-pub-XXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

おおおおお!!
かなり、いい感じにソースコードが表示されました♪

りょうへいがやりたかったのはコレですよコレ。

どうやって使うの?

WordPressのビジュアルエディタ上に追加になった 「{…}」のボタン(Enlighter Code Insert)をクリック。

すると、Enlighter Code Inserの編集画面になるので
言語、Mode部分を選択して(今回の場合は下記の設定でやってみました)
テキスト編集エリアにソースコードを貼り付ける。

Enlighter Code Insertの編集画面を抜けると
ビジュアルエディア上では↓下記のような表示でソースコードが表示されました♪

ビジュアルエディタで編集を終えて公開状態にするとWordPressブログ上では
上述の「Enlighter使用後」のような感じで表示されます!

これを使うだけで、見易さも、コピペもできたりするので実用度もアップ!

$ sudo apt-get update


こちらはテーマを「Twilight」にしてみました。
コマンド入力の表記にぴったりな感じですね♪

 

Enlighterについてざっくりと紹介してみましたが、要所で使うととても良い感じの記事になりそうです!
これで、また、ひとつ、りょうへいのWordPressでの表現方法が豊かになれました(^^)

近日、PHPコードをいじるような記事も予定していたので、今後はどんどん活用してみようと思います♪

クリックで応援よろしくお願いします♪


WordPressランキング
にほんブログ村 IT技術ブログ CMSへ
にほんブログ村

ブロトピ:今日のブログ更新

 - CMS, WordPress, 設定 , , ,

%d人のブロガーが「いいね」をつけました。