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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ