Syntaxhighlighter
てぃーだブログで Syntaxhighlighter を設定する (その 2 : 設定完了)
てぃーだブログのテンプレート編集開始
テンプレートのカスタマイズページへのアクセス方法は前回説明しましたが、要約すると以下の手順になります。
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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
トップページ, 個別記事, アーカイブ の編集はすべて同じ作業を行います。それぞれ 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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
これまでに確認した 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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
トップページ, 個別記事, アーカイブで上記設定が完了したら、設定に必要な作業はあとひとつだけです。
それぞれテンプレートの中から以下の記述の記述を探してください。トップページ, 個別記事, アーカイブすべてのテンプレートでだいたい 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/> が不当に表示されてしまいます。必ずコメントアウトしましょう。
Syntaxhighlighter 設定完了
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
"てぃーだブログで Syntaxhighlighter を使うための設定" は以上です。
次回は投稿記事編集時の記述方法を説明します。
Syntaxhighlighter の記事
Syntaxhighlighter のオプション設定 (からの done)
てぃーだブログの記事投稿で Syntaxhighlighter を設定する
てぃーだブログで Syntaxhighlighter を設定する (その 1)
てぃーだブログで Syntaxhighlighter を使うためにファイルをダウンロードする
てぃーだブログで Syntaxhighlighter を使う前に
てぃーだブログで Syntaxhighlighter ...
てぃーだブログの記事投稿で Syntaxhighlighter を設定する
てぃーだブログで Syntaxhighlighter を設定する (その 1)
てぃーだブログで Syntaxhighlighter を使うためにファイルをダウンロードする
てぃーだブログで Syntaxhighlighter を使う前に
てぃーだブログで Syntaxhighlighter ...
