こんにちは!りょうへいです。
最近は、いろいろやってるブログの対応や
新たなサイト立ち上げに夢中になっていたら
当ブログ「ほぼゼロ」が久々の更新になってしまいました(^^;
書きたいことはいろいろあるので、ぼちぼちがんばります♪
そんなこんなで、今回のお題はこちら!
コードやコマンドを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ランキング
にほんブログ村