WordPressで記事内にソースコードを記述できるプラグイン | 初心者向け

21 11月
LINEで送る
Pocket

WordPressで記事内にソースコードを書きたい時、困っていませんか?

記事内にソースコードを記述

 

 

 

 

 

 

 

 

 

 

 

WordPressで記事内にソースコードを書きたい場合、そのまま直接書いても良いのですが、少し工夫したいですね。

 

 

例えばイメージタグのコードをを表示したい場合に下記のようにそのまま記入させると、画像が表示されてしまいます。

 

 

<img src=”http://studymarketing.net/wp-content/uploads/2014/11/abac28df741e49b7ae8d9f3101ae34101.png” alt=”記事内にソースコードを記述” title=”スクリーンショット 2014-11-17 21.05.19.png” border=”0″ width=”227″ height=”293″ />

 

 

長いコードを書く場合や他の人が見てもすぐにどこからどの部分までがコードなのか見やすいようにUIも一手間加えたいものです。

 

そんな時に、Crayon Syntax Highlighterというプラグインが大変便利です。

 

テキストエディタの一部を記事内に表示して、コードを書く際にも分かりやすく読んでいる人に伝わります。

 

試しに、コードを書いてみるとこんな感じに表示されます。

 

 

 

よく、ブロガーの方やコードを解説される方が使っているプラグインですね。

 

 

 

Crayon Syntax Highlighterの使い方

 

 

このプラグインはインストールしてから、特に設定を変更せずにすぐに使用開始することができるので、その辺も便利です。

 

 

まずは、プラグインの検索窓にCrayon Syntax Highlighterを入力します。

 

 

記事内にソースコードを記述

 

 

インストールが完了したら、プラグインをすぐに有効化しておきましょう。

 

 

インストールした状態ですぐに使えるので、投稿画面に行きます。

 

 

Crayonのタブが追加されていることがわかるかと思います。

 

 

記事内にソースコードを記述

 

 

コードを挿入したい時にCrayonタブをクリックします。

 

 

記事内にソースコードを記述

 

 

「ここにコードを記入してください」の中にコードをそのままペーストして、挿入をクリックすれば、投稿に反映されます。

 

 

 

Crayon Syntax Highlighterの設定

 

 

Crayon Syntax Highlighterは設定項目がかなり多くあります。

 

 

デフォルトで十分使えますが、設定を変更していきたい方はお試しください。

 

 

記事内にソースコードを記述

 

 

私は、このCrayon Syntax Highlighterの設定項目の意味が分からない部分が多かったので、変更せずにデフォルトで使用しています。

 

 

これで、記事内にコードが書きやすく、見た目もスッキリしますね。

 

 

以上、WordPressで記事内にソースコードを記述できるプラグイン | 初心者向けでした。

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です