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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ