【2019年最新】WordPressでソースコードをきれいに埋め込む方法

スポンサーリンク
Wordpress
スポンサーリンク

ソースコードを記事に載せる場合は、Crayon Syntax Highlighterというプラグインがおすすめです。最近、Wordpressのエディタ画面が変更されて、戸惑っている方も多いと思います。本記事では、新しいエディタ画面での操作方法を画像を使って説明します。

スポンサーリンク

Crayon Syntax Highlighterのインストール

左サイドバーのプラグイン→新規追加を選択します。

検索欄に「Crayon Syntax Highlighter」と入力し、インストールします。

投稿編集画面での操作

投稿編集画面に移動します。左上にあるプラスボタンをクリックします。

フォーマット→ソースコードを選択します。

下のようなブロックが追加されるので、何かコードを打ち込んでみます。

打ち込んだコードをプレビュー画面で確認してみましょう。下のようにコードがエディタ形式で表示されていればOKです。

補足: デザインの変更

左サイドバーの設定→Crayonを選択します。

こちらの設定画面で、テーマやフォントを変更することができます。私はテーマを「Github」、フォントを「Monaco」に設定しています。赤枠で囲った部分をお好みのものに変更してください。

タイトルとURLをコピーしました