今回はブログの記事中にソースコードを見やすく表示する方法をお伝えします。
SyntaxHighlighter Evolved
皆さんは、ブログの記事中にソースコードを表示して、説明したい時ってありますか?
私はたまにあるんです、良さそうなプログラムが見つかった時やHTMLを説明したいときなんかは、わかりやすく皆さんに広めたいと思っちゃうんです。
そんな希望を叶えてくれる便利なWordPressのプラグインがありました。
「SyntaxHighlighter Evolved」です。
綺麗にソースコードを表示してくれます。
こんな感じです、見やすいですね。
<?php function showAdInBody() { return 'ここにGoogle Adsense等のコードを書く'; } add_shortcode('adsense', 'showAdInBody'); ?>
インストールしてみよう
それではさっそくインストールしてみましょう。
WordPressの管理画面から
- プラグイン > 新規追加 >「SyntaxHighlighter Evolved」で検索 > インストール > 有効化
インストールできましたか?
できない方はこちらまで。
使ってみよう
使い方はいたって簡単、ショートコードを使用して書きます。
ショートコードがわからない方もいると思います、次回以降で説明しますね。
今はおまじないみたいに考えてください。
記事投稿画面を開き、テキストモードにします。
では実際に挿入してみましょう。
やり方はいくつかありますが、今回はcodeというショートコードを使用して書く方法を説明します。
codeの中にlanguageで言語の種類を指定します。(下図の赤枠参照)
下図では、phpの例です。
codeでプログラムのソースコードを挟むイメージです。
ここで注意点、このプラグインを使用するときはテキストモードで編集してくださいね。(下図の赤枠参照)
実際にはこうなります。
<?php function showAdInBody() { return 'ここにGoogle Adsense等のコードを書く'; } add_shortcode('adsense', 'showAdInBody'); ?>
見やすいですね!
これがあればプログラムのソースコードやHTMLのソースコードを見やすく紹介できますね。
最後に
ご意見や記事にして欲しいことなどありましたら、お気軽にここをクリックして、メッセージをくださいね。
今日はこの辺で。
最後までお読みいただきありがとうございます。
コメント