SyntaxHighlighterがiOS Safariで表示が崩れる件

Tweet

Pocket

WordPressのSyntaxHighlighter Evolvedというプラグインはプログラマーのブログには必須です。

プログラムのコードを見やすくしてくれます。

例えば、こんな感じです。

    override func didMoveToView(view: SKView) {
        self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)
        
        self.paddle = SKSpriteNode(color: UIColor.brownColor(), size: CGSizeMake(100, 20))
        self.paddle.position = CGPointMake(CGRectGetMidX(self.frame), 40.0);
        self.paddle.physicsBody = SKPhysicsBody(rectangleOfSize: self.paddle.size)
        self.paddle.physicsBody!.dynamic = false
        self.addChild(paddle)
        
        addBall()

ところがこのプラグインはiOS Safariで見ると崩れてしまいます。
行番号の文字サイズに対して、ソースコードの文字サイズが大きくなって、ずれているのが分かります。

iPhone や Androidのブラウザーは、縦向きと横向きの文字サイズを自動調整する機能があります。
この機能を制御しているのがCSSの -webkit-text-size-adjust プロパティです。
デフォルトではautoが設定されています。

このプロパティにnoneか100%を設定すると文字サイズの自動調整が行われなくなります。
ただnoneにするとwebkitに以下のようなバグがあるみたいですので、100％にしておきましょう。

以下のCSSを追加します。

.syntaxhighlighter {
	-webkit-text-size-adjust: 100%;
}

これでちゃんと表示されるようになりました。

Tweet

Pocket