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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ