コードと外部リンクをキレイに表示したい（Google-code-prettify）

日付:

ブログでコードを表示する際、Gistを使っています。

簡単にコード表示ができますし、共有もしやすい。
しかし、1行2行のコードをいくつか表示させるにはちょっと面倒くさい。

ということで、コードの表示方法を探してみました。

▼ Google-code-prettifyを利用する

こちらのページにいい感じの方法がありました。

Google-code-prettifyを使います。

利用方法は思っているより簡単です。

  1. headタグ内にGoogle-code-prettifyのスクリプトを入れる
  2. 本文のコードを表示させたい部分を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>