アプリ開発ときどきアウトドア

主にJavaを使ったアプリ開発やトラブルシューティング等のノウハウ、キャンプや登山の紹介や体験談など。

2. wordpressカスタマイズ

Syntax Highlighterデザインのカスタマイズ

投稿日:

wordpressでソースコード等を記載するためにSyntax Highlighterを使っていますが、微妙に気になる所があるのでCSSをカスタマイズして使っています。
バージョンアップするとCSSに対する変更が元に戻ってしまうので、その際の復旧のための備忘録としても記載します。

概要

SyntaxHighlighterの既定の表示は次の通りです。

  • 領域の上下と左側の隙間が狭く、窮屈な感じがする。
  • ソースコードや出力結果を載せるため、大量になりやすく本文の説明に比べると重要度は低くなるので、もう少々フォントを小さくしたい。
  • 普段使っているのは、SyntaxHighlighter3のemacs形式で、行番号あり/なし(gutter属性)、タイトル表示あり/なし(title属性)、特定行のハイライト(highlight属性)です。これらの属性を組み合わせて指定した場合でも正常に表示できるようにします。

カスタマイズ方法

カスタマイズの完成イメージは次の通りです。

テーマのカスタマイズ等によるCSSの上書きクラスを定義する方法では変更できないので、SyntaxHighlighterのCSSファイルを次のように編集しています。(”/* custom */”が変更箇所)
shCore.cssは”wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles”の下にあります。

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
...
 * @version
 * 3.0.83 (July 02 2010)
...
 */

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
  padding-left: 0.5em !important; /* custom: #1 */
}

.syntaxhighlighter table {
  table-layout: auto !important;
  width: 100% !important;
  margin: 0.5em 0 !important; /* custom: #2 */
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: 0 0 0.5em 0 !important; /* custom: #3 */
}

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 0.5 !important; /* custom: #4 */
}
  • #1: 行番号なし時のコードの左側の隙間を確保
  • #2: 表示領域内の上下の隙間(開始行の上、終了行の下)を確保
  • #3: タイトル表示時に#2の隙間と合わせて間延びしてしまうので上の隙間を削除
  • #4: 行番号あり時に#1と合わせて間延びしてしまうので若干削除(減らしすぎるとhighlight属性指定時の番号のハイライトが窮屈になるため。)

なお、SyntaxHighlighterのバージョンを更新する度にshCore.cssは元に戻されてしまうので編集後はshCore.cssファイルの退避をお薦めします。
私が現在使用しているSyntaxHighlighterのバージョンは3.5.4ですが、shCore.cssのバージョンは3.0.83のままです。SyntaxHighlighterのバージョンアップ後、shCore.cssのバージョンが変わっていなければ、退避している同ファイルを上書きして復旧できます。



(adsbygoogle = window.adsbygoogle || []).push({});


(adsbygoogle = window.adsbygoogle || []).push({});

-2. wordpressカスタマイズ

執筆者:

関連記事

バックアップ

シェルスクリプトでwordpressをgoogleにバックアップ

もしもに備えてwordpressを単純にバックアップしたい。 バックアップ先としてローカルのPCが考えられるが、自宅PCで起動しないといけないので却下。 クラウドの無料ストレージ時に定期的にバックアッ …

Rinkerプラグインの追加とエラー対応

もしもアフィリエイトを使うために、Rinkerプラグインをインストールし、有効化した。 また、商品検索するためのAmazonアフィリエイト関連の必須項目を設定もした。 実際に商品リンクを追加するために …

プロフィール ゆっきーです。
都内でシステムエンジニアをやっています。
もっと詳細を見る