1. TOP
  2. wordpress

ソースコードを記事中に埋め込むwordpressプラグイン

    

環境

wordpress 4.4.2

はじめに

管理画面にログインしメニューより「プラグイン」を選択し、「Syntax Highlighter」といったキーワードでプラグインを検索するとコードを埋め込むようなプラグインを検索できる。

ここでは「Enlighter – Customizable Syntax Highlighter」を導入する。

インストール手順

1. インストールしたいプラグイン(Enlighter – Customizable Syntax Highlighter)について「今すぐインストール」ボタンを押下する。

2. インストール完了後、「プラグインを有効化」アンカをクリックする。

利用手順

Enlighterが有効になると、記事投稿画面に下記のボタンが追加される。

code1

このボタンを押下すると、コード挿入画面が表示される。

code2

ここで挿入するコードの言語や背景色、行番号の要否や埋め込むコードの指定を行う。コードを埋め込むと下記のように表示される。

code3

公開した後の表示は下記のようになる。

code4

デザインテーマ

コードの表示イメージを変更したい場合は表示テーマを管理画面のEblighterメニューでデフォルト値を設定できる他、投稿画面で「Enlighter Code Setting」を選択することで変更できる。

テーマ別の表示サンプルは、enlighterのサイトにて確認できる。( 右カラムメニューよりテーマを選択)
http://enlighterjs.org/Theme.Enlighter.html