トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
Topic starter
スクリプトの遅延読み込み設定で以下を遅延させる設定にしています。
prism.js, hcb_script.js,
この状態でHighlighting Code Blockで「行数を表示しない」に設定し、data-line属性値を設定するとハイライトがズレて表示されます。
詳細はURLからご確認いただけます。
なおスクリプトの遅延読み込み設定から該当スクリプトの記述を削除すると、正常に表示されることを確認しています。
SWELLの不具合ではなさそうなのでここに投稿すべきか迷いましたが、トピックを立てさせていただきました。
よろしくお願いいたします。
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.5.6.1
利用中のPHPバージョン
8.0.12
OS
Windows
利用中のWordPressバージョン
5.8.2
利用中のサーバー会社
Amazon Lightsail
ブラウザ
Chrome 96
利用中のプラグイン一覧
BackWPup (v.3.10.0)
Highlighting Code Block (v.1.4.1)
Nginx Helper (v.2.2.2)
SEO SIMPLE PACK (v.2.2.7)
Two Factor (v.0.7.1)
WP Cerber Security, Anti-spam & Malware Scan (v.8.9.3)
WPForms Lite (v.1.7.1.2)
WP Mail SMTP (v.3.2.1)
WP Revisions Control (v.1.3)
XML Sitemaps (v.4.1.1)
投稿済 : 29/11/2021 3:22 pm
しらこ reacted
世の中には遅延に適さないスクリプトもありますので、それに該当するかもしれません。
今回 @loos_ryo さんのプラグインなので将来的に調整が可能かもしれませんが、サイト上の全てのスクリプトを遅延するためにSWELLのスクリプト遅延機能が導入された訳ではないので、各々調整していただく事が重要です。
SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。
ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/
投稿済 : 29/11/2021 5:28 pm
Topic starter
今回はHighlighting Code Block側の「行数を表示する」と「行数を表示しない」の座標計算ロジックが異なることで、要素に指定される本来の数値が異なって、本現象が起きているのではないかと存じています。
このような座標計算はページの様々な要素によって変わってくるため、開発者でも予測が困難で、ものによっては修正も困難であることも承知しております。
ましてや了さん以外の方が作ったスクリプトである場合はSWELLのために調整してもらうことは不可能なので、本現象のようにプラグインによる表示崩れが発生する場合は問題がない運用を探しておくことがセオリーだと考えています。
（ここはSWELLのフォーラムなので、了さんが作ったものであっても微妙なラインなのですが）
そのため、対応が難しい場合は「行数表示あり data-line属性値あり」のパターンで運用しようと思っています。
投稿済 : 29/11/2021 6:29 pm
momo and skillsharejp reacted
ご報告ありがとうございます。気づいていなかったです...。
後日調べてみます。どうしても遅延読み込みとの相性が悪そうな場合は解説記事からも削除しておきます。
SWELL開発者です。
投稿済 : 02/12/2021 2:25 pm
Topic starter
本件ですが、PrismJSの処理に起因する不具合である可能性があることが分かったため、Highlighting Code Block側での対処も難しいかもしれません。
お昼休みと少しの時間を使ってちょっとだけ処理を追ってみましたが、Highlighting Code Block内部に含まれるprism.jsの以下の記述が原因であることを突き止めました。（圧縮されたコードなので目で追うのは無理です）
h.style.top=(m-a-1)*d+"px",
上記を下記に修正すると、本件の事象が直りました。
h.style.top=(m-a-1)*(d*(u?1:1.5))+"px",
prism.jsの中身を書き換えることになりますので、Highlighting Code Blockのアップデートがあったタイミングで上書きされることを考えると、このカスタマイズは行うべきではありません。
Highlighting Code Block内部に含まれるprism.jsと、PrismJSプロジェクト内にある現在の処理を見てみると、該当の計算処理に変更が入っているようですので、もしかするとprism.jsをアップデートすると直ったりするのかもしれません。
https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L193
もしそれでも直らなかった場合、せっかくなのでPrismJSにPull Requestを送ってみようと思っています。
PrismJSの不具合であるか否かは確信が持てないため、聞き入れてもらえるかは分かりませんが……。
Prism.jsをプロジェクトで採用したことがないため仕様がよく分かっておらず、私はHighlighting Code Block内のprism.jsを正しくアップデートすることができません。
大変お手数ですが、ご確認をお願いできませんでしょうか？
投稿済 : 02/12/2021 2:50 pm
skillsharejp and しらこ reacted
Topic starter
なお現在、サイトで読み込まれるのは上記の修正を行ったスクリプトになっています。
ご承知おきください。
投稿済 : 02/12/2021 2:55 pm
Topic starter
本件ですが、Highlighting Code Block 1.5.5で修正されたことを確認しました。
お忙しい中、ご対応ありがとうございました！
投稿済 : 03/02/2022 2:18 pm
skillsharejp reacted