■ 関連する記事
以下は、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: "MS Pゴシック"!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 もしています。 それも次回説明します。 |