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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ