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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ