ブログでコードを表示する際、Gistを使っています。
簡単にコード表示ができますし、共有もしやすい。
しかし、1行2行のコードをいくつか表示させるにはちょっと面倒くさい。
ということで、コードの表示方法を探してみました。
▼ Google-code-prettifyを利用する
こちらのページにいい感じの方法がありました。
Google-code-prettifyを使います。
利用方法は思っているより簡単です。
- headタグ内にGoogle-code-prettifyのスクリプトを入れる
- 本文のコードを表示させたい部分をpreタグで囲みprettyprintクラスにする
Google-code-prettifyのコードはこちらです。
これを</head>に入れます。
<!-- Google-code-prettify --> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script> <!-- /Google-code-prettify -->
そして、コードを表示させたい部分は以下のように記述します。
<pre class="prettyprint">コード</pre>
手軽ですし、だいぶわかりやすくなりました。
以前、私がアップしたコードを表示してみます。
import spotipy
from spotipy.oauth2 import SpotifyClientCredentials
client_id = 'SPOTIPY_CLIENT_ID'
client_secret = 'SPOTIPY_CLIENT_SECRET'
birdy_uri = 'spotify:artist:7lbSsjYACZHn1MSDXPxNF2'
spotify = spotipy.Spotify(
client_credentials_manager=SpotifyClientCredentials(client_id, client_secret))
results = spotify.artist_albums(birdy_uri, album_type='album')
albums = results['items']
while results['next']:
results = spotify.next(results)
albums.extend(results['items'])
for album in albums:
print(album['name'])
だいぶわかりやすくなりました。
▼ 外部リンクをわかりやすくしたい
あと、外部リンクがわかりにくいと思っていました。
外部リンクの表示も以下のように改善しました。
記述するコードはこちら
<div style="display:inline-block; padding: 0.5em 1em; margin: 0.5em 0; color: #2c2c2f; background: #dbdbdb; border-radius: 10px;">
<i class="fas fa-external-link-alt"></i> <a href="#">タイトル</a>
</div>
例：内部リンク時のFont Awesomeはこちら
<i class="fas fa-link"></i>
これで見た目がだいぶ改善した気がします。
以下のサイトを参考にさせていただきました。
見出し
追記：ついでに、見出しも少しわかりやすくしました。
見出しの上下にアンダーラインをひきました。
<h2 style="display:inline-block; border-top: solid 2px black; border-bottom: solid 2px black; padding:0.5em 1.5em 0.5em 1em;">▼ 見出し</h2>