【WordPress】ソースコードを綺麗に表示する方法:Syntax Highlighter | 元インストラクターが教えます!超・初心者さん向けネットビジネスの始め方

ネットビジネス初めの一歩 ~初心者さん向け講座~

初心者講座

wordpress

賢威

【WordPress】ソースコードを綺麗に表示する方法:Syntax Highlighter

今回は、Wordpressの記事上に、htmlなどのソースコードを

綺麗に表示させる方法を解説したいと思います。

 

マルコは【Crayon Syntax Highlighter】を使用していたのですが、

最近見たら、【Crayon Syntax Highlighter】は検索しても

出てこなくなったようなので、代わりのものを探してみました。

それが、【Enlighter – Customizable Syntax Highlighter】です。

 

使い方はCrayon Syntax Highlighter とよく似ていて、

むしろ簡単になっている印象ですので、初めての方も使いやすいかと。

それでは、解説に入りましょう^^

【Enlighter – Customizable Syntax Highlighter】のインストール

WordPressのダッシュボードにログインしておきます。

①【プラグイン】をクリックし、

②【新規追加】をクリックします。

1

 

画面が切り替わったら、右上の【キーワード】欄に、

【Enlighter – Customizable Syntax Highlighter】と入力して、Enterキーを押します。

2

 

検索結果の中から【Enlighter – Customizable Syntax Highlighter】を探して

【今すぐインストール】をクリック。

4

 

少し待つとインストールが完了して下のような画面になるので

【プラグインを有効化】をクリックします。

5

これでプラグインのインストールは完了です。

画面を記事の投稿画面に切り替えましょう。

 

【Enlighter – Customizable Syntax Highlighter】の使い方

 

①投稿画面の中で、コードを表示させたい場所にカーソルを表示させます。

②【Enlighter Code Insert】というボタンをクリックします。

6

 

コードを挿入する画面が表示されます。

①赤枠の部分に表示させたいコードを入力またはコピペし、

②【OK】をクリックします。

他の部分はさわらなくて大丈夫です。

7

 

投稿画面では、下のように表示されます。

8

 

プレビューで見ると、こんな感じ。

コードが綺麗に表示されています。

9

 

コード上にマウスを合わせると、赤枠のようなボタンが表示されます。

このままでも良いのですが、邪魔に感じるようでしたら非表示にしましょう。

10

 

①ダッシュボードの【<>Enlighter】をクリックすると、プラグインの設定画面が表示されます。

②各ボタンのチェックを外すと非表示になります。

③【変更を保存】をクリックします。

11

 

これで完了です♪

英語表記なので一瞬ひきますが、意外と簡単ですね♪

それでは今回は、このへんで(@^^)/~~~

PS.

何か相談したいこと、聞きたいこと、雑談でも、ありましたら

遠慮なくお問い合わせください^^

心を込めてお返事させて頂きます。

【こんなことも教えて!】というご要望も絶賛募集中です!
↓↓↓
マルコにメッセージを送る

 

マルコは、パソコン1台でインターネットで収入を得て暮らしています。
そして、月収130万円を達成して、家庭を犠牲にして働きづめだった生活から、救われました。
ネットビジネスというと胡散臭いイメージがありますが、まっとうなビジネスもちゃんとあります。
そんなビジネスを解りやすく、1から解説していますので
良ければこちらもご覧ください♪♪
↓↓↓
マルコのネットビジネス初心者講座

コメントを残す

サブコンテンツ

このページの先頭へ