Wordpressのインストール・カスタマイズ・不具合の復旧致します。
サーバー移管・テーマのご提案等も可能です。Wordpressのトータルサポート
Wordpress

プラグイン無しでwordpressにソースコードを表示する方法

ご覧頂きありがとうございます。

更新もされていて使い勝手も良く、表示も綺麗なソースコード表示プラグインの定番

Crayon Syntax Highlighter

良いのですが、、、重いです。

今回はその代替えのご提案です。

 

 

Gist を使う(無料)

Github の Gist を使います。

なんとなく敷居が高いなと思っていたのですが使い方も簡単で使いやすいです。

ぜひご活用頂ければと思います。

 

 

登録手順と使い方

GitHub  https://github.com/

アクセスして頂いて、右上の「Sigh up」をクリック

 

github のサイトに登録

  1. 名前
  2. メールアドレス (認証メールが届くので正確に)
  3. パスワード

 

 

Unlimited public repositories for free」が選択されていることを確認し、「Continue」をクリック

 

 

「skip this step」をクリックします。

 

次にメールアドレスの認証をします。

 

 

メールアドレスの認証

今回は iPhone から認証してみました。

 

 

認証メールが届きます。

 

 

クリックしてアクセスし、ログインします。

 

 

ログインするとメールアドレスの認証が完了し登録が完了です。

 

 

埋め込みコードの作成

Gist で、埋め込み用のコードを作成します。

 

 

Gist にアクセス

ログインしてから、右上のところより「Your Gists」をクリック

 

コードの記述とスクリプトの作成

Gistの中で区別出来るようにわかりやすい名前にしましょう。

ファイル名は貼り付けた時にも表示されます。

今回は、.htaccess としています。

 

 

記入後、赤枠内の「非公開で保存」「公開して保存」のどちらかを選択します。

WordPress記事内にコードを表示するだけなので、どちらでも大丈夫です。

 

 

保存できると上記画面になります。

赤枠内のURLをコピーします。

 

 

記事への貼り付け、表示の確認

記事内にコードを貼り付けます。テキストエディタで貼り付けして下さい。
プレビューで確認後、位置などを調整して公開!!

 

プレビューでコードが表示されない時は、ブラウザの再読み込み(リロード)をして下さい。ちゃんと表示されます。
 
 

参考にさせて頂いたサイト様です。

https://nitobeitsuki.com/wordpress/

 

 

まとめ

wordpress や プラグインの更新も心配が一つ減ります。
表示も早くて、見易いですしハートマークが愛らしいです。

ご参考にして頂けると幸いです。

 

にほんブログ村 IT技術ブログ WordPressへ

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA