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

LINEで送る
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で見ると崩れてしまいます。
行番号の文字サイズに対して、ソースコードの文字サイズが大きくなって、ずれているのが分かります。

iOS Safariで表示すると行番号とソースコードがずれている

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

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

If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#text-size-adjust - CSS | MDN

以下のCSSを追加します。

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

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

iOS Safariで表示すると行番号とソースコードがあっている
LINEで送る
Pocket

コメントを残す