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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ