WordPressで記事中にソースを記述するのに実体参照変換なんて必要なかったんや・・・

ブログ記事を書いていて時々ソースを書く必要がある時ってありますよね?

私はあるんです・・・

このブログは基本的に日記ブログなので大したソースを公開する事ってあまりないんだけど、それでも時々必要になることがあるの。

当たり前のことだけど、記事にソースを直接書くことは出来ないので今までは実体参照変換ジェネレータとかを利用させていただいてソースを載せていたんですよ。

まぁ、FC2時代の名残でしてね。

例えば、イザ記事中にソースを書きたいと思っていた時に利用させていただいていたのは下のようなWebサイト様です。

HTML実体参照変換 : akiyan.com

コチラでは単純に実体参照したいソースコードを窓に入力して【変換】ボタンをクリックすると、ソースが実体参照の文字列に変換されるので、それを改めて記事に張り付けるといったもの。

もうすっかり慣れてしまったんだけど、やっぱり面倒だったんですよね。

WordPressならSyntaxHighlighterEvolvedがあるじゃない!

そう、Wordpressだったらそんな手間をかける必要がなくなるプラグインがあったんですよ。

そのプラグインの名前はSyntaxHighlighterEvolvedです。


             ____
           /      \
          / ─    ─ \   超有名プラグインだから
        /   (●)  (●)  \  ドヤ顔で言うようなことじゃないおw
        |      (__人__)     |
        \     ` ⌒´    ,/
 r、     r、/          ヘ
 ヽヾ 三 |:l1             ヽ
  \>ヽ/ |` }            | |
   ヘ lノ `’ソ             | |
    /´  /             |. |
    \. ィ                |  |
        |                |  |

ダウンロードは下のリンクね。

SyntaxHighlighter Evolved

このプラグインはソースコードやスクリプトなどをクールに強調表示してくれるプラグインなんだけど、単純に使うにはプラグインをインストール~有効化したら、記事中でソースコードを[html] ~ [/html]で囲むだけです。

例えばこんな感じ・・・

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

このプラグインってば何が嬉しいかって、わざわざ実体参照変換しなくてもソースを直接記事に書いてショートコードで囲むだけで、記事中にソースを表記できるってこと。

今までわざわざ変換していた手間はなんだったんでしょうね?

さらに、そのショートコードもAddQuicktagとかのプラグインを使うと楽チンだったりします。


        ____
      /⌒  ⌒\
     / ( ●)  (●)\   捗るおww
   / ::::::⌒(__人__)⌒:::::\
    |      |r┬-|     |
   \     `ー’´    /
   ノ            \
. /´                 ヽ                 カ
 |    l   l||l 从人 l||l      l||l 从人 l||l   カ   タ
 ヽ    -一””””~~``’ー–、   -一”””’ー-、.     タ
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒))
   ┌ ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐
  ,. – ””| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ρ ̄`l
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ノ ̄ ̄

いつも有名ブロガーさんがソースを公開しているのを見て「これどうやって表示してるんだろ?」って思ってたんだけど、このプラグインだったんですね。

SyntaxHighlighterEvolvedについて詳しく知りたいのなら・・・

このSyntaxHighlighterEvolvedってインストールして有効化するだけでも十分に使えるんだけど、見た目の変更やツールバーの有無の設定などもできます。

また、ショートコードのパラメータ記述によってハイライトさせたり、見出しを付けることが出来たり、様々な表現ができるようになっています。

記述方法の例などは下のリンクでビックリするほど丁寧に解説されていますので、このプラグインに興味が湧いたら一度見てください。

まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例) | attosoft.info

ふふ・・・
これで私もオサレブロガーに一歩近づいたかもしれない・・・



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

何か見つかるかもね

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る