WordPressのコードプレビュープラグイン「Highlighting Code Block」をDiverというテーマで使うと、下記の画像のようにデザインが意図せず書き換えられてしまう。

本来右上に表示されるはずの言語名も出ないし、なんか色も変で見にくい。

 

後日確認したら直ってた。意味わからん。

console.log('hoge');

 

対処法

あきらめて「Code Snippets」という類似プラグインを使う

Code Snippets

 

たぶん、CSSがテーマとぶつかっていることが原因と思われる。

 

Code Snippetsの使い方

インストールして有効化

 

投稿画面で、

[code lang="言語名"]
コード
[/code]

のように書けば、ハイライト(色)付でコードがプレビューされる。

 

[code lang="php"]
<?php
echo “Aho”;
?>
[/code]

 

ショートコードとして登録

AddQuicktagをインストールして、ショートコードとして登録すると便利

AddQuicktag

 

設定>AddQuicktag を開く。

画像のように設定する。

「並び順」は、数字が小さい順に並ぶので、よく使うものを若い数字にしておくと便利。

 

投稿画面を見ると、エディターに追加されているはず。

 

うまくいかない場合

もし出なかったら、Diver側で制限がかかっているので、この記事を見て。

 

 

もし、大なりなどの記号が勝手に「&gt;」とかの意味不明な文字列に置き換えられる場合は、この記事見て。

 

 

 

 

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事