どうも、ゆきけーです。
今回は、htmlタグなどのコードを
紹介する記事を作る時に便利な、
文章中にコードを不都合なく埋められる
プラグインを紹介します。
こういったhtmlタグなどを紹介する記事では、
そのままビジュアルモードでコードを記載しても
それをコピペしてテキストモードに入れると
変になって、うまく適用されなくなります。
かといってテキストモードに
コードをそのまま入れると、
適用されてしまい、記事中でコードが映せません。
そこでこういったプラグインを使うことで、
そういったトラブルが無くコードが紹介できます。
プラグイン導入
導入方法は途中までは普通のプラグインと同じく、プラグイン検索欄で
「Crayon Syntax Highlighter」
と検索して、
インストールして有効化します。
ここまでは同じです。
次は、ワードプレスの「設定」メニューから
「Crayon」というメニューを探してクリックします。
それが今回入れたプラグインです。
その画面に来ると、英語がたくさんあるページになります。
それがこのプラグインの設定画面です。
そしてその中から
![](http://yuki-koshimizu.com/001/wp-content/uploads/2017/10/Crayon1.png)
この「tags」を探し出し、線を引いた部分が
チェックを入れられていることを確認します。
入ってなかったら入れましょう。
もし入ってなくて入れたら、
ページ下にある
「Save Changes」
を押して、変更を保存します。
それが出来れば、
ワードプレスで<pre>と</pre>というコードを使って
プラグインを普通に入れることが出来るようになります。
またオプションで、
「title」でそのコードのタイトルを入れられますし、
「lang」で入れたコードのプログラム言語が何なのかを指定できます。
まぁ、ここは以下でテンプレを紹介しますので、
そのままコピペして対応したところに文字やコードを入れて頂ければ
大丈夫です。
使ってみる
では使ってみます。<pre title=”コード名” lang=”言語の種類。大抵はそのままHTMLでいいです。”>
ここにソースコードを入れます。
</pre>
これをコピペして、テキストモードに貼り付けます。
1 |
ここにソースコードを入れます。 |
これで入れられました。
コードやコード名を入れていく場合は、
ビジュアルでなく、テキストモードで入れましょう。
登録
毎回このコピペを探すのは面倒なので、AddQuicktagで登録しておけば、ラクですよ。
「AddQuicktag」好きなhtmlタグを登録して一発で出すプラグイン【☆】
htmlやコード類は、記事にするために調べてみることで
メキメキ知識がついていくので、
自身の勉強のためにも、こういった記事を
作った方がいいですね。