MOMOYA.Labs 桃屋ラボ
最終更新日時
 2019年05月29日(Wed)
コンテンツ
    トップページ
  • VB
    • フォーム
    • コントロール
    • インターネット
  • C#
    • フォーム
    • ファイルシステム
    • データ統計
    • SQLite
  • VBA
    • Excel
    • Tips
  • PHP
    • 基礎
    • 文字列
    • ファイルシステム
    • 通信
    • PEAR
    • Twitter API
    • Tips
  • Ruby
    • Rubyを始めよう!
    • ファイルアクセス
    • ディレクトリ
    • Excel操作
  • Python
    • Pythonを始めよう!
  • OpenSocial
    • 各種情報
  • HTML&CSS
    • HTML5
    • CSS
    • iPhone向けサイト作成
    • HTML Tips
    • CSS Tips
  • Javascript
    • ウィンドウ関連
    • ナビゲーション
    • 便利なスクリプト
    • Tips
  • プログラム全般
    • .Net Framework
    • 数学?
    • その他
  • Oracle
    • Tips
    • 各種情報
  • DB2
    • Tips
  • MySQL
    • 開発で使いそうなSQL
    • メンテナンス
  • ネットワーク
    • デバイス
    • その他
  • Windows
    • Vista
    • Windows 7
    • IIS
    • Excel
    • 拡張
    • コマンドプロンプト活用
    • 不具合対応
    • ショートカットキー
    • Tips
  • Windows FreeSoft
    • ブラウザ(FireFox)
    • Web開発関連
    • グラフィック
    • プログラミング
    • SQL
    • VMware
    • プロジェクト管理
    • その他
    Mac
  • Linux&Unix
    • Kubuntu
    • Fedora
    • Debian
    • NetBSD
    • Tips
  • Linux Software
    • オンラインストレージ
  • インターネット知識
    • ホームページ作成
    • Javascriptで操作
    • アフィリエイト
    • ネットで見つけた面白いもん
    • 便利なサイト
    • 便利な活用方
    • Twitter
    • その他
  • iPhone
    • おすすめアプリ
    • Jailbreak
    • 検証
  • 雑記
    • ネットワーク関連
    • ハードウェア関連
    • セキュリティ関連
    • 読み方
    • 故障?保証対象?
    • その他
  • 雑記(IT・デジモノ以外)
    • 言葉の意味
    • 転職関連
    • その他
  • MOMOYA's FreeSoft
    • Keyboard Launchar
  • 個人的メモ
    • リンクメモ
    • ネタ
サイト内検索
Sponsored Link
プロフィール

名前:桃屋
歳/性別:20代/Male
生息地:東京都(23区内)
Sponsored Link
リンク(ジャンル別50音順|■ = 相互)
【 プログラム全般 】
■ MadCap ・ SQLの窓 ・ Wordpress初心者な技術屋の忘備録
【 VB,C# 】
・ C#,VB.NET入門 ・ DOBON.NET
【 PHP 】
・ phpspot ・ Smartyマニュアル ・ 忘れっぽいエンジニアのPHPリファレンス
【 API 】
・ Google Maps API リファレンス ・ Google MAPS APIプログラミング ・ Twitter API Viewer
【 HTML&CSS 】
・ Tag index
【 JavaScript 】
・ 432 + JavaScript Libraries ・ jsdo.it
【 その他のプログラミング言語 】
・ 逆引きPython ・ 逆引きRuby
【 プログラミング関連 】
・ 正規表現メモ
【 読み物 】
・ MSDN マガジン
【 Oracle 】
・ Oracle管理者のためのSQLリファレンス ・ 忘れっぽいエンジニアのORACLEリファレンス
【 Linux,UNIX 】
・ CentOSで自宅サーバー構築 ・ Fedoraで自宅サーバー構築 ・ FTP/理化学研究所 ・ Linuxコマンド逆引き大全 ・ Linuxで自宅サーバ
【 便利サイト 】
・ Wayback Machine
【 Webツール 】
・ .htaccess Editor ・ Convert C# to VB.NET ・ Convert VB.NET to C# ・ QRコード作成 ・ テキスト変換サービス
【 開業関連 】
・ プログラマーとSEのフリーランスのススメ
【 ブログ類 】
■ ぱんだぁにゃ ■ 元携帯屋店員がブログにちょうせん! ■ 日常気まぐれブログ
【 その他 】
・ 2018年 秋アニメ 一覧 ・ 2018年 夏アニメ 一覧 ・ 2018年 春アニメ 一覧 ・ アキバイズム
-> リンク一覧 
モバイルサイト
RSS 2.0
更新情報をRSSで取得!
アクセスカウンター


現在の閲覧者数:

設置日:2008年12月05日

[Javascript-便利なスクリプト] ソースコードをハイライト表示 Syntax Highlighter


この記事は過去のものです。
ソースコードをハイライト表示 Syntax Highlighter 2.0 を参照してください。


Web上でソースコードを書くとき、ハイライトがきけば見やすくなるけど、わざわざ色指定するのが面倒だとは思いませんか?
そんな煩わしさを一発で解決してくれるのが「SyntaxHighlighter」です。

「SyntaxHighlighter」は、このサイトでソースコードを表示するために実際に使っているスクリプトです。
ダウンロードは、先のリンクから行ってください。
圧縮形式はrarになっていますので、解凍できない方はLhaplusや7-ZIPのような、RARを解凍することが可能なフリーソフトを使用すればいいでしょう。

「SyntaxHighlighter」の使い方

使い方はいたって簡単です。
ヘッダ部分でスクリプトの呼び出し、ページ表示完了時にハイライト処理を行わせるためのスクリプトを記述するだけです。
スクリプトは「shCore.js」と、言語に応じて必要な物のみ呼び出せば良いです。

対応する言語は以下の通りです(コロンの後ろに記述しているものがクラス名になります。)
・shBrushCpp.js
	C++         :cpp, c, c++
・shBrushCSharp.js
	C#          :c#, c-sharp, csharp
・shBrushCss.js
	CSS         :css
・shBrushDelphi.js
	Delphi      :delphi, pascal
・shBrushJava.js
	Java        :java
・shBrushJScript.js
	Java Script :js, jscript, javascript
・shBrushPhp.js
	PHP         :php
・shBrushPython.js
	Python      :py, python
・shBrushRuby.js
	Ruby        :rb, ruby, rails, ror
・shBrushSql.js
	Sql         :sql
・shBrushVb.js
	VB          :vb, vb.net
・shBrushXml.js
	XML/HTML    :xml, html, xhtml, xslt

物は試しです。サンプルとしてJavascritのソースコードを表示させるコードを作成してみましょう。
今回は [site_root]/js/sh/ 内にScriptやStyles等のディレクトリを設置していると仮定したソースです。
サンプルのhtmlは [site_root]/sh.html とします。

ソースコードは以下のような感じです。
<html>
<head>
	<title>SyntaxHighlighter</title>
	<link rel="stylesheet" type="text/css" href="js/sh/Styles/SyntaxHighlighter.css" />
	<script type="text/javascript" src="js/sh/Scripts/shCore.js"></script>
	<script type="text/javascript" src="js/sh/Scripts/shBrushJScript.js"></script>
	<script language="javascript">
		window.onload = function () {
			// クリップボードにテキストをコピーするためのswfファイル
			// clipboard.swfのパスを指定
			dp.SyntaxHighlighter.ClipboardSwf = 'js/sh/Scripts/clipboard.swf';
			// シンタックスハイライトを適応するタグの名前を指定
			dp.SyntaxHighlighter.HighlightAll('code');
		}
	</script>
</head>
<body>
<!--
	nameはJavascript部分のHighlightAllで指定している物と同じ名前を指定
	classは貼り付けるソースコードの言語を指定
	今回貼り付けるのはJavascriptなので、classはjsを指定します。
-->
<pre name="code" class="js">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/SyntaxHighlighter/Scripts/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</pre>
</body>
</html>

簡単に、ごちゃごちゃせずにハイライトを適応させる事ができるので、結構オススメです。
「ソースコードを綺麗に表示したい!」という方は活用してみてはいかがでしょうか?
「Javascript」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。

作成日:2008年05月25日(Sun) / 更新日:2009年08月22日(Sat)

Labs SYSTEM Ver0.93 @ Copyright(c)2007−2025 MOMOYA SYSTEM