記事にコードを掲載可能にする(プラグイン使用)のイメージ画像

AFFINGER5 Wordpress

【AFFINGER5】記事にコードを掲載可能にする(プラグイン使用)

記事にコードを掲載可能にする(プラグイン使用)のイメージ画像

AFFINGER5に限ったことではありませんが、Wordpressで記事にコードを掲載する際に使用しているプラグインとその使用方法を簡単にご紹介します。

Crayon Syntax Highlighterを有効化する

ダッシュボードメニューの「プラグイン」>「新規追加」から「Crayon Syntax Highlighter」で検索。

下の画像のプラグインを見つけたら「今すぐインストール」>「有効化」します。

Crayon Syntax Highlighterの使い方イメージ画像

記事にコードを埋め込む方法

ビジュアルエディタの場合

Crayon Syntax Highlighterの使い方のイメージ1

「<>」をクリックします。

テキストエディタの場合

Crayon Syntax Highlighterの使い方のイメージ2

「crayon」をクリックします。

コードを挿入

Crayon Syntax Highlighterの使い方のイメージ3

  1. 「Title」にタイトルを記入します
  2. 「Language」で言語を指定します
  3. 「Code」にコードを記入します
  4. 「Add」をクリックして挿入完了です。

※プラグイン「Amazon Link Builder」を使用していると競合してコードが表示されなくなるみたいなので、現状ではどちらかのプラグインを[停止]する必要があります。

  • この記事を書いた人

Ryo Endo

bakuDESIGN+代表。 フリーランスのデザイナー・映像クリエイターとして大阪を中心に活動。

-AFFINGER5, Wordpress
-