Syntax Highlighter（最新版）を簡単に導入する方法2

2013年4月12日金曜日

Syntax Highlighter（最新版）を簡単に導入する方法2

Syntax Highlighter（最新版）を簡単に導入する方法

以前Syntax Highlighterを簡単に導入する方法として、
以下記事を紹介しましたが、

→Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

さらに簡単に、
しかも最新版3.0.189が
本当にとても簡単に導入する方法がありました。

Syntaxhighlighterジェネレーター選択画面

ジェネレーターののようですが、
以下URLにて言語選択StyleCSSの選択のみで、
タグが発行されます。

そのタグを、
<head>～</head>内に挿入するだけでOKです。

わかりやすくジェネレーターへの直リンクを掲載します。

→Syntax Highlighter Scripts Generator

本当にとても簡単に導入可能です。

Syntaxhighlighterジェネレーター選択画面

例えば、
必要なBrushesをチェックし、
StyleCSSを「Django」を選択してコード作成してみると。
以下コードが即座に発行されます。

<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/shThemeDjango.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

とても簡単です。
導入に困難されている方は、
是非お試し下さい。

＊ちなみに、上記コードをコピペでも大丈夫です。