「Syntax Highlighter Scripts Generator」をBloggerに導入
「Syntax Highlighter Scripts Generator」はGoogle Bloggerにソースコードのきれいに表示してくれる機能を追加できるウィジェットを生成してくれます。導入の手順は他のWidgetsと変わりません。- テーマ・言語を選択 WAY2BLOGGINGサイトのSyntax Highlighter Scripts Generatorページにアクセスします。スクリプト作成設定用に表示テーマとソースコードでハイライト表示させたい言語（複数選択可）を選び、Generateボタンをクリックします。
- Default
- RDark
- Midnight
- MDUltra
- Fade To Grey
- Emacs
- Eclipse
- Django
- 生成されたスクリプトをコピー Generateボタンをクリックすると、スクリプト表示ページ遷移します。生成されたスクリプトを直接コピーするか、Copy To ClipBoardボタンでクリップボードにコピーします。
- BloggerのHTMLにスクリプトを挿入 Bloggerの「テンプレート」→「HTMLの編集」でHTMLのソースを表示します。 <head>から </head>の間にコピーしたスクリプトを挿入します。ここでは </head>の前に入れました。
- 「？」マークを外す BloggerのHTML編集画面で挿入したプログラムの下の方に1行プログラムを挿入しましょう。挿入した最後の行</script>の2行前、下のプログラムの15行目に1行プログラム[SyntaxHighlighter.defaults['toolbar'] = false;]を追加しました。この行を挿入することで「？」マークを非表示にすることができます。
●テーマの選択（サンプル）
テーマの見本はこちらのサイトで確認できます。
生成されたスクリプトをBloggerのHTMLにそのまま移植して「テンプレートを保存」ボタンをクリックすれば、設定終了です。ただ、このままだとソースコードを表示したときに右上に「？」マークが表示されます。「？」マークをクリックすると「SyntaxHighlighter」のバージョン情報など書かれた画面が別ウインドウで表示されます。少し登録したソースコードに書き加えるだけで、「？」マークは外すことができます。
●ソースコード表示画面の右上にある「？」マーク
●「？」マークをクリックすると「SyntaxHighlighterについて」を表示
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script>
0 件のコメント :
コメントを投稿