WordPressにコードを表示する

WordPressにコードを表示する

csvの読み書きで示している通り、PythonのコードをWordPressに表示できるようになった。
できるようにはなったが、やっぱり苦労した。なので、同じ轍を踏む人が少なくなることを祈ってコードが表示できるようなるまでを記述する。
まずは、用語解説。コードをブログ等に表示することをハイライト(Highlight)すると言うらしい。
で、表示便利ツールのことをハイライター(Highlighter)と言うらしい。もう少し正確に言うとSyntax Highlighterと言うらしい。

で、どうすればWordPressにコードを表示できるようになるか、「WordPress Syntax Highlighter」で検索したところ、「Crayon Syntax Highlighter」を勧めているサイトが多かった。実際、ブログ等でコードを表示している画面とCrayon Syntax Highlighterの画面が一緒で、そうそうこれこれ、と思いながらインストールして早速csvの読み書きのコードを貼り付けてみた。

・・・ん?プレビューで記事の出来を確認してみると、全く表示されていない。普通の日本語も表示されていない。???なんで?設定を間違えたかなぁ?と思いながら設定を確認してみる。うーん、特に問題なさそうだしCrayon Syntax Highlighterを勧めているサイトでも初期設定のままでも十分に使用できるようなことが書かれていたので、やっぱりなんで?

他の記事は普通に表示されているのだからCrayon Syntax Highlighter部分が悪さをしていると推測し、コード部分をごっそり削除。
するとプレビューが表示された。あちゃー、Crayon Syntax Highlighterが原因で表示されなくなったらしい。
Crayon Syntax Highlighterについてもう少しググってみると、どうもWordPress5.0になったあたりでCrayon Syntax Highlighterが使えなくなる現象が出始めているらしい。※普通に使えている人もいるようなのでテーマとの相性かもしれない。

なにはともあれ、自分はCrayon Syntax Highlighterを使うことができない(涙)。ならば、代替を探す必要があり再度ググったところ、「SyntaxHighlighter Evolved」が使い易いらしいことがわかった。ということで、Crayon Syntax Highlighterを削除してSyntaxHighlighter Evolvedをインストールする。

使い方は・・・コードの前後に表示言語を角括弧で括る(自分の場合はPythonなので、[python]コード[/python])だけでOKらしい。ここで、ちょっと気をつけることがあった。最初[Python][/Python]と入力していたのだが、([Python][/Python])自体も表示され、コードはただの文字列として表示されていてイメージと異なっていた。で、オヤっと思ってと入力すると、イメージ通りの表記になった。どうも大文字Pythonではいけないらしい。

で、[python]コード[/python]と入力することでcsvの読み書きに記述している通りPythonコードをブログに表示することができました!!

以上、WordPressにコードを表示できるようになるまでの過程でした。同じようなことで躓いている方々の参考になれば幸いです。