Technical Blog
BLOG

プラグイン「SyntaxHighlighter」がiOSでズレるときの修正CSS

ワードプレスでPHPやHTMLなどを簡単に表示してくれるプラグイン「SyntaxHighlighter」。とても使いやすいのでお気に入りプラグインの一つですが、iPhoneで閲覧時にズレてしまうので、どうにかならないか調べてみました。

ポイント

  • ワードプレスのプラグイン「SyntaxHighlighter」はコードを表示させるプラグイン

  • iOSのモバイルサファリでは表示がズレる

  • CSSで表示改善ができる

プラグイン「SyntaxHighlighter」とは

ワードプレスのコードを表示用のプラグインであるSyntaxHighlighterはとても優秀なプラグインです。プラグインを有効かして、記述したいところをショートコードで挟むだけで簡単に見やすいコードが作成できます。

「SyntaxHighlighter」の基本的な使い方

下記のように［code］～［/code］にコードやソースなどを入力すると簡単にコードを表示してくれます。

［code］
//ここにコードを入力します。
［/code］
※［code］は全角で入力していますが、ご使用の際には半角で入力します。

上のショートコードを「SyntaxHighlighter」を使って反映させた表示例です。とても簡単に表示できるので筆者のように技術ブログなどを掲載しているユーザーにとってはとても重宝されている人気プラグインです。

//ここにコードを入力します。

iOSでのバグ

 

 

下のキャプチャー画像は他の記事で「SyntaxHighlighter」を使用して作成し、iPhone XSで閲覧した様子です。

試してみたこと

まずは、Google Chromeの検証ツールで調べてみました。このサイトのマークアップの場合下のコードのように「code-wrapper」というDIVで囲んでます。

配下の「syntaxhighlighter」というクラスはプラグインによって自動生成されています。

<div class="code-wrapper">
  <div id="highlighter_255981" class="syntaxhighlighter  plain">
    <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td class="gutter">
      		<div class="line number1 index0 alt2">1</div>
          </td>
          <td class="code">
      			<div class="container">
        			<div class="line number1 index0 alt2"><code class="plain plain">//ここにコードを入力します。</code></div>
      			</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div><!-- ./code-wrapper -->

CSSを検証

検証してみると、「.syntaxhighlighter」配下はすべて、「font-size: 1em !important;」になっていることがわかる。つまり上位で指定したフォントサイズが反映されることが分かった。

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    -moz-border-radius: 0 0 0 0 !important;
    -webkit-border-radius: 0 0 0 0 !important;
    background: none !important;
    background-color: rgba(0, 0, 0, 0);
    border: 0 !important;
    bottom: auto !important;
    float: none !important;
    height: auto !important;
    left: auto !important;
    line-height: 1.1em !important;
    margin: 0 !important;
    outline: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    text-align: left !important;
    top: auto !important;
    vertical-align: baseline !important;
    width: auto !important;
    box-sizing: content-box !important;
    font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 1em !important;
    min-height: inherit !important;
    min-height: auto !important;
    direction: ltr !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}

CSSデバッグ

外側のDIVに対してフォントサイズを定義すれば修正できるのではないかと下のコードを追加して、キャッシュをクリアしてみました。PCやエミュレータ上では正しく反映されるのですが、iPhoneの実機では効果がありませんでした。

.content-wrap.pre-code-wrap .code-wrapper{
  font-size: 14px!important;
}

MobileSafariのバグフィックス

色々と調べていくうちに、モバイルサファリ（iOS）のバグではないかという結論に行きつきました、どうにかならないかなと仕様を確認してみたところ、「ありました！」。

「text-size-adjust:」という使ったことのないCSSプロパティがあるようで、デフォルトで「auto」に設定されているようです。

/*
デフォルトの設定
.syntaxhighlighter {
    -webkit-text-size-adjust: auto;
}
*/

/* バグ修正 */
.syntaxhighlighter {
    -webkit-text-size-adjust: 100%;
}

/* 親要素のフォントサイズ */
.content-wrap.pre-code-wrap .code-wrapper{
  font-size: 14px;
}

iOSでの表示の改善

上で修正したコードをアップしてみたところ、下のキャプチャーのように無事改善されました。ずっともやもやしてた表示バグでしたので改善されてスッキリしました。