2019-10-25SHAREツイートシェアはてブLINEPocketソースコード表示方法いろいろWordPressの記事の中でソースコードを表示させる際、背景などに色をつけて見やすくする方法を紹介します。実現するには、プラグインを使う方法が楽ですが、この類のプラグインは重いという評判です。ようなソースコード管理のサービスを利用する方法もありますが、数行のコードやコマンドを記事に埋め込むには向いていなさそうです。JSのライブラリを利用してコードをきれいに表示する方法もあります。今回は、Googleが提供するJSライブラリをCDNから利用する方法を紹介します。準備は簡単で、以下のJSファイルをCDNから読み込むだけです。src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>JSを読み込んだら、記事の中でテキストモードにてソースコードを以下のタグで囲めばOKです。class="prettyprint"><code>ソースコード</code></pre>上記のようにタグで囲めば以下のように表示されます。code-prettifyのJSファイルを読み込ませます。子テーマのfunction.phpに以下のコードを追加します。以下では記事ページのみJSファイルを読み込ませるようにしています。false);wp_enqueue_script('google-code-prettify-js');}}上記の記事ページを判定する定数「IS_SINGLE」は事前に以下のコードをfunction.phpに追加しておくと利用できます。1);コードを折り返ししないデフォルトのままですと、コードの桁数が多いと折り返しして表示されるので、折り返ししないで横スクロールバーが表示されるようにします。CSSに以下を追加します。記事編集画面で簡単に上記タグ出力ができるよう、プラグイン「AddQuicktag」を設定します。今回は、「code-pretty」としてタグ出力ボタンを作成しました。code-prettify」のタグで囲まれます。等)をエスケープする必要があります。以下のサイト等を利用してHTMLコードを変換し貼り付けます。使える便利なWE...HTML特殊文字の変換ツール。HTMLやコードをホームページに載せる時にHTML的に特殊な意味を持つ特殊文字を正常に表示されるように変換するツールです。コメントをキャンセルコメントは当サイト運営者の承認後に反映されます。お名前はニックネームでも結構です。/島唄イベント企画・運営・司会/ネットショップ運営/ITコンサルティング・Web構築運営などのサービスを提供しております。