三男パパのHP更新奮闘記

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:-- | EDIT | TOP

FC2ブログにおけるSyntaxHighlighter3.0.83導入に関する備忘録



SyntaxHighlighter3.0.83の美しさとカスタマイズ性の高さに惚れ惚れしている三男パパ(@knob_papa)です。

@cazukiさんのアドバイスでSyntaxHighlighter3.0.83を導入してから早数時間。忘れないうちに導入に関する備忘録を記しておきます。

今回は文字通り単なる「備忘録」で、間違っても手取り足取り説明しているエントリではありませんので、検索エンジンに誘われてこのエントリにいらっしゃった方には、Google先生に再相談されることを強くおすすめいたします。

SyntaxHighlighterの導入

ダウンロードサイト

右上「download」から。ジャンプ先のページで、最新版だけでなく以前のバージョン(2.0/2.1)もダウンロード出来ます。表示や使い勝手がバージョンによって異なるようで、旧バージョンもかなり人気があるらしいです。コードのコピーがしやすいという理由から、私は最新の3.0.83を導入しました。

参照ブログエントリ

他にもいろいろと参考にしましたが、最もわかりやすかったエントリはこちら。多謝。

アップロードしたファイル

上記参照ブログを含め、SyntaxHighliterの導入を解説しているブログはたくさんありますが、それらを見る限り必須ファイルに関しては諸説あるようです。私がアップロードしたのは以下のファイルです。もちろん、まったく問題なく動いています。
  • 必須JSファイル
    • shCore.js
  • 必須CSSファイル
    • shCoreDefault.css
  • 任意JSファイル
    • shBrushXml.js
    • shBrushCss.js
    • shBrushJScript.js
    • shBrushPhp.js

HTMLテンプレート修正

<head>~</head>内にCSSファイルへのリンクタグを追加。
<link href="http://***/shCoreDefault.css" type="text/css" rel="stylesheet">

以下を</body>タグの直前に追加します。読み込みスピードを重視する場合は、<%topentry_more>の直後に追加する方がいいらしいです。
<script type="text/javascript" src="http://***/shCore.js"></script>
<script type="text/javascript" src="http://***/shBrushXml.js"></script>
<script type="text/javascript" src="http://***/shBrushCss.js"></script>
<script type="text/javascript" src="http://***/shBrushJScript.js"></script>
<script type="text/javascript" src="http://***/shBrushPhp.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

記述方法/CSSカスタマイズ

実際の記述方法

基本的には class="brush: html;" といった形式で、使用言語を小文字で指定すればOK。特定の行をハイライトしたい場合は、class内で言語の指定に続けて "highlight: [行番号,行番号,…];" と記述します(下記【CSSの場合】参照)。
<pre class="brush: html;" title="タイトル">
    <!-- HTMLを記述 -->
</pre>
<pre class="brush: css; highlight: [18,22,23];" title="タイトル">
h1 {
	/* CSSを記述 */
}
</pre>

CSSはおそらく問題ないようですが、HTMLの場合<pre>タグ内では特殊文字が使えないとのことです(未確認)。そんなときは特殊文字を<pre>タグ内で使える実体参照に変換してくれる以下のサイトが便利です。私は最初からここで変換してからペーストしています。

CSSカスタマイズ

私がshCoreDefault.cssをいじった箇所のみをピックアップして記しておきます。shCoreDefault.cssファイル内で検索をかけると見つけやすいかもしれません。今後も大いにいじくる予定ですので、参考にならない可能性の方が高そうですが…。
/*----- Chromeでの縦スクロールバー消去 -----*/
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; /*追加*/
}

/*----- タイトル領域のカスタマイズ -----*/
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: 0.3em 0 0.3em 0.5em !important; /*値変更*/
  background-color: #6ce26c !important; /*追加*/
  border-bottom: 5px solid #fff !important; /*追加*/
}

/*----- 偶数行に背景色をつける -----*/
.syntaxhighlighter .line.alt1 {
  background-color: white !important; /*奇数行の場合はこちらを変更*/
}
.syntaxhighlighter .line.alt2 {
  background-color: #f8f8f8 !important;  /*カラー値変更*/
}

関連記事
09:19 | Trackback : 0 | Comment : 0 | EDIT | TOP
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
http://mains1011.blog24.fc2.com/tb.php/456-7b701bf2
検索フォーム
スポンサーリンク
なかのひと

三男パパ

Author三男パパ

Twitter@knob_papa
FacebookNobuyasu Kamata
Instagramknobpapa
生まれ東京都
住み処埼玉県

独学で自社関連のWebサイトを作っています。こんなサイトとか、あんなサイトとか。お暇ならどうぞ。

on-line:/total:

カテゴリ

openclose

最新記事
メールフォーム
ご意見・ご感想をお寄せください

お名前:

メアド:

件名:

本文:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。