【カテゴリ:パソコン ブログカスタマイズの記録】
自分はこのブログで『SyntaxHighlighter』を使う事はほとんど無いような気がするのですが、今後のためにと思い、とりあえず導入しました。そこで、せっかくなので今回この『Seesaa』ブログに『SyntaxHighlighter 3.0.83』を導入した際の手順を覚え書きとして書いておくことにしました。
以下、自分がおこなった際の手順です。
1.『SyntaxHighlighter 3.0.83』のダウンロード
以下のページにて『Click here to download』のリンクをクリックしてダウンロードします。
SyntaxHighlighter - Download:
http://alexgorbatchev.com/SyntaxHighlighter/download/

スポンサーリンク

とりあえず、自分は必要最低限として以下の4つのファイルを取り出し、別のフォルダにコピーして保存しました。
『scripts』フォルダの中の『shCore.js』と『shBrushPlain.js』

『styles』フォルダの中の『shCore.css』と『shThemeDefault.css』

2.『Seesaa』ブログへのアップロード
前記4個のファイルを『seesaa ブログ』へアップロードします。
(1)『ブログの管理メニュー』⇒『ファイルマネージャ』からアップロードします。
自分はアップロード先のディレクトリとして『syntaxhl』を追加し、このディレクトリに4個のファイルをアップロードしました。

アップロードしたファイルのURLは、以下のような形となりました。
https://kingpcfx.up.seesaa.net/syntaxhl/shCore.css
https://kingpcfx.up.seesaa.net/syntaxhl/shThemeDefault.css
https://kingpcfx.up.seesaa.net/syntaxhl/shCore.js
https://kingpcfx.up.seesaa.net/syntaxhl/shBrushPlain.js
注意:アップロード先のディレクトリ『syntaxhl』は自分がつけた任意の名前です。あくまでも例です。
3.『HTML』への追加/変更
(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『HTML』をクリックします。

(2)以下のような画面が表示されるので、編集対象となる『HTML名』をクリックします。

今使っているHTMLを直接変更してもよいのですが、自分の場合は、右上の『HTMLの追加』をクリックして新たな HTML を新規に追加し、その追加した HTML には、それまで使用していた HTML から内容をまるごとコピーしました。
ミスをしてトラブルが発生した場合に、簡単に元の状態に戻せるようにするためです。
新たに追加した HTML には、『SyntaxHighlighter 追加』という名前をつけました。
『HTML名』をクリックすると、以下のような編集画面が表示されます。

(3)『</head>』の行の直前に、以下を貼り付けます。
<!--SyntaxHighlighter-->
<link href="https://kingpcfx.up.seesaa.net/syntaxhl/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://kingpcfx.up.seesaa.net/syntaxhl/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="https://kingpcfx.up.seesaa.net/syntaxhl/shCore.js" type="text/javascript"></script>
<script src="https://kingpcfx.up.seesaa.net/syntaxhl/shBrushPlain.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.config.tagName = "syntaxhl";
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
<!--/SyntaxHighlighter-->
【赤字の箇所について補足】
・URLは、アップロードしたファイルのURLです。
・標準では『SyntaxHighlighter』を使用する際のタグ名は『pre』ですが、自分は専用のタグ名として『syntaxhl』を使うことにしたため、『tagName = "syntaxhl"』としています。
・『bloggerMode = true』にしているのは、『Seesaa』ブログの『改行HTMLタグ変換』の設定をデフォルトの『改行は<br/>タグに変換する』にしているためです。

(4)『保存』ボタンをクリックして保存します。


↑『保存』ボタンをクリック後、『設定を完了しました。』と表示されます。
(5)『デザイン > PC > HTML』画面で、今回変更した『HTML名』の箇所の『適用』ラジオボタンをクリックします。


↑ラジオボタンをクリック後、『設定を完了しました。』と表示されます。
以上で『Seesaa』ブログへの『SyntaxHighlighter 3.0.83』を導入は、ひとまず完了です。
あとは必要に応じて、『styles』の下にある表示デザイン用のCSSファイルや、
『scripts』の下にある各言語用のファイル(例.『shBrushJava.js』など)をアップロードし、HTMLに追加します。
以下は、使い方の例です。
<syntaxhl class="brush:plain">syntaxhighlighter のテストです。
注意:タグ名は syntaxhl にしています。
これはサンプルコードです。</syntaxhl>
このようなサンプルのコードを直接記事内に書くと、以下のように表示されます。
注意:タグ名は syntaxhl にしています。
これはサンプルコードです。
『class="brush:plain"』で指定している『plain』(=プレーンテキスト)は、今回アップロードしたファイルの『shBrushPlain.js』に対応しています。
例えば『css』や『java』のソースコード形式で表示したい場合は、『class="brush:css"』、『class="brush:java"』となりますが、その場合は別途『shBrushCss.js』や『shBrushJava.js』をアップロードして、HTMLへの追加が必要になるというわけです。
以上です。
スポンサーリンク
【カテゴリ:パソコン ブログカスタマイズの記録】の最新記事
- 今更ですが、サイドバーにアクセスカウンターを設置した
- 『Seesaa』ブログでカテゴリの一覧表示をツリー化した
- 『Seesaa』ブログで『記事のコンテンツHTML』を新しいソーシャルボタンの仕様に対応させた
- 『Seesaa』ブログで記事の中の画像に枠を付ける方法について
- 『Seesaa』ブログでCSS(スタイルシート)やHTMLを編集する際の手順
- 『Seesaa』ブログで『続きを読む』の文言を表示させる方法を変更した
- 『Seesaa』ブログでディスク使用量が2GBに到達したので『ストレージプラン』を申し込んでみた
- 『Seesaa』ブログのスマホ用ページに『Google Analytics』を設置する手順
- 『Seesaa』ブログに『3D球体タグクラウド』を設置してみた
- 『ブログカスタマイズ』最近変更した箇所のまとめ
- 『Seesaa』ブログでカテゴリの一覧を『メニューバー』のように表示させてみた
- サイドバーに『CUBACLOCK』のブログパーツを設置した
- 『Seesaa』ブログで記事本文の右上に『カテゴリ』を表示するようにした
- 『Seesaa』ブログで『続きを読む』の文言を画像で表示することができた
- 『Seesaa』ブログに『LinkWithin』を導入した
- 『我RSS』を利用して『最近の記事』の一覧を画像付きで表示するようにした
- ユニクロのブログパーツ『UNIQLO CALENDAR』と『UNIQLOCK』をサイドバーに設置した
- 『ACR WEB』の『ページランキング』で画像が表示できた
- 『Seesaa』ブログで記事タイトルの右上に画像を表示させてみた
- 『Seesaa』ブログに『ファビコン』を設置した