SyntaxHighlighter ソースコードを美しく

こんにちはメルです。

今日は、前々から入れてみたかったプラグインを入れました。

 

SyntaxHighlighter
ブログなどでソースコードを公開するときなどに、美しく表示できるプラグイン

 

WordPress標準でやろうとすると、スタイルシートをカスタマイズしたりしなければならないのですが、標準のblockquoteを使うとこんな感じに。。↓


あああああああああ


しかも、<html>のタグに使われているは半角のままだとHTMLとして表示してしまう為、ソースとして見せたい場合には<などに変換してやらないといけないので非常にめんどくさいのです。

このプラグインを導入するとそういった面倒も一切なくなり、[html]と[/html]の間にソースをコピペするだけで良くなります。

こんな感じです↓

<!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>

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

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

	<div class="foobar">
		この	行は	スマート
		タブ	の	例
		です。
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>
body{ color: #333; }

/*●リンク文字*/
a{ text-decoration: underline; }

a:link,
a:visited{ color: #00b; }
a:hover,
a:active{ color: #f60; }

#! /usr/local/bin/perl

$ENV{'TZ'} = "JST-9";
($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time);
$year  = sprintf("%02d",$year + 1900);$month = sprintf("%02d",$mon + 1);
$mday  = sprintf("%02d",$mday);$hour  = sprintf("%02d",$hour);
$min   = sprintf("%02d",$min);$sec   = sprintf("%02d",$sec);
$week = ('日','月','火','水','木','金','土') [$wday];  $today = "$month/$mday($week) $hour:$min";

 

まぁほとんどの方は必要のないプラグインなのでしょうが、前々から導入したかったのでうれしくてつい書いちゃいました(笑

 

 

SyntaxHighlighterプラグインのインストール方法

 

1.管理画面のプラグイン新規追加ページに移動する。

SyntaxHighlighter01

 

 

2.「SyntaxHighlighter」と記入し、プラグインの検索をする。

 SyntaxHighlighter02

 

 

3.いますぐインストールをクリックで自動的にインストールされます。

SyntaxHighlighter3

 

 

4.プラグインを有効にしたら終了です。

 

 

SyntaxHighlighterの設定

WordPress管理画面の「設定」の中にメニューが追加されますので
そこから設定が出来ます。

 SyntaxHighlighter4

 

設定ーページに移動したらまず、SyntaxHighlighterのバージョンが3だと、ソースの折り返しが使えないのでバージョン2に変更。

SyntaxHighlighter5

 

次にテーマですが、色々あるので試してみてかっこいいと思うものを選んでください。変更するとページ下でプレビューしますので確認しながら選ぶと良いです。
私はデフォルトを使用しました。

 SyntaxHighlighter6

 

この部分の設定は見た飯だと思いますが、私の設定は感じですね。

SyntaxHighlighter7

 

設定完了後、変更を保存をクリックすれば終わりです。

 

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった

 

ネットビジネス速報メールマガジン

 

メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。

Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。

お名前(必須)
メールアドレス(必須)

One Response to “SyntaxHighlighter ソースコードを美しく”

記事「SyntaxHighlighter ソースコードを美しく」にコメントを残す

サブコンテンツ

危険な高額塾

タグ

与沢翼×蝶乃舞 インターネットビジネススクール ping EC 株式会社SRシステム ネットビジネス大全集 掲示板 切り抜き ビジネス 権利収入 モザイク セキュリティ 定型文 Youtube DOCTYPE office ネットビジネス 大西良幸 ツール アンダーグラウンドメソッド やしろひろたみ BUYMA 株式会社Free Agent Style タスクバー 無断送信 短縮URLツール 人物 アレックス レイアウト 伊藤虎太郎 村上省吾 SyntaxHighlighter バックアップ 情報商材 スカイプ タイガーウイング 流出 比較 不正アクセス サンタ がら空きビジネス 既得権益 レビュー CS5 マイクロソフト JavaScript CGI 短縮URL カスタマイズ RSS クラウド変換 ぼかし 大園式転売塾 自己アフィリエイト 自動化 ワードプレス バイドゥー 個人情報 クラック 到達率 IBS .htaccess 株式会社バンザイ 81a338 postpost 小笠原健一 デスクトップ KMSpico ソースコード 不正送信 株式会社ニュース ヤフオク ヤフーショッピング 配布 転売大園塾 ライブチャット プロモーション 詐欺 もざ Yahoo Windows 7 原田真 伊藤塾 山下 やしろ塾 改竄 Baidu Chrome スマホ ファビコン SEO レタープレス 無料 ユーチューブマニアクス2017 立体 DTD IE グラデーション トレンドアフィリエイト FTP 自己アフィリ パズル BBIZ ブルートフォースアタック アドセンス 量産 iphone ネットビジネス最後の楽園 久積篤史 スタイルシート 百度 YouTube Maniax 2017 優先順位 トレンドキーワード ボタン ざくざく君 @PAGES explorer エクスチェンジ メモ ウインドウ 表示 マニュアル FireWorks document.all ヤフー 三橋美仁 ネットガレージ 上位表示 管理画面 クリックランキング アフィリエイト SmoothScroll.js 与沢翼 アレックス式ネオせどりスクール バイマ Ban Hammer ブラシ 詐欺組織 ブロックポリシー RSS Includes Pages ネットゲーム 画像 脆弱性 html エクスプローラー Firefox メルマガ配信システム PPC Agency Business wp-login.php 関根義光 twitter 中山秀人 インターネットエクスプローラー 出店料 SKナレッジ HTML4.0 シャンプー wordpress プロファイル WEB Tiger-Wing 秒速で1億円稼ぐ男 クラウド入力機能 切抜き 感染 Google Maps API せどり system 伊藤 歩 プラグイン Adobe 賢威 インペリアルゴールド XHTML 改ざん 土屋ひろし css スムーズ ソース ハート ブロック 音量アイコン MasterCollection ツイッター テーマ 無料オファー 加工 followmatic ネオヒルズアカデミー Favicon 秀吉塾天下統一 インターネット アイコン ブラクラ 蝶乃舞 IP ムーバブルタイプ 登録禁止 株式会社WINGOOD Thunderbird バナー アフィ匠 Cash on Wordpress 球体 フォローマティック 放射線 CS6 レンタルサーバー Login LockDown ウイルス functions.php Newpost Catch 新井浩 ネットショップ アンダーグラウンドアフィリエイトクラブ 固定ページ 関根塾 アクセス制限 副業術 android リンクシェイカー 高額塾 moza LinkShaker トラフィック ランキング 宮田麗花 MT 特権ビジネス 自動 ECサイト 伊藤 虎太郎 Internet Explorer サイト改ざん ソフト Diamond Affiliate Masters Program 大園麗花 申請金ビジネス ライオンアフィリエイト クロスアフィリエイト エディタ tool フレンドシップメール 高速ゲーム 管理ツール google wpXサーバー 個人情報流出 不労所得の神 株式会社A-ブログレス getElementByTagName 大園転売塾 池田純矢 滑らか 石井匠 特定のメールアドレス force puzzle 加藤 秀吉 北川 雅嗣 日本語入力変換ソフト 復元 インフォトップ テンプレート Line Wordpress Content Slide PHP RMT ロリポップ ping送信 レイアウト崩れ KMS認証 Windows 株式会社SRシステム getElementById 背景 High Concept Marketing マルウエア Extension Manager ブラウザ MovableTYpe Google Maps ライン WP アクセスアップ スクロール コピーボタン ドメイン エキスパートメール

アーカイブ

エステトラブル

このページの先頭へ