このページの目次
コードのハイライトを作る
ホームページを作成する人なら良く見かける「コードの事例」にハイライトを当てて、ユーザーがコードを識別しやするためのワードプレスプラグインです。
↓このようなもの
<ul>
<li>メニュー１</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
WP Code Highlight.jsの導入
今回は「WP Code Highlight.js」という超軽量プラグインを使った事例です。
まずは、ワードプレスのプラグインページより新規追加を行います。
WP Code Highlight.jsのインストール
CDNの設定
インストール〜有効化の後は各種設定に入ります
まず最初にCDNの項目を「Public CDN: cdnjs (highlights.org recommend)」と選択します
コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
引用：wiki https://ja.wikipedia.org/wiki/コンテンツデリバリネットワーク
背景色の設定
背景色を選択します。
https://highlightjs.org/static/demo/
こちらのサイトでカラーリングのデモが確認できます。
このブログではレインボーを使用しています。
コード挿入タイプの設定
従来のハイライト挿入の方法は下記のような記述になります。
<pre><code></code></pre>
が、、、「Enable [code]code content …[/code] support:」にチェックを入れておくと、タグを利用して挿入が楽になります。
チェックを入れて活用する場合の記述方法はこちら
[code lang=”言語指定”] code content … [/code]
終わりに
一般ユーザー様には、ほぼ関係のない記事になってしまいました。
なぜならこのwordpressカテゴリは、社内の教科書としての機能を重視したものだからです。
ホームページの運用ノウハウやマーケティングに関しては、別のカテゴリでご案内します