Q&A
Chrome 等のデベロッパーツールで、404 等のエラーが出ているURLがあったりしないでしょうか？
Wordpressをローカル環境である程度作成し、
それを本番サーバーに移動させたところ
prism.jsがうまく動作しなくなりました。
具体的には、
記事内で1つ目のpreで囲った要素には適用されているのですが、
2つ目のpre以降で表示が崩れます。
ローカルでは一切このようなことはありませんでした。
プラグインもローカルと同じで主な違いは
ローカルかサーバーかくらいです。
ちなみに、サーバーはmixhostです。
詳しい方教えて頂けると助かります。
###画像
正しい表示
バグっている表示
回答1件
0
情報が少ないので的外れな回答をしていたらすみません。
記述例をもとにチェックポイントを記載しています。
ex.）最低限動作に必要な記述例
<head> <link href="prism.css" rel="stylesheet" /><!-- ① --> </head> <body> <pre><code class="language-css">p { color: red }</code></pre><!-- ③ ④ --> <script src="prism.js"></script><!-- ② --> </body>★チェックポイント
①cssファイルが読み込まれていること ※ちゃんとアップロードしてファイルがあること
②jsファイルが読み込まれていること ※ちゃんとアップロードしてファイルがあること
③preタグの中にcodeタグがあること
④codeタグのクラス名にlanguage-xxx xxxは任意 の言語の名前があること
※language-・・・ の指定が正しいか
補足）
一番可能性が高いのは、④codeタグがwordpressの保存時
自動編集されることによって欠損していないか
もしくは、タグにclassの指定（class="language-css"）が正しいかを
確認されるといいのではないでしょうか。
自動編集機能は環境関係なく動作してしまうでしょうから
編集画面を使っていたらタグの欠損はありがちです。
1つ目のpreタグと2つ目のpreタグのソースを見比べてみるといいのかと感じました。
あとは、chromeの右クリック 検証でどのデザインが適用されているか
上手くいっているケースとそうでない場合で
cssを１つづつ確認していくことになると思います。
動作している物を見ればすぐ分かるかもしれませんがとりあえず、
参考になればいいですね。 がんばってください。
投稿2018/07/27 07:36
総合スコア284
あなたの回答
tips
プレビュー
