【WordPressプラグイン】ソースコードをスマートに埋め込む方法

スポンサーリンク
PHP
スポンサーリンク

はじめに

ブログで…

「プログラミングのソースコードを掲載して、情報を発信したい」

 

って時に、そのままブログに打ち込むわけにもいかないかと思います。

 

そんな時、初心者でもWordPressのプラグインを使えば…ソースコードを簡単にスマートに表示させることが可能になります。

 

そこで今回は…

WordPressのプラグインで、ブログ内にソースコードをスマートに埋め込む方法をお伝えします。

 

【WordPressプラグイン】ソースコードをスマートに埋め込む方法

使用するプラグインとは…

 

Crayon Syntax Highlighter』です。

 

1、まず、WordPressの管理画面から…

プラグイン→新規追加を選択してCrayon Syntax Highlighterを検索する。

【WordPressプラグイン】ソースコードをスマートに埋め込む方法1

インストールが完了したら有効化をする。

 

 

2、続いて投稿画面に行き…

テキストモードにする。

crayon』をクリック。

【WordPressプラグイン】ソースコードをスマートに埋め込む方法2

 

 

3、すると下記の画面になるので、タイトルと記載したいソースコードを入力して『Add』をクリックする。

【WordPressプラグイン】ソースコードをスマートに埋め込む方法3

面倒ですが…

エディタでソースコードを作成する際、Tabキーを使ってインデントを揃えたのなら…

再度、スペースを使って打ち直さないと、全行左揃えで表示されることになります。

 

ちなみに…

私が例として入力したソースコードは、簡単なクイズのアプリのものですが…

それが👇です。

修正したい時は、ビジュアルの画面上で埋め込んだソースコードの所をクリックし…

👇のコマンドをクリックすれば修正できます。

【WordPressプラグイン】ソースコードをスマートに埋め込む方法4

 

また、今回埋め込んだクイズのソースコードをブラウザで実行した画面が👇です。

ソースコード実行画面

こんな感じで実行されます。

 

私のような初心者には、ちょうど良いボリュームのPHPの練習だったので…

PHPを始めたばかり…って事でしたら、是非ご自身で入力して、実行したりカスタマイズしてみてください。

 

まとめ

以上、WordPressのプラグインで、ブログ内にソースコードをスマートに埋め込む方法をお伝えしました。

 

直接打ち込むのとは、全く見え方が違ってくるかと思いますので…ぜひご利用を検討してみてください。

 

お役に立てれば幸いです。

PHP
スポンサーリンク
スポンサーリンク
たすくをフォローする
スポンサーリンク
Tasublog

コメント