HOME>スポンサー広告

スポンサーサイト

Toolog.net
こちらのブログに移転しました。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
HOME>【Webマスター向け】

FC2ブログにSyntax Highlighterを導入してみた

Toolog.net
こちらのブログに移転しました。 090317tips-thumb2_580x270.png

「Syntax Highlighter」を使えば、上の画像のように、HTMLやCSSのソースコードハイライトしてを見やすく表示してくれるよ。 それだけでなく、閲覧者が簡単にソースコードのコピーや印刷を出来るようになるから、コードを載せているサイトはユーザーのためにも導入するべき。

Syntax Highlighter ユーザー側としての使い方

WS000190.jpg
右上に表示される3つのボタンで操作するよ。
左から、[ソースの表示]、[ソースのコピー]、[印刷]、[ヘルプ]となっているよ。
ユーザーとしての使い方はこれくらいかな。

Syntax Highlighter FC2ブログに導入

以下のサイトからSyntax Highlighterをダウンロード。
SyntaxHighlighter:Download - Alex Gorbatchev
ダウンロードして解凍すると、以下のようなフォルダが出来るよ。
WS000191.jpg
上のフォルダのうち、「scripts」「styles」のフォルダの中身をアップロードしよう。
フォルダ自体ではなく、中にあるjsファイルやcssファイルをすべてアップロードしてね。

Syntax Highlighterの使い方

まず、HTMLのヘッダー部分(</head>の直前でOK)に次のような記述を追加して、Syntax HighlighterのJavaScriptとスタイルシートを組み込んでね。

<script type="text/javascript" src="http://インストール先/shCore.js"></script>
<script type="text/javascript" src="http://インストール先/shBrushXml.js"></script>
<script type="text/javascript" src="http://インストール先/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="http://インストール先/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://インストール先/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://インストール先/clipboard.swf';
SyntaxHighlighter.all();
</script>

インストール先には自分のFC2のアップロードフォルダの絶対パスを記入。
たとえば私の場合は http://blog-imgs-18.fc2.com/c/o/o/cooltoolz/
これはアップロードした画像のURLから調べることが出来るよ。

HTML、CSS以外のコード(PHPなど)もSyntax Highlighterで表示したい人は
<script type="text/javascript" src="http://インストール先/言語別JavaScript.js"></script>
の記述を追加すればOK。 言語別Javascriptについては以下のとおりに記述。

言語 JavaScript
HTML/XHTML/XML shBrushXml.js
CSS shBrushCss.js
JavaScript shBrushJScript.js
PHP shBrushPhp.js
Perl shBrushPerl.js
Ruby shBrushRuby.js

次にHTMLの中で、“ソースコードを表示したい部分”を、以下のようにpre要素で囲んでね。

<pre class="brush: 言語名">
ソースコード
</pre>

言語名については以下のように記述。

言語 「brush:」に指定する言語名
HTML/XHTML/XML html
CSS css
JavaScript js
PHP php
Perl perl
Ruby ruby

使い方は以上です。あとはいろいろとカスタマイズするのもよし、そのまま使うのもよし。使った感じでは、フラッシュを使っているから多少表示に時間がかかるのが気になるかな。
でもかなり便利だから、導入して損は無いと思うよ。というか、HTMLやCSSについて説明しているサイトなら導入は必須。

参照サイト
技術系サイトに必需品! ソースコードは鮮やかに

この記事のトラックバックURL

http://cooltoolz.blog5.fc2.com/tb.php/156-7c20a432

コメント

コメントする

管理者にだけ表示を許可する

Copyright ©CoolToolz All Rights Reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。