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 ソースコードを美しく」にコメントを残す

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ