wordpress ソースコードを表示するプラグイン

  • このエントリーをはてなブックマークに追加

スポンサーリンク

wordpress ソースコードを表示するプラグイン

 wordpress で、プログラムのソースコードを表示するには、ビジュアルエディターを使わないでください。テキストエディターを使います。

 特殊文字は、「AddQuickTag」プラグインで、特殊文字変換(エスケープ処理)を変換ボタンで設定すると、表示できます。

 ソースコードを表示するには、SyntaxHighlighter Evolved プラグインを使います。

 wordpress で、ソースコードを表示するプラグインです。SyntaxHighlighter Evolved プラグインをインストールしました。

特殊文字ソースコードを表示する

 「AddQuickTag」プラグインで、特殊文字変換(エスケープ処理)を変換ボタンで設定できます。

 HTML Entities
 Decode HTML

特殊文字

 HTML 特殊文字は、ホームページを作成する時に、特殊な文字を使用 (表示) したいときに利用します。

 特殊文字は、「AddQuickTag」プラグインで、特殊文字変換(エスケープ処理)を変換ボタンで設定すると、表示できます。

 

代表的な特殊文字 – 特殊文字変換(エスケープ処理)をしない場合

 「AddQuickTag」プラグインで、特殊文字変換(エスケープ処理)をしない場合です。

代表的な特殊文字

No. 文字表記 10進表記 16進表記 文字 コメント
001 "  "   "  “””   クォーテーション
002 &   &   &  “&” アンパサンド
003 <    <   <  “<" 小なり 004 >    >   >  ">” 大なり
005           ” “  空白
006 ©   ©  ©  “©” コピーライト

注記)文字表記は必ず小文字で記述します。

 

代表的な特殊文字 – 特殊文字変換(エスケープ処理)をした場合

 「AddQuickTag」プラグインで、特殊文字変換(エスケープ処理)をした場合です。

代表的な特殊文字

No. 文字表記 10進表記 16進表記 文字 コメント
001 &quot;  &#34;   &#x22;  “””   クォーテーション
002 &amp;   &#38;   &#x26;  “&” アンパサンド
003 &lt;    &#60;   &#x3C;  “<” 小なり
004 &gt;    &#62;   &#x3E;  “>” 大なり
005 &nbsp;   &#160;  &#xA0;  ” “  空白
006 &copy;   &#169;  &#xA9;  “©” コピーライト

注記)文字表記は必ず小文字で記述します。

SyntaxHighlighter Evolved

 SyntaxHighlighter Evolved プラグインをインストールしました。

 コードを全く変更することなく、簡単にシンタックス・ハイライトされたコードをサイトに投稿できます。Alex Gorbatchev の SyntaxHighlighter を使用しています。

 ヒント:
 コードを台無しにされたくないのであれば、ビジュアルエディターを使わないでください。TinyMCE は HTML を”クリーンアップ”してしまいます。

SyntaxHighlighterの設定

 規定の設定の一般から、必要な項目のみにチェックを入れました。変更を保存しました。表示したいコードのタグを、「AddQuickTag」に登録しました。

 

規定の設定をここで指定できます

規定の設定

設定はコードの出力ごとに構成できますが、規定の設定をここで指定できます

一般

 行番号を表示する
 ツールバーを表示する
✓ 自動リンクを有効にする
 コードボックスの表示を閉じておく
 軽い表示モードを使う
✓ インデントタブを許容するスマートタブを使う
✓ 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

変更を保存 をクリックしました。

 

「AddQuickTag」に登録しました。

表示したいコードのタグ

只今、記事を作成中です。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*

Translate »