WordPress オススメプラグイン

プログラムを書こうとしたら、コードが綺麗に表示出来ない。

なので、プラグインを入れてコードを綺麗にする方法をまとめました。

 

プログラムのコードを綺麗に表示する方法

プラグインなし

<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<h1>タイトル</h1>
<p>本文</p>
</body>
</html>

プラグインあり

プラグインインストール

プラグイン ➡︎ 新規追加 ➡︎ プラグインの検索 ➡︎ 【Crayon Syntax Highlighter】入力 ➡︎

Crayon Syntax Highlighterをインストール ➡︎ 有効化

プラグイン使用手順

テキストをクリック

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_15_44_11

ソースコードを書きたいところにカーソルを移動

crayonをクリック

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_15_49_20

ウィンドウが表示される

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-26-15-57-14

Language 言語を選択

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_15_52_40

Code ソースコードを入れる

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_15_52_40

あとは好みで変更する

私の場合、下記のようにヘッダー部分にカーソルを当てると灰色の部分が出て本文と重なるのが嫌なので、

出ないように変更します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-26-16-09-13

Toolbarの項目の、Display the ToolbarをNeverに変更します

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_16_14_22

すると下記のようになります

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-26-16-19-35

変更が終了したら、Addをクリックし完了

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-26_15_57_14

 

投稿者: samancha