IT系のネタや知識をアウトプットしたかった

Knowledge-IO

IT系

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

更新日:





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

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

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

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

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

 

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


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

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

 

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

 

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

 

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

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

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

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


 

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

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

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

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

 

以下埋め込んでみた結果

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


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

 

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

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

という感じでしょうか。

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

 

 

参考

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

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




-IT系

Copyright© Knowledge-IO , 2023 All Rights Reserved Powered by STINGER.