PR PR

Syntax Highlighter2.1.364(最新版)を簡単に導入する方法

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年4月10日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

これまでBloggerブログにて、

スポンサーリンク

スポンサーリンク

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ブログなど多くの他社ブログなどで記載されていた
利用方法の以下とは異なりますので、注意です。

【これまでの利用方法1】


<pre class="code">
<code class="html">
//classにはコードの種類
//boc-collapseを追加すると、閉じた状態にしておけます。
ここにコードを記述する
</code>
</pre>

【これまでの利用方法2】

<pre name="code" class="java">
『ここにコード記述』
< /pre>

 

【これからの利用方法】

<pre class="brush: script-type">
script-typeにjsとかjavaと指定して、ここにソースコードをHTMLエスケープして貼り付ける
</pre>

となります。

Google Codeに予めホストされたものを利用していますが、
元ファイルは『こちら』にあります。

実際に利用する場合は、
HTMLタグをそのまま入力して表示することができないので、
変換ツールを利用すると便利です。

こちら→HTMLタグ変換ツール

クリボウさんにて作成もされていました。
コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
  (サイトの一番下部に変換ツールがあります。)

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

コメント

  1. nice

  2. nice blog.

スポンサーリンク
タイトルとURLをコピーしました