ソースコードのハイライトスタイルが反映されない

Simplicityの特徴 フォーラム Simplicityについての質問 ソースコードのハイライトスタイルが反映されない

  • このトピックには6件の返信、1人の参加者があり、最後にAkiraにより1年、 10ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #59825
      jin
      ゲスト

      お世話になっております。
      Simplicity2は非常に使いやすいテーマで大変助かっております。

      恐れ入りますが、首記の件につきまして、ご教示いただきたく問い合わせていただきます。

      サイトにpreタグで囲んだソースコードを掲載したいと考えております。その際、デザインはカスタマイズから選択できる「monokai-sublime」にしたいと考えております。

      カスタマイズの画面で確認したときには、「monokai-sublime」のデザインになっていたのですが、いざサイト上の表示を見ると、「monokai-sublime」のデザインは適用されておりませんでした。

      ブラウザのキャッシュ削除、サイト上のキャッシュ削除は実施した上で動作を確認しております。また、サイトのhtmlのソースからpreタグで囲まれていることも確認しております。

      該当のページは以下となります。
      https://ikumen-sim.net/simplicity-amp-tocplus

      なお、Simplicityのバージョンは2.6.7です。

      解消方法についてご教示いただきたく、何卒よろしくお願い致します。

    • #59826
      jin
      ゲスト

      ※前の投稿が<pre>タグの処理を失敗したため、再度投稿します。

      お世話になっております。
      Simplicity2は非常に使いやすいテーマで大変助かっております。

      恐れ入りますが、首記の件につきまして、ご教示いただきたく問い合わせていただきます。

      サイトに<pre>タグで囲んだソースコードを掲載したいと考えております。その際、デザインはカスタマイズから選択できる「monokai-sublime」にしたいと考えております。

      カスタマイズの画面で確認したときには、「monokai-sublime」のデザインになっていたのですが、いざサイト上の表示を見ると、「monokai-sublime」のデザインは適用されておりませんでした。

      ブラウザのキャッシュ削除、サイト上のキャッシュ削除は実施した上で動作を確認しております。また、サイトのhtmlのソースから<pre>タグで囲まれていることも確認しております。

      該当のページは以下となります。
      https://ikumen-sim.net/simplicity-amp-tocplus

      なお、Simplicityのバージョンは2.6.7です。

      解消方法についてご教示いただきたく、何卒よろしくお願い致します

      • この返信は1年、 10ヶ月前にわいひらわいひらが編集しました。理由: タグを修正しておきました
    • #59827
      Akira
      ゲスト

      LiteSpeed Cache の「 JS Deferred をロード」または「 JS 結合」を選択されていないでしょうか?

      jQuery が読み込まれる前に highlight.js が読み込まれているので、エラーが出ています。

      LiteSpeed Cache の「 JQuery を除外する」をオンにすると、どうなるでしょうか?

    • #59828
      jin
      ゲスト

      Akira様

      ご返信ありがとうございました。
      仰る通り、LiteSpeed Cache の「 JS Deferred をロード」または「 JS 結合」を選択していました。しかし、JQueryの除外を設定しても、結果としてソースコードの表示は変わりませんでした。

      なお、ご指摘の通り、JSのエラーが表示されておりましたので、その点含めて確認しました。
      確認した内容は以下の通りです。

      ・「Jqueryの除外」を設定→別のエラーが表示される「hljs is not defined」
      ・「JS Deferred をロード」の設定をオフに変更→JSのエラーは変わらず
      ・「JS 結合」の設定をオフに変更→JSのエラーは変わらず

      現在、サイトは「JQueryの除外」を設定している状態です。
      恐れ入りますが、上記の状況で何かわかることはございますでしょうか。

    • #59829
      Akira
      ゲスト

      highlight.js の本体である highlight.min.js が、非同期で読み込まれています。これがエラーの原因です。 本体が読み込まれる前に、インラインで書かれている highlight.js を動かすためのスクリプトが読み込まれてしまっています。

      おそらく、「 JQuery を除外する」をオンにした上で、「 JS Deferred をロード」をオフにするとエラーが出ない気はします。

      もしくは、「 JQuery を除外する」をオンにした上で、「 JS 繰延を除外」に highlight.min.js を指定すると、上手く行けばエラーが解消するかもしれません。ただ、どのように指定すればいいのかは、やったことがないので分かりません。

      javaScript の非同期読み込みによるエラーは、外部からは正確な解決方法の提案が難しいです。

    • #59840
      jin
      ゲスト

      Akira様

      ご回答ありがとうございました。無事解決しました。

      「JQueryを除外する」をオンにした上で、「JS除外」に「highlight.min.js」を追加すると、エラーがなくなり、ソースコードも想定通りの表示がされました。
      ちなみに、「JS繰延を除外」に追加してもエラーは変わらずでした。

      色々とご助言いただきまして、誠にありがとうございました。
      大変助かりました。

    • #59841
      Akira
      ゲスト

      なるほど!「 JS 除外」の方なんですね。勉強になりました。

6件の返信スレッドを表示中
  • トピック「ソースコードのハイライトスタイルが反映されない」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)