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

2018/05/24

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

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

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

コードやコマンドを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): ?>
<!– 記事２番目位置に表示する広告コード１ –>
<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): ?>
<!– 記事２番目位置に表示する広告コード１ –>
<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>

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

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