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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ