top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_793

Syntax Highlighter:ブログで使えるソースコードの強調表示。ちょっと使ってみようかな ・・・ 【ソースコード】

 2009-03-19
 一応この「創るmetaboy」は
 単に情報の紹介だけでなく、自分で試したり
 学んでゆく課程をソースオープンにして
 進めています。

 つたなく幼いソースですが、学びはじめの方などに
 役立つこともあるでしょう。
 まぁ、ほぼ自身の記録として残しているわけですが・・・

 そのソースコード表示
 今利用しているのは
 単純な「CSS」による設定。

 それなりに気に入っているのですが。
 ちょっと欲を出して、他のブログでも
 よく利用されている
 「構文を強調表示するもの

  今回は、
  ・Syntax Highlighter

 を試してみようか・・・と。

  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more 今回試す「Syntax Highlighter」のサイトへ、Go!

SyntaxHighlighter - Alex Gorbatchev
SyntaxHighlighter - Alex Gorbatchev 全然関係ないのだけど
 このサイトちょっと ?
 センターあわせで作られてるようだけど
 ウインドウの幅が小さくなると
 左のコンテンツにアクセス
 できなくなるよ。大丈夫?

 ・・・偉そうに

 さて、それはともかく、

 ■ダウンロード
  ※このソフトは、ドネイションウェア。
   ライセンスは、 LGPL 3 だ。
  ・とてもたくさんのファイル郡だ。
   これを全部使うわけではないのだろうが、

  サイトに用意されている
  「デモ」ページを参考に、試してみる。

 ■3つのフォルダ(scripts / src / styles)のうち
  ・scripts
  ・styles
  をサイト上に配置(アップロード)


******
実践
******
 ※下記、すでに、「Syntax Highlighter」で表示させている

 [追記] あまりに重い ので、このブログでは、やめ!
    実装例は、Syntax Highlighter:JavaScript 利用テストで。


 ■HTMLファイルのヘッダー部分に
  ・JSファイルの 基本的なものを組み込む
<script type="text/javascript" src="*****/shCore.js"></script>
<script type="text/javascript" src="*****/shBrushCss.js"></script>
<script type="text/javascript" src="*****/shBrushJScript.js"></script>
<script type="text/javascript" src="*****/shBrushPhp.js"></script>
<script type="text/javascript" src="*****/shBrushRuby.js"></script>
<script type="text/javascript" src="*****/shLegacy.js"></script>
<script type="text/javascript" src="*****/shBrushXml.js"></script>

   ・コアファイル と 言語別ファイル

 ■HTMLファイルのヘッダー部分に
  ・CSSファイルの 基本的なものを組み込む
<link type="text/css" rel="stylesheet" href="*****/shCore.css"/>
<link type="text/css" rel="stylesheet" href="*****/shThemeDefault.css"/>

   ・コアファイル と デフォルトテーマ
    テーマを変更して見せ方を変える「スキン方式」だ。


 ■HTMLファイルのヘッダー部分、続けて
<script type="text/javascript">
<!-- Hide from other Browsers
SyntaxHighlighter.config.clipboardSwf = '*****/clipboard.swf';
SyntaxHighlighter.all();
//-->
</script>

   ・コアファイル と デフォルトテーマ
    テーマを変更して見せ方を変える「スキン方式」だ。

 あとは
 ■ソースコード見せるところで、
  言語別に指定するだけだ。
<pre class="brush:php">
</pre>


 簡単!

 こちらに、PHPで比較したものを用意しておいた。


 # ----------------------------------------
 【PHPソースで試してみたよ】
  ●Syntax Highlighter:JavaScript 利用テスト

 ん~ん。 いいんだけど、
 ちょっと、「重い」かなぁ・・・
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/793-4725a33d
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。