こんにちは。
前回の記事から約一年ぶりの投稿となってしまいました・・・
技術系のブログやQiitaなど、ソースコードが埋め込まれたブログをよく目にします。
本ブログでも同じようなことをしたいため、方法を調べてみました。
ソースコードを埋め込む方法は大きく分けて2つ。
- WordPressのプラグインを入れる
- ソースコードからHTML+CSSを生成してくれるサービスを使う
せっかくなので、どちらも試してみましょう。
まずはプラグインでソースコードを埋め込む方法。
「Crayon Syntax Highlighter」というプラグインを利用します。
プラグインを導入すると、記事の作成画面で新たなプラグインのボタンが表示されます。
ここからソースコードを作成。
変更をプレビュー・・・
あれ、背景は灰色に変わったけど、うまく反映されない・・・
WordPressの変更プレビューではうまく反映されませんでしたが、
公開するとうまく反映されていました。
以下、埋め込んだソースコード。
特に意味はありませんが、PythonでOSを判別するプログラムです。
1 2 3 4 5 6 7 8 9 10 11 |
# ライブラリのインポート import os # OS種別取得 mt / posix os_type = os.name # OS名出力 if os_type == 'nt': print('Windows') elif os_type == 'posix': print('Linux') |
これこれ!
いい感じに埋め込みましたね!
次は2つ目の方法で、GitHubが提供しているGitHubGistというサービスを試してみたいと思います。
GitHubGist上でソースコードを公開、それを記事内のスクリプトで読み込むという流れです。
登録・ソースコードの公開は以下から。
GithubGist
GitHubのサービスなので、Gitとしての機能も使用できます。
(バージョン管理)
どうですか?いい感じに埋め込めましたね。
今回は2パターン試してみましたが、一度プラグインを入れて使い方がわかってしまえば、プラグインのほうが手間が少なく簡単に感じました。
あえて使い分けるとすれば、
簡単に短いコードを埋め込みたいとき・・・プラグイン
長いコード、差分管理を行いたいコード・・・GitHubGist
という感じでしょうか。
これで技術系の記事が書きやすくなりました。
参考
WordPress 記事にソースコードを埋め込むテクニック&プラグイン紹介
記事内にソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」