syntaxhighlighter
http://wordpress.org/extend/plugins/syntaxhighlighter/
[sourcecode language=”html”]
<html>
<head></head>
<body></body>
</html>
[/sourcecode]

SyntaxHighlighter Settings

Display line numbers.
行番号を表示してください。

Display the toolbar.
ツールバーを表示してください。

Automatically make URLs clickable.
自動的にURLをクリック可能にしてください。

Collapse code boxes.
コード箱を潰してください。

Show a ruler column along the top of the code box.
コード箱の上部に沿って定規コラムを示してください。

Use the light display mode, best for single lines of code.
コードの単線に軽い表示モード、ベストを使用してください。

Use smart tabs allowing tabs being used for alignment.
整列に使用されるタブを許容する賢いタブを使用してください。

Wrap long lines, using an icon to show where line.
長い系列を包装してください、そして、どこかを示しているのにアイコンを使用して、立ち並んでください。

wraps occur (disabling this will make a scrollbar show instead)
機密は起こります(これを無効にするのはスクロールバーを代わりに目立たせるでしょう)。

Additional CSS Class(es) / 追加CSS Class
に適当なclass名をつっこんだんだけど
pre class=”brush: xml;みたいな箇所に追加されてない、どうやって使うんだろう。

仕方ないので大本のcssを編集する
wp-content\plugins\syntaxhighlighter\syntaxhighlighter\styles内に
Color Theme毎のcssが入ってた。

  • shCore.css
  • shThemeDefault.css

のバックアップをとって編集する。

以前から行間が詰まってるような気がしてて不満だったのでline-heightを探す。

shCore.cssの最初に指定してあった
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
1.1emを1.6emにしてプレビューしてみると、改行の時のアイコンがちょっぴり表示されてた。
なるほど、折り返し時にアイコンを追加してるんじゃなくて最初から範囲外に配置されてたのか
3行になった時に折り返しアイコンが表示されないのはこの為か。

折り返しのアイコン(wrapping.png)を頼りに背景を指定している箇所を探すと以下にあった

shThemeDefault.css
.syntaxhighlighter .line .content .block{
background: url(wrapping.png) 0 1.6em no-repeat !important;
}
1.1emを1.6em(line-heightにあわせて)変更

font-familyを何にするか考え中
http://sakurachiro.com/_exercise/font-family/


One thought on “syntaxhighlighter

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.