WordPressにソースコードを埋め込む

更新日：2019年11月3日

こんにちは。
前回の記事から約一年ぶりの投稿となってしまいました・・・

技術系のブログやQiitaなど、ソースコードが埋め込まれたブログをよく目にします。

本ブログでも同じようなことをしたいため、方法を調べてみました。

ソースコードを埋め込む方法は大きく分けて２つ。

WordPressのプラグインを入れる
ソースコードからHTML＋CSSを生成してくれるサービスを使う

せっかくなので、どちらも試してみましょう。

まずはプラグインでソースコードを埋め込む方法。

「Crayon Syntax Highlighter」というプラグインを利用します。

プラグインを導入すると、記事の作成画面で新たなプラグインのボタンが表示されます。

ここからソースコードを作成。

変更をプレビュー・・・
あれ、背景は灰色に変わったけど、うまく反映されない・・・

WordPressの変更プレビューではうまく反映されませんでしたが、
公開するとうまく反映されていました。

以下、埋め込んだソースコード。
特に意味はありませんが、PythonでOSを判別するプログラムです。

# ライブラリのインポート
import os
 
# OS種別取得 mt / posix 
os_type = os.name
 
# OS名出力
if os_type == 'nt':
    print('Windows')
elif os_type == 'posix':
    print('Linux')

# ライブラリのインポート

import os

# OS種別取得 mt / posix

os_type = os.name

# OS名出力

if os_type == 'nt':

print('Windows')

elif os_type == 'posix':

print('Linux')

これこれ！
いい感じに埋め込みましたね！

次は２つ目の方法で、GitHubが提供しているGitHubGistというサービスを試してみたいと思います。

GitHubGist上でソースコードを公開、それを記事内のスクリプトで読み込むという流れです。

登録・ソースコードの公開は以下から。
GithubGist

GitHubのサービスなので、Gitとしての機能も使用できます。
（バージョン管理）

以下埋め込んでみた結果

どうですか？いい感じに埋め込めましたね。

今回は２パターン試してみましたが、一度プラグインを入れて使い方がわかってしまえば、プラグインのほうが手間が少なく簡単に感じました。

あえて使い分けるとすれば、

簡単に短いコードを埋め込みたいとき・・・プラグイン
長いコード、差分管理を行いたいコード・・・GitHubGist

という感じでしょうか。

これで技術系の記事が書きやすくなりました。

参考

WordPress 記事にソースコードを埋め込むテクニック＆プラグイン紹介

記事内にソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」