WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

ソースコードを投稿するプラグイン

      2015/03/26

ソースコードを投稿し綺麗に表示したい。でもCSSをつくるのは面倒。

でいろんな言語に合わせてスタイルを整えて表示してくれるのプラグインを紹介。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>

</pre>
<pre>    <p><?php echo 'Hello World!'; ?></p>

    <p>この行はハイライトされました</p>

    <div class="foobar">
         This is an example of smart tabs.
    </div>

    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

こんな感じに表示したい!

 

「SyntaxHighlighter Evolved」を使う

WordPressのプラグイン「SyntaxHighlighter Evolved」をインストールして下記のように投稿画面でソースコードを挿入しタグで囲むだけ。highlightでハイライトしたい行をしてするだけ。下記はhtmlの例です。php や js など様々な言語に対応しています。

 

詳細説明

こちらのサイトから詳細は確認できます。英語ですが。

また、インストール後、「設定」メニューから「SyntaxHighlighter」を選べば、行番号の有無の設定や簡単な使い方サンプルも日本語で説明があります。

WordPressのメニューから確認。

私の場合、ショートコード作成プラグイン「AddQuicktag」でショートコードを作成して使ってます。

 - WordPress

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

  関連記事

wordpress情報
「Events Manager」でオリジナルのプレースホルダーを追加する

便利なイベントカレンダープラグイン「Events Manager」ですが、フォー …

wordpress情報
特定のページのみSSLに対応させる

申し込みページに住所等の個人情報を入力する場合は、情報流出を防ぐためSSLを導入 …

wordpress情報
カスタム投稿をプラグインを使って実装し抽出する

WordPressでブログだけでなく通常のコーポレートサイトのようなページを作成 …

wordpress情報
Contact Form 7をレスポンシブ対応する

お問い合わせフォームを作るときに定番のプラグイン「Contact Form 7」 …

wordpress情報
使用しているテンプレートファイル名を表示

WordPressのテーマを自分て作成しているとき現在表示されているのがどのテン …

wordpress情報
ログイン画面のロゴを変更

クライアントに納品するようなサイトはWordPressのログイン画面のロゴをオリ …

wordpress情報
ショートコードやタグを登録して簡単に呼び出す

WordPressの記事を登録するときショートコードやタグなど手で打つのはめんど …

wordpress情報
「Events Manager」の絞り込み検索ページへリンク(条件込み)を張る方法

イベントカレンダーに欠かせないプラグイン「Events Manager」。今回は …

wordpress情報
カスタムフィールドの値をOR条件で抽出

カスタム投稿を作成した時に、カスタムフィールドの条件をOR条件で抽出したかったり …

wordpress情報
Contact Form 7の初期値をクエリストリングから取得する

お問い合わせフォームを作成するときよく使うプラグイン「Contact Form …