ホスティングとAutoloaderでソースコードを綺麗に見せるSyntaxhighlighterをコピペで簡単設置

【この記事を読むのに必要な時間は約 12 分です。】

ソースコードを綺麗に表示してくれるものといえば、なんといってもSyntaxhighlighterというJqueryプラグインが一番有名である。数多くのブログやサイトで利用されている。当ブログでもWordPress用の「WP-Syntaxhighlighter」というプラグインを長年利用している。
過去記事、Tumblrのカスタマイズ コードをハイライトさせるgoogle-code-prettifyを設置してみたで最近はSyntaxhighlighterに押されて利用が少なくなっているgoogle-code-prettifyを簡単に設置する方法を紹介した。

今回は、ホスティングとAutoloaderを利用してSyntaxhighlighterをコピペだけで、ライブドアブログやTumblrなどのブログやサイトにコピペだけで簡単設置する方法を紹介したい。

ホスティングの利用

Syntaxhighlighterの作者はユーザーのために、ホスティングを利用できるようにしてくれている。今回は、このホスティングを利用して、ファイルは一切ダウンロードせずに、設置してみる。
なお、毎月ホスティングコストとして$40かかっているようなので、是非、寄付をしよう。

Syntaxhighlighterの設置

jquery本体の設置

既にJquery本体を利用している場合は必要ないが、まだ利用していなければヘッダー部分(<head>~</head>の間)に以下のように設置する。

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->

Syntaxhighlighterの設置に必要なファイルについて

Sytaxhighlighter必須ファイル

Syntaxhighlighterの必須ファイルは、以下の2つのみ。
shCore.js shCoreDefault.css

Autoloaderファイル

Autoloaderファイルを利用することにより、ソースコード別のjsファイルを全部書き出す必要がなくなる。
shAutoloader.js

装飾用テーマファイル

装飾用テーマファイルとしてSyntaxhighlighterはいくつかcssファイルを用意している。これについては、自分の好みのものをひとつ選んで記載して欲しい。今回はデフォルトの装飾用テーマファイルを利用する。
shThemeDefault.css

装飾用テーマファイルは全部で16種類用意されているので、自分で試して欲しい。

SyntaxhighlighterとAutoloaderの設置

必要ファイルが確認できたところで、設置する。必要ファイルを</body>タグの下(</body>と</html>の間)に以下のように記載する。

<!-- syntaxhighlighter -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.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/shAutoloader.js" type="text/javascript"></script>
<!-- /syntaxhighlighter -->

<!-- syntaxhighlighter autoloader and setting -->
<script type="text/javascript">
function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.all();
SyntaxHighlighter.defaults['toolbar'] = false;
</script>
<!-- /syntaxhighlighter autoloader and setting -->

SyntaxHighlighter.defaults[‘toolbar’] = false;はツールバーの「?」を表示させないようにするため。<pre>タグのスタイルでも指定できる。

スタイルの微調整

スタイルを若干以下のように微調整した。上記に続けて</body>タグの下(</body>と</html>の間)に以下のように記載する。

<!-- syntaxhighlighter custom css -->
<style>
.syntaxhighlighter {
    border:solid 1px #EEE !important; /*枠線を表示するように*/
    overflow-y: hidden !important;  /*縦スクロールバーが表示されないように*/
}
.syntaxhighlighter table {
    margin-top: 1em !important;  /*IEで一番下の行が表示されない場合に変更したのでバランスで上にも空白を*/
    margin-bottom: 1em !important;  /*IEで一番下の行が表示されない場合に*/
}
.syntaxhighlighter .line.alt2 {
    background-color: #F8F8F8 !important;
}
</style>
<!-- /syntaxhighlighter custom css -->

Syntaxhighlighterの利用方法

<pre>タグで囲む

これで準備は整った。使い方はとても簡単で以下のように<pre>タグで囲んでやればよい。

<pre class="brush: css; gutter: true; first-line: 1; highlight: []; html-script: false">
<!-- syntaxhighlighter custom css -->
<style>
.syntaxhighlighter {
    border:solid 1px #EEE !important; /*枠線を表示するように*/
    overflow-y: hidden !important;  /*縦スクロールバーが表示されないように*/
}
.syntaxhighlighter table {
    margin-top: 1em !important;  /*IEで一番下の行が表示されない場合に変更したのでバランスで上にも空白を*/
    margin-bottom: 1em !important;  /*IEで一番下の行が表示されない場合に*/
}
.syntaxhighlighter .line.alt2 {
    background-color: #F8F8F8 !important;
}
</style>
<!-- /syntaxhighlighter custom css -->
</pre>

<pre>タグでよく使う指定

以下のように<pre>タグでよく使う指定をあらかじめ登録しておくと便利だ。

<pre class="brush:html">  <!--HTMLソースを表示する-->
<pre class="brush:css">   <!--CSSソースを表示する-->
<pre class="brush:js">    <!--JavaScriptソースを表示する-->
<pre class="brush:html highlight:[2,4]">  <!--特定行をハイライト-->
<pre class="brush:js html-script:true">   <!--他言語とHTML-->
<pre class="brush:html first-line:25">    <!--開始行番号の変更-->
<pre class="brush:html toolbar:false">    <!--ツールバー非表示-->
<pre class="brush:html auto-links:false">  <!--オートリンク解除-->
<pre class="brush:html" title="タイトル">  <!--タイトル表示-->

Syntaxhighlighterの設置やテーマのカスタマイズ参考サイト

設置については、今回ホスティングとAutoloaderを利用したが、自分のサーバーにアップロードして使いたい場合や、テーマを自分の好みにカスタマイズしたい場合に非常に役立つサイトをふたつほど紹介する。
ほんっとにはじめての HTML5さんの(ちょっとメモ)SyntaxHighlighter 3.0.83 の使い方
ezorisu-webさんのSyntaxHighlighter Evolved を使ってみる
がとても参考になる。

Tumblrに設置してみると

こんな感じ。ライブドアブログでも簡単に設置できるので是非試して欲しい。

なお、Tumblrに設置して実際に表示させているものは、ソースコード用のjsファイルを3つに限定してホスティングとAutoloaderを利用して設置している。こちらの記事TumblrにホスティングとAutoloaderの利用でソースコードを綺麗に表示するSyntaxhighlighterを簡単設置も参考にしてほしい。

jump up tumblr

コピペだけでSyntaxhighlighterが利用できる幸せを味わおう。
以上

Related Posts Plugin for WordPress, Blogger...