プログラミング、ガジェット、趣味ネタを配信するブログ

Github WordPress ツール

GistでWordPressにソースコードを埋め込む方法

投稿日:2017年5月8日 更新日:

WordPressを使っているときにソースコードを表示させたいと思いましたので、
少し調べてみました。

「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」などのプラグインがあるかと思いますが、
動作が重かったり、他のプラグインと競合を起こして動かなかったりということがあるようです。

簡単にパッと使えるのないかなと思っていたら、Githubの「Gist」を見つけましたので
そちらを使用してみようと思います。

「Gist」とはブログなどのサイトにソースコードを埋め込むためのツールになります。

 

○ Gistを使用する方法

  1. GitHubのHPにアクセス、ログインした後、
    上部の「Gist」をクリックします。

     

  2. ファイルの作成画面が表示されますので、
    下記のような感じで、項目の入力を行います。
    入力が終わったら「Create public gist」ボタンをクリックします。

     

  3. 「Gist」用コードが作成されましたので、
    画面上部の赤枠をクリックして、Webに表示させるコードをコピーします。
    コピーしたコードをブログに貼り付けます。

     

    ※ブログに貼り付けると下記のような感じに表示されます。

 

「Gist」の使用方法は以上になります。
簡単なのでひとまず、こちらを使用していこうとおもいます。
また、問題などがあったらまとめていきます。

-Github, WordPress, ツール

執筆者:


comment

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

関連記事

WordPressでアフィリエイトサイト用テーマをインストールする方法

ロリポップサーバーにWordPressのインストールが終わったので、 アフィリエイトサイト仕様に変更していこうと思います。 今回はSEOにも強くアフィリエイトについても考えられているテーマの 「Sti …

PNGGauntletで画像圧縮

画像ファイルを容量を減らす時に使用している「PNGGauntlet」の インストール手順と使い方を簡単に紹介します。 画像圧縮ツールは、色々あると思いますがこの「PNGGauntlet」は一括で 複数 …

【Github】VSCodeでGithubにpushするとアクセスエラーが出る問題の対処

VSCodeからGithubにPushしようとした際に下記のエラーが出たので対処方法をまとめました。 fatal: unable to access ‘[GithubのURL]’: Peer’s Ce …

no image

ローカルでWordPressの記事を編集し投稿する手順

OpenLiveWriterをインストール https://openlivewriter.com/ からOpenLiveWriterをダウンロードして実行します 下記の手順で設定していきます。 Nex …

GitとGithubの違いについて

Githubの登録を行い使用していこうと思っているのですが、 Gitという機能もあるようで、その違いが何なのかわからなかったので 調べてみました。 ○ 「Git」と「Github」の違い いきなり結論 …

スポンサー 人気記事 最近の投稿