2009年04月27日

SyntaxHighlighter 2.0

SyntaxHighlighter 2.0
2.0 では、SyntaxHighlighter.all(); をヘッド部に書くだけで、
全ての対象部分を変換してくれますが、ページ全てがロードされないと
実行されないので正しい表示変換までタイムラグが生じます。

ですから、1.5 互換処理用の shLegacy.js を使用しておいて、
ソースコードの直後に dp.SyntaxHighlighter.HighlightAll を実行
すると時間差無く変換されます。( name 属性が必要です )

それでも、class 内で指定する 新しいプロパティ設定は可能です。
デフォルトでは url 変換が有効になっていますので、少しでもストレス無く
表示させるには、ヘッド部で無効にしておくといいと思います。
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
 *
 * @version
 * 2.0.296 (March 01 2009)
 * 
 * @copyright
 * Copyright (C) 2004-2009 Alex Gorbatchev.
 *
 * @license
 * This file is part of SyntaxHighlighter.
 * 
 * SyntaxHighlighter is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * SyntaxHighlighter is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with SyntaxHighlighter.  If not, see <http://www.gnu.org/licenses/>.
 */
SyntaxHighlighter.brushes.Plain = function()
{
};

SyntaxHighlighter.brushes.Plain.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Plain.aliases = ['text', 'plain'];


■ 関連する記事
SyntaxHighlighter 2.0 のすすめ
SyntaxHighlighterのHosting
SyntaxHighlighter2.0用 貼り付けコード作成
posted by night wálker at 01:45| SyntaxHighlighter

2009年04月29日

SyntaxHighlighterのHosting

SyntaxHighlighter 2.0
SyntaxHighlighterの2.0では、ライブラリを置く自分の WEB スペースの
無い人の為に Hosting してくれていますので、慣れるまではまず
以下のコードをヘッダ部分か、記事前でページで一度だけ表示される場所に
記述するといいと思います。(動作確認後、ゆっくり入れ替えれば良いです)

必要なライブラリは選択する必要がありますが、使用するものは全て
記述しておきます。いろいろやってみましたが、それが最も良い方法
であると思っています。
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"
></script>
<script
	type="text/javascript"
	src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"
></script>
<link
	type="text/css"
	rel="stylesheet"
	href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link
	type="text/css"
	rel="stylesheet"
	href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css"/>
<script
	type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
 '\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';
SyntaxHighlighter.defaults['auto-links'] = false;
</script>
記事側では以下のように記述して下さい
(SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます)
<pre name="code0904292021" class="brush:js">
&lt;SCRIPT type=&quot;text/javascript&quot;&gt;

function test() {
	alert("ok");
}

&lt;/SCRIPT&gt;


&lt;INPUT
	type=&quot;button&quot;
	value=&quot;test&quot;
	onClick='test();'
&gt;
</pre>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>
また、見栄えを変更したい場合は以下のようなスタイルを追加します
<style type="text/css">
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
	font-size:12px!important;
	font-family: "MS Pゴシック"!important;
}
.syntaxhighlighter {
	padding:5px!important;
	background-color:#FFFFFF!important; 
	border-style:solid!important;
	border-color:#808080!important;
	border-width:1px!important;
}
</style>


ダウンロードおよび利用方法が書かれたサイト(英文)
※ IE6.0 で正しく表示されません。
posted by night wálker at 19:29| SyntaxHighlighter

2009年05月04日

SyntaxHighlighter2.0用 貼り付けコード作成

SyntaxHighlighter 2.0    ■ highlight: [n1, n2, n3], ■ SyntaxHighlighter.all();
ブラシ     確実に幅を固定   TAB幅
ハイライト行 a-b と指定できます
※ ,と併用はできません
SyntaxHighlighter.all()を使う   単独記事で動作するようにする   ドメイン
※ ブログ等で使用する場合は、「改行を<br/>タグに変換しない」ようにしてください。
※ その場合、通常文章は PRE を書いてその中で記述します
※ 確実に幅を固定は、長さによっては固定できな場合があるので、いろいろ調整して下さい。
※ SyntaxHighlighter.all() に変更すると、どこに書いても全てが変換されます
( 但し、表示にタイムラグが生じる場合があります )
※ 単独記事で動作するようにすると、SyntaxHighlighter.all() を使います
このチェックボックスで、本来ヘッダ部に定義するような内容も全て付加し、
単独の記事でも動作するようにします

★ 1.5 からの使い方( 直後に書くのでタイムラグがありません ) 一つの記事内に複数の SyntaxHighlighter を設置する場合は、 HighlightAll の呼び出しは一度で動作します。但しその場合は、 複数設置された pre の name 属性を一致させて、それをHighlightAll で呼び出すようにして下さい。 1.5からの記述方法で移行する場合の書き方 ( IE6 では表示できません ) ■ SyntaxHighlighterのHosting
posted by night wálker at 13:31| SyntaxHighlighter

2009年06月06日

shLegacy.jsでOperaのタブが反映されない

SyntaxHighlighter 2.0

dp.SyntaxHighlighter.HighlightAll を使って、少しでも早く
コードの変換しようとしている場合、Opera ではタブが無視されるようです。

そこで、shLegacy.js を変更して、Opera の時だけ SyntaxHighlighter.all() を
使用するようにしました。

複数回呼ばれる事になりますが、特に問題は出ていません

それと、その場合でも brush:タイプ という新しい書き方でないと
反映されないので注意して下さい。
HighlightAll: function(
					name, 
					showGutter /* optional */, 
					showControls /* optional */, 
					collapseAll /* optional */, 
					firstLine /* optional */, 
					showColumns /* optional */
					)
{
	function findValue()
	{
		var a = arguments;
		
		for (var i = 0; i < a.length; i++) 
		{
			if (a[i] === null) 
				continue;
			
			if (typeof(a[i]) == 'string' && a[i] != '') 
				return a[i] + '';
			
			if (typeof(a[i]) == 'object' && a[i].value != '') 
				return a[i].value + '';
		}
		
		return null;
	};

	function findTagsByName(list, name, tagName)
	{
		var tags = document.getElementsByTagName(tagName);
		
		for (var i = 0; i < tags.length; i++) 
			if (tags[i].getAttribute('name') == name) 
				list.push(tags[i]);
	}

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("opera") > -1) {
		SyntaxHighlighter.all();
		return;
	}

	var elements = [],
		highlighter = null,
		registered = {},
		propertyName = 'innerHTML'
		;
	
	// for some reason IE doesn't find <pre/> by name, however it does see them just fine by tag name... 
	findTagsByName(elements, name, 'pre');
	findTagsByName(elements, name, 'textarea');

	if (elements.length === 0)
		return;
	
	for (var i = 0; i < elements.length; i++)
	{
		var element = elements[i],
			params = findValue(
				element.attributes['class'], element.className, 
				element.attributes['language'], element.language
				),
			language = ''
			;
		
		if (params === null) 
			continue;

		params = dp.SyntaxHighlighter.parseParams(
			params,
			showGutter, 
			showControls, 
			collapseAll, 
			firstLine, 
			showColumns
			);

		SyntaxHighlighter.highlight(params, element);
	}
}

posted by night wálker at 19:59| SyntaxHighlighter

ツールバーのviewSourceで追加機能実装

SyntaxHighlighter 2.0

SyntaxHighlighter 2.0 の改造です。

最も改造しやすい場所は、shCore.js の、viewSource : function(highlighter) です。
元々殆ど機能が無く、JavaScript を知る人であればかなりの
拡張ができるようになっています。ただ、ソース側の情報を
ここで知る必要があるので、以下のようにします
<pre name="code0001" class="brush: cpp; download: lighbox; ext: lzh">

class には、自由にパラメータを追加できる仕様になっていますので、
上記のように設定するだけで、params は以下のようになります。
auto-links true
brush "cpp"
class-name ""
collapse "false"
download "lighbox"
ext "lzh"
first-line "1"
font-size undefined
gutter "true"
highlight undefined
light false
ruler "false"
smart-tabs true
tab-size 4
toolbar "true"
params は、viewSource 内で以下のようにして参照できます。

highlighter.params.download
highlighter.params.ext
posted by night wálker at 23:38| SyntaxHighlighter
JavaScript ベーシック
SyntaxHighlighter
クロスブラウジング
その他
Highslide JS
思いの他綺麗に撮れた花
ブログを彩るには、JavaScript が必ず必要です。
特に、Google の存在は大きく、Google MAP をはじめとする
いろいろな先進の技術を簡単に利用できます。
結構知られていないものもあり、少し JavaScript を勉強すれば使えるようになって
自分のブログにいろいろな花を添える事ができるようになると思います。
※ この花は Highslide JS と言って Google とは関係ありません。



Admin