GitHubのGistのコードをWordPressブログに貼ってみた

gist_code_displayWordPress
Sponsored Links

Gistにソースコードを登録してブログに貼るとキレイに表示できるようなので試してみる

Sponsored Links
Sponsored Links

やってみた

できた!

Sponsored Links

やりかた

GitHubのアカウント作成

githubのアカウントが必要なので普通にアカウントを作成

無料のFreeプランでOK

Gistにコードを登録

「New Gist」からコードを登録

ファイル名にはソースコードの言語の応じた拡張子(extension)をつける

「Create secret gist」「Create public gist」のどちらでもよい模様

secretにしても検索にヒットしないだけらしい

WordPressに貼り付け

「Embed」のところの↓のようなscriptをコピペして、HTMLに貼り付ければそこに表示される

<script src="https://gist.github.com/wells12/be6562072b968306480a5feec1565c51.js"></script>

↓↓

↑↑

見た目の調整

デフォルトでもキレイに表示されてるけれど、CSSあてればスタイルの調整は可能

やりかたは…略

ちなみに整形済みテキストだと

gistではなく、HTMLの整形済みテキスト(<pre>タグ)だとこんな感じ↓

import os

def main():
  print('Hello python!')
  
if __name__ == '__main__':
  main()

見た目はスタイル次第

行数が表示されてないけど、シンタックスハイライト効くし、短いやつはこれでも十分


解散!

いいね! いいね??(1)
読み込み中...

Sponsored Links
Sponsored Links


WordPress
Sponsored Links
wells12
タイトルとURLをコピーしました