1. ホーム
  2. Web プログラミング
  3. ウェブプレーヤー

SyntaxHighlighter.jsのコードがハイライト時に点滅しないようにするための解決策です。

2022-01-02 07:11:51

SyntaxHighlighter.jsは、コードハイライトのためのJSプラグインで、使い方は簡単ですが、JSコードを実行して色付けするブラウザセグメントであるため、視覚的に点滅する現象があります。例えば、20行のコードページが高さ100pxで開いたのに、SyntaxHighlighterがその部分をハイライトして高さが120px+色の変更になった場合、特にひどい体験になります。

解決方法 preタグのスタイルをハイライト後のスタイルとして定義する。

解決方法 shCoreDefault.css ファイルに以下のスタイルを追加します。

pre {
   line-height:22px !important;
   background-color:#f5f5f5!important;
   border:1px solid #ccc!important;
   border-radius:4px!important;
   width:98% !important;
   margin:.3em 0 .3em 0!important;
   padding:0 0 0 1em!important;
   font-size:13px !important;
   font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
}

つまり、大きなチラツキがないようにし、F5キーを押してブラウザのキャッシュを強制的に更新して効果を確認し、それでも若干のずれがあるようなら、SyntaxHighlighterのCSSスタイルを微調整すればよいでしょう。