表示がおかしいからSyntaxHighlighter Evolvedから、WP SyntaxHighlighter にプラグインを変更

あわせて読みたい

実体参照になったり、改行タグがでてきたりと、表示がおかしい。記事の中でコードを表示するのにSyntaxHighlighter Evolvedを利用していました。鉄板プラグインです。なのに、コードの表示が変なのです。

自分の環境のみの相性問題とは思いますが、表示がおかしいのは困ります。

特殊記号が実体参照コードになったり、改行タグが勝手に挿入されたり。なんとかこのプラグインで解決できないかトライしましたが、良い方法が見つからず。

使うプラグインを変えることで解決しました。滅多にないケースなのでまとめました。

2013−02−14 追記 : WordPressをクリーンインストールしたところ、上のトラブルが無くなりました。いままでの記事のためにSyntaxHighlighter Evolvedに戻しました。トラブル事例とプラグインの使い方の参考にしてください。

どんな問題だったのか

  • 改行のところに勝手に<br />タグが出てくる
  • <p>タグも出てくる
  • <や>などの特殊文字が実体参照のコードで表示される

これらの問題が起こりました。これでは使い物になりません。自分の使い方が悪いのかもしれません、また、いままでいろいろなプラグインを試してきたからもしれません。が、なんとか直さないと、コードを載せられないのでは記事を作りにくく、もー困ります。

photograph2013201302s_code20130211001

原因を見つけることができませんでした。

WP SyntaxHighlighter

WordPressでコードを表示するプラグインは、このSyntaxHighlighter Evolved以外にもあります。いままでのコードも書き直しになりますが、Zbenchテーマのときはコードを載せることができなかったため、それほど今までコードを記事に書いていないこともあり、思い切ってプラグインを変えました。

代わりに選んだのは、「WordPress › フォーラム » ソースコードをハイライト表示するWP SyntaxHighlighter」です。インストール方法・使い方の詳しいことは下の作者さんのサイトが参考になります。

WP SyntaxHighlighter | モノについてのモノ語り

このプラグインの良いところは、<pre>タグを使ったコーデングで、各種コード表示を実装している点です。

<pre>タグなのでWordPressのビジュアルエディタがhtmlコードにちょっかいを出しても大丈夫なのです。

これは心強いです。このエディタの仕様がいろいろと問題になることが多いですから。

簡単な使い方

プラグインのインストールとセットアップは完了していものとします。

WordPressのエディタを開き、「HTML」モードにします。上にあるボタンの中から「SH pre」をクリックします。

photograph2013201302s_code20130211002

下の「SH pre ボタン」ウインドウが開きます。言語の種類を選択して、行番号を表示するかを決めて、「実行」をクリックします。

photograph2013201302code20130211004

[html]
<pre class="brush: html; gutter: true; first-line: 1; highlight: []; html-script: false">
コード
</pre>
[/html]

ここではhtmlを選択しました。自動で<pre>タグが挿入されます。このなかに表示したいコードを書きます。また、オプションを変更すると行番号やハイライトする行指示などの表示を調整できます。

このプラグインを使うことで,下のようにキレイにコードを記事に表示することができました。

photograph2013201302s_code20130211005

まとめ

SyntaxHighlighter Evolvedプラグインを使ってコードを表示したところ、下の3つのトラブルに出会いました。

  • 改行のところに勝手に<br />タグが出てくる
  • <p>タグも出てくる
  • <や>などの特殊文字が実体参照のコードで表示される

これを解決する方法を見つけることができませんでした。

やむなしで、別のWP SyntaxHighlighterプラグインを使うことで解決しました。SyntaxHighlighter Evolvedプラグインは仕方なく無効にしています。

このWP SyntaxHighlighterプラグインは<pre>タグを使ったコーデングなのでWordPressのビジュアルエディタがhtmlコードにちょっかいを出しても大丈夫です。

使うときも、ビジュアルエディタのHTMLモード(ビジュアルモードでもOK)で「SH pre ボタン」から、挿入コードを呼び出せて、とても使いやすいプラグインです。

2013−02−14 追記 : WordPressをクリーンインストールしたところ、上のトラブルが無くなりました。いままでの記事のためにSyntaxHighlighter Evolvedに戻しました。トラブル事例とプラグインの使い方の参考にしてください。

WordPressを自在に使いこなしたい!あなたにおすすめ!

あわせて読みたい

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

こっそり感想を送信する

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告