Syntax Highlighterの導入に苦労されている方は、
多かったのではないでしょうか？beautifulofcodeの導入も同様に苦労されている方は、
多かったと思います。私自身も、その一人でした。
ですが、
上記してあるように
Syntaxhighlight簡単に導入する方法を以下に記載します。
これまで、
使用したかったのにできなかった方、
これから導入しようと考えている方など、
参考にして頂けると嬉しいです。
＊利用方法に関してですが、
これまで、Bloggerブログなどに多く記載されていた
利用方法とは若干異なりますので注意して下さい。
以下ソースを
<head>～</head>内に記載するだけでOKです。
<!-- Syntax Highlighter --> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
3行目のThemeCSSですが、
以下よりいくつか選べます。
→SyntaxHighlighter - Themes
そして、
コードの貼り方ですが、
上記の通りこれまでの貼り方（利用方法）とは若干異なります。
以前まで良くBloggerブログなど多くの他社ブログなどで記載されていた
利用方法の以下とは異なりますので、注意です。
【これまでの利用方法１】
【これまでの利用方法２】<pre class="code"> <code class="html"> //classにはコードの種類 //boc-collapseを追加すると、閉じた状態にしておけます。 ここにコードを記述する </code> </pre>
<pre name="code" class="java">
『ここにコード記述』
< /pre>
【これからの利用方法】
<pre class="brush: script-type"> script-typeにjsとかjavaと指定して、ここにソースコードをHTMLエスケープして貼り付ける </pre>
となります。
Google Codeに予めホストされたものを利用していますが、
元ファイルは『こちら』にあります。
実際に利用する場合は、
HTMLタグをそのまま入力して表示することができないので、
変換ツールを利用すると便利です。
こちら→HTMLタグ変換ツール
クリボウさんにて作成もされていました。
→コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
（サイトの一番下部に変換ツールがあります。）
0 件のコメント:
コメントを投稿