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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ