てぃーだブログで Syntaxhighlighter を設定する (その 2 : 設定完了)

2013年08月14日 18:52

前回の冒頭で "てぃーだブログに Syntaxhighlighter を設定します "といいながら設定の前段階までしか進みませんでした。

今回はしっかり設定まで完了します。

てぃーだブログのテンプレート編集開始

テンプレートのカスタマイズページへのアクセス方法は前回説明しましたが、要約すると以下の手順になります。

1. てぃーだブログログイン
2. "ブログの設定" -> "テンプレート" をクリック
3. "パソコンで現在設定されているテンプレート" -> "テンプレートの編集・再選択" 内の
4. "カスタマイズ" をクリック

そうすると"テンプレートのカスタマイズ" ページが表示されます。

トップページ, 個別記事, アーカイブの <head> </head> を確認

トップページ, 個別記事, アーカイブの編集はすべて同じ作業を行います。それぞれ 1 行目から以下の様に始まっていると思います。



<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8" />

  :

  .

これらは "ドキュメントのタイプは HTML です", "HTML の言語は日本語です" といった設定を宣言しています。

ここで Check するのが <head> タグです。<head> タグには必ず対になる </head> というタグがあるので探してください。<head> の下の方、<body> タグのすぐ上にあるはずです。



  :

  .

<script type="text/javascript" src="http://admin.ti-da.net/_img/official_01/js/gas.js" charset="utf-8"></script>

</head>



<body>

<div id="container">

  :

  .

てぃーだブログで Syntaxhighlighter を設定する場合は </heade> のすぐ上 に記述を追記します。

"<head> </head> の中であればどこでも構わない" というような記述もありますが、場合によってはうまく動かないこともある様です。

トップページ, 個別記事, アーカイブへ追記する設定

Syntaxhighlighter は CSS と JavaScript を利用したプログラムなので、<head> </head> の間、ここでは </head> の直上に CSS と JavaScript を外部から呼び出す記述を追記します。

</head> 直上への追記内容

これまでに確認した Syntaxhighlighter のファイルにアクセスするための URL は以下の様なものでした。URL はそれぞれの環境 (アップロード先) に合わせて適宜読み替えてください。

http://example.jp/syntax/styles/shCore.css
http://example.jp/syntax/styles/shThemeDefault.css
http://example.jp/syntax/scripts/shCore.js
http://example.jp/syntax/scripts/shBrush***.js (*** は希望するプログラミング言語の名前)

僕は主に Perl を使う予定なので、Perl のブラシを指定します。ついでに CSS と XML も加えたいと思うのでそれぞれのブラシも指定します。

ブラシの指定は shBrush***.js を以下の様に指定します。

http://example.jp/syntax/scripts/shBrushPerl.js
http://example.jp/syntax/scripts/shBrushCss.js
http://example.jp/syntax/scripts/shBrushXml.js

ブラシの種類の指定は script/ 直下の .js ファイル名がそのまま当てはまります。また、Syntaxhighlighter 本家サイトの以下のページに言語とブラシの対応表があります。

Bundled Brushes

Brush aliases を見るとわかりますが、HTML は XML に含まれる仕様です。Brush aliases は記事内でのブラシ指定に使います。

上記の例を元にすると具体的な記述は以下の様になります。



<!-- SyntaxHighlighter -->



<link href="http://example.jp/syntax/styles/shCore.css" rel='stylesheet' type='text/css' />

<script src="http://example.jp/syntax/scripts/shCore.js" type='text/javascript'></script>



<script src="http://example.jp/syntax/scripts/shBrushPerl.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushCss.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushPXml.js" type='text/javascript'></script>



<link href="http://example.jp/syntax/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />



<script type="text/javascript">

SyntaxHighlighter.config.stripBrs=true;

SyntaxHighlighter.defaults['highlight'];

SyntaxHighlighter.all();

</script>



<!-- /SyntaxHighlighter -->

ここではまず、link href と script src という記述で CSS, JavaScript のファイルをそれぞれ呼び出しています。

13 行目の SyntaxHighlighter.config.stripBrs=true; という記述はブログサービスの自動改行設定を調整してくれるオプションで、てぃーだブログ上で Syntaxhighlighter を利用するには必須の設定です。

これに加えて僕は "highlight" というオプションを設定しています。

14 行目の SyntaxHighlighter.defaults['highlight']; が該当する記述です。これは指定した行全体をハイライト表示してくれるオプションで、上手く表示出来るとちょっとテンションが上がります。そういう意味で必須の設定です。

ちなみに、上の方で </head> を探す説明をする際に、この機能を使って 23 行目をハイライト表示しています。ここら辺の機能は、記事投稿の際に本文中で指定します。記事内での指定方法は別途説明します。

各オプションは Syntaxhighlighter の本家サイトに解説があります。設定方法の具体的な解説もあります。

Configuration

15 行目の SyntaxHighlighter.all(); という記述は SyntaxHighlighter の動作に必須の記述なので必ず書いてください。

これらをトップページ, 個別記事, アーカイブそれぞれの </head> 直上に追記します。

設定を追記したテンプレートはこんな感じになります。24 行目から 41 行目が追記した行です。



<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8" />

<title><%BlogTitle%></title>

<meta name="keywords" content="<%BlogTitle%>,てぃーだスクエア,てぃーだブログ" />

<meta name="description" content="「<%BlogTitle%>」のブログトップページです。<%BlogDescription%>" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="<%RDFUrl%>" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%RSDUrl%>" />

<link rel="canonical" href="<%BlogUrl%>">

<link rel="index" href="/" />

<link rel="contents" href="<%SiteMapUrl%>" />

<link rel="stylesheet" media="all" href="style.css" />



<script src="http://admin.ti-da.net/_img/staffokn_201207/js/jquery-1.7.2.min.js"></script>

<script src="http://admin.ti-da.net/_img/staffokn_201207/js/jquery.webopixel.net.scroll.js"></script>

<script src="http://admin.ti-da.net/_img/staffokn_201207/js/offspring-1.0.js"></script>

<script src='http://a.adimg.net/javascripts/AdLantisLoader.js' type='text/javascript' charset='utf-8'></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<script type="text/javascript" src="http://admin.ti-da.net/_img/official_01/js/gas.js" charset="utf-8"></script>



<!-- SyntaxHighlighter -->



<link href="http://example.jp/syntax/styles/shCore.css" rel='stylesheet' type='text/css' />

<script src="http://example.jp/syntax/scripts/shCore.js" type='text/javascript'></script>



<script src="http://example.jp/syntax/scripts/shBrushPerl.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushCss.js" type='text/javascript'></script>

<script src="http://example.jp/syntax/scripts/shBrushPXml.js" type='text/javascript'></script>



<link href="http://example.jp/syntax/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />



<script type="text/javascript">

SyntaxHighlighter.config.stripBrs=true;

SyntaxHighlighter.defaults['highlight'];

SyntaxHighlighter.all();

</script>



<!-- /SyntaxHighlighter -->



</head>



<body>

<div id="container">

  :

  .

標準設定のコメントアウト

トップページ, 個別記事, アーカイブで上記設定が完了したら、設定に必要な作業はあとひとつだけです。

それぞれテンプレートの中から以下の記述の記述を探してください。トップページ, 個別記事, アーカイブすべてのテンプレートでだいたい 17 行目あたりにあるはずです。



  :

  .

<script src="http://admin.ti-da.net/_img/staffokn_201207/js/offspring-1.0.js"></script>

  :

  .

これを  で囲んでコメントアウトします。



  :

  .

<!--

<script src="http://admin.ti-da.net/_img/staffokn_201207/js/offspring-1.0.js"></script>

-->

  :

  .

これは offspring.js というプログラムの機能を無効化しています。offspring.js が有効だとてぃーだブログの自動改行機能で挿入される <br/> に自動的にクラスが割り当てられるそうです。

でもそうすると見えなくてよい、というか見たくない <br/> が不当に表示されてしまいます。必ずコメントアウトしましょう。