SQLの窓

2016年01月15日


SyntaxHighlighter 2.0.296 用 貼り付けコード作成

SyntaxHighlighter 2.0    ■ highlight: [n1, n2, n3], ■ SyntaxHighlighter.all();
ブラシ     確実に幅を固定   TAB幅   Font size
SyntaxHighlighter.all()を使う   単独記事で動作するようにする
ハイライト行 a-b と指定できます
※ ,と併用はできません

※ ブログ等で使用する場合は、「改行を<br/>タグに変換しない」ようにしてください。
※ その場合、通常文章は PRE を書いてその中で記述します(その際は以下のCSSで自動改行)
pre {
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}
※ 確実に幅を固定は、長さによっては固定できな場合があるので、いろいろ調整して下さい。
※ SyntaxHighlighter.all() に変更すると、どこに書いても全てが変換されます
( 但し、表示にタイムラグが生じる場合があります )
※ 単独記事で動作するようにすると、ヘッダ部に定義が必要なくなります。

★ 1.5 からの使い方を使用しています( 直後に書くのでタイムラグがあまりありません ) 一つの記事内に複数設置する場合は、HighlightAll の呼び出しは一度で動作します。 但しその場合は、複数設置された pre の name 属性を一致させて、それをHighlightAll で呼び出すようにして下さい。
posted by at 22:09 | SyntaxHighlighter | このブログの読者になる | 更新情報をチェックする


2013年11月09日


SyntaxHighlighterのHosting

2.0.296 を使用する理由は、
1) 元のソースコードの改行がそのまま表示反映される。
2) 横に長いコードを折り返し表示してくれる
3) クリップボードにコピーする機能が正しく使える

からです。
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>

※ 他にも用意されています
http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/
記事側では以下のように記述して下さい (SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます) ※ 表示幅をコントロールしたい場合は、DIV で囲んで、その幅をスタイルで指定します
<div style='width:600px;'>
<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>
</div>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>

また、見栄えを変更したい場合は以下のようなスタイルを追加します
( opacity を設定すると、ツールバーが透過してソースコードが隠れても読めます )
<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;
}
.syntaxhighlighter .toolbar {
	opacity:0.5;
}
</style>

ダウンロードおよび利用方法が書かれたサイト(英文)



posted by at 15:32 | SyntaxHighlighter | このブログの読者になる | 更新情報をチェックする


2009年04月27日


SyntaxHighlighter 2.0

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

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

それでも、class 内で指定する 新しいプロパティ設定は可能です。デフォルトでは url 変換が有効になっていますので、少しでもストレス無く表示させるには、ヘッド部で無効にしておくといいと思います。
/**
 * SyntaxHighlighter
 * <a href="http://alexgorbatchev.com/" target="_blank">http://alexgorbatchev.com/</a>
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate" target="_blank">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate</a>
 *
 * @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 <<a href="http://www.gnu.org/licenses/>." target="_blank">http://www.gnu.org/licenses/>.</a>
 */
SyntaxHighlighter.brushes.Plain = function()
{
};

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

関連する記事 

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


posted by at 01:45 | SyntaxHighlighter | このブログの読者になる | 更新情報をチェックする