SyntaxHighlighter | SyntaxHighlighter基本 | 公開サーバーにアップロードされたJavaScript、CSSファイル(CDN)

Tags:

SyntaxHighlighterの公式サイトが提供する公開サーバーにアップロードされたJavaScriptファイルやCSSファイルを読み込んで使用する方法について説明する。無料ブログサービスなどを利用していて、必要なファイルをサーバーにアップロードできない場合に使用できる。

公開サーバーにアップロードされたJavaScriptファイルやCSSファイルの使用手順

バージョンごとに必要なファイルがアップロードされている。次はバージョンごとの一覧である。最新バージョンを適用したい場合は"current"を使用する。

http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/

たとえば、“current"に含まれるJavaScriptファイルやCSSファイルは次のように指定する。JavaScriptファイルは"scripts"ディレクトリにあり、CSSファイルは"styles"ディレクトリに入っている。

http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css

このファイルをHTMLページで読み込むには、次のように記述する。

<html>
<head>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css" type="text/css" />
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>
</head>
<body>
...
<body>
</html>

このようにアップロード済みのファイルを使用することで、ファイルをサーバーにアップロードできない環境でもSyntaxHighlighterを利用できる。

CDNを利用して読み込む方法

公開サーバーにアップロードされたファイルを利用する方法のほかに、CDNを利用する方法もある。

CDN(Content Delivery Network)とは、Webサイトの閲覧者がサーバーからコンテンツをダウンロードする必要があるとき、自動的に最も近いサーバーからダウンロードするようにする技術である。この技術を利用すると、特定のサーバーにトラフィックが集中せず、コンテンツ転送時間が非常に速くなるという利点がある。

CDNを利用すると、SyntaxHighlighterファイルをサーバーへ別途アップロードしなくてもSyntaxHighlighterを使用できる。現在利用できるSyntaxHighlighter 3.0.84バージョンのCDNは次のとおりである。

CDNJS

https://cdnjs.com/libraries/SyntaxHighlighter

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

それでは次のページで、実際の使い方について説明する。

参考

https://alexgorbatchev.com/SyntaxHighlighter/hosting.html