■ 関連する記事
以下は、SyntaxHighlighter 2.0 の設定部分のソースコードを SyntaxHighlighter 2.0
で表示しています。
ツールバー部分が flash となって、Flash10 のクリップボードへコピーできなく
なった問題を回避し、設定の幅が広く使いやすくなっています。
使い始めの特徴として、前(1.5)バージョンのリソースを引き継げるように、
shLegacy.js というライブラリが用意されています。
新しいバージョンでは、全てのページを一気に適用するメソッドが一つになって
シンプルな統合が行われていますが、( HighlightAll はなくなっている )
shLegacy.js を組み込むと、HighlightAll を使う事ができます
config : {
/** Path to the copy to clipboard SWF file. */
clipboardSwf : null,
/** Width of an item in the toolbar. */
toolbarItemWidth : 16,
/** Height of an item in the toolbar. */
toolbarItemHeight : 16,
/** Blogger mode flag. */
bloggerMode : false,
/** Name of the tag that SyntaxHighlighter will automatically look for. */
tagName : 'pre',
strings : {
expandSource : 'expand source',
viewSource : 'view source',
copyToClipboard : 'copy to clipboard',
copyToClipboardConfirmation : 'The code is in your clipboard now',
print : 'print',
help : '?',
alert: 'SyntaxHighlighter\n\n',
noBrush : 'Can\'t find brush for: ',
brushNotHtmlScript : 'Brush wasn\'t configured for html-script option: ',
// this is populated by the build script
aboutDialog : 'HTMLの記述'
},
/** If true, output will show HTML produces instead. */
debug : false
},
こちらのコードは、実装のための部分ですが、フォントやサイズが日本人向けでは
なかったので、チューニングしています。幅も指定しないと 100% となり伸び縮みします。
好みで使い分ければ良いと思います。
今回、css を選択する事によってテーマを変更できるのですが、デザインに黒系が多く、
やはりどうも日本人向けではありません。ソースコードの提示はやはり shThemeDefault.css
で、幅固定のほうが美しく思えます
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shCore.js"></script>
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shLegacy.js"></script>
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="http://winofsql.jp/sh/2.0.296/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://winofsql.jp/sh/2.0.296/shThemeDefault.css"/>
<style type="text/css" >
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
font-size:12px!important;
font-family: "ＭＳ Ｐゴシック"!important;
}
.syntaxhighlighter {
width:700px!important;
padding:5px!important;
background-color:#FFFFFF!important;
border-style:solid!important;
border-color:#808080!important;
border-width:1px!important;
}
</style>
ドキュメントも充実しているので非常に良くなっていますが、IE6 でまともに表示されない
のがタマに傷です。まあ、これは Microsoft のサイトそのものにも言える事なので、
Firefox で見れば良いと思います。で、上記のソースコード内の URL がリンク化していますが、
これも新しい機能で、オプションでデフォルトで有効となっています
<pre name="code1" class="brush: js;">
ここにソースコード
</pre>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://winofsql.jp/sh/2.0.296/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
'\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';
dp.SyntaxHighlighter.HighlightAll("code1");
</script>
とりあえず今回はここまで。
次回はもう少し設定について詳しく説明したいと思います
あ、そうそう。WEB スペースを持って無い人の為に HOSTING もしています。
それも次回説明します。
|
