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スタイルを微調整すればよいでしょう。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
html に rm 形式の動画ファイルを挿入するためのコード
-
FireFox用MediaPlayerプラグイン(正常にMediaPlayerを再生できます。)
-
映画システムは "Polycom "加速プレーヤー、カードではない意志でドラッグを呼び出します。
-
flvプレイヤー Webページでflvを再生する
-
CSDNが提供するページネーションプログラム「Infinite Streams」。
-
音楽ファイルの再生時間や現在の進行状況を取得する
-
ウィンドウメディアプレーヤー再生
-
Flexの親子ウィンドウは、アイデアやソースコードを実装するためにお互いを呼び出す
-
組み込み用RealPlayerのパラメータの意味
-
オンラインFLVプレーヤーの実装方法