ブログ PR

リッチなソースコードをブログに載っける方法

  /
記事内に商品プロモーションを含む場合があります

この記事では、ブログにソースコードを記述する方法を解説します。

技術系ブログとソースコードは切っても切れない関係です。

しかし、単純にpreタグ + codeタグを使って書くだけでは、キーワードや関数名などをハイライトしてくれないので見た目がしょぼく見づらいものとなってしまいます。

例えば以下のような感じです。(色やpaddingを変えればもう少しマシにはなる)

s = 'test'
print(s)

しかし、prismを使えば以下のような感じ。

s = 'test'
print(s)

GitHub Gistを使えば以下のような感じでソースコードを記述できます。

見た目が貧相だと説得力も薄れてしまうので「prism」、または「GitHub Gist」を使ってリッチなソースコードをブログにのっけましょう！

もくじ
  1. prismを使う
  2. GitHub Gistを使う
  3. まとめ

prismを使う

Prismは軽量なシンタックス・ハイライターです。Prismを使うことでブログにリッチなソースコードを記述することができます。

特徴
  • 使用する言語や機能を自分で選んで追加できる
  • ブログに直接ソースコードを書く必要がある
  • 不安定な部分もある(更新されてないプラグインが原因？)

いま一度どんな見た目だったのか見ておきましょう。と言ってもテーマが 8こぐらい用意されているのでデザインの幅はかなり広いです。

# コメント

s = '文字列'
print(s)

それでは、prismを使ってみましょう！

prismのダウンロード

以下のリンクからprismのダウンロードページに飛べます。

LinkPrism - Download

飛んだらまずはThemes（テーマ）を選択します。ちなみに、僕が使っているのは「Tomorrow Night」というテーマです。サイトの下の方にプレビューがあるので確認してください。

次に使用する言語にチェックを付けます。

さらに使用したいプラグインにチェックを付けます。僕は「Copy to Clipboard Button」のみ入れています。どんなプラグインか分からない時はリンクをクリックすると説明が出てきます。

デザインを確認して良ければ「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックします。

これでprismを使うためのファイルがダウンロードできたので次に配置していきます。

prismの配置

先程ダウンロードした2つのファイルをサーバーにアップロードします。使っているテーマやサーバーが異なるので一概には言えませんが、ここでは子テーマに配置する方法を解説します。

バックアップを取っておきましょう！

1. ファイルマネージャー的なものを使って子テーマに「css」と「js」という名前のフォルダを追加し、先程ダウンロードしたファイルを置きます。ちなみに子テーマは、ドメイン名public_htmlwp_contentthemes子テーマ名 にあります。

2. 次に子テーマフォルダ内のfunction.phpを探します。無ければ作ってください。

3. 先ほどのfunction.phpに以下のコードを追加します。

//prismの読み込み
add_action( 'wp_enqueue_scripts', 'prism_enqueue' );
function prism_enqueue() {
        wp_enqueue_style('prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
        wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/js/prism.js');
}

これでprismが使える状態になりました。

ソースコードを書く

prismを使ってソースコードを記述するには以下のようなタグを使います。

<pre class="language-markup"><code>

何かしらのコード

</code></pre>

使用する言語を変更するにはpreタグのクラスを"language-xxx"と変更すれば良いだけです。("language-python"や"language-ruby"みたいな感じ)

AddQuicktagなどのプラグインに上記のタグを登録しておくと楽です

そしたら投稿編集画面でテキストに変更し、タグとソースコードを記述します。

すると、以下のような感じのソースコードが書けます。

s = 'test'
print(s)

これでprismを使ってブログにソースコードを書けるようになりました。

GitHub Gistを使う

GistとはGitHubのサービスの一部でソースコードを保存および公開することが可能です。

特徴
  • GitHubに登録していれば使える
  • 全て?の言語に対応可能
  • 基本的に1つのソースコードには1つのGistを作成する

それでは、GitHub Gistを使ってブロブにソースコードを貼り付けてみましょう！

会員登録

Gistを使用するには GitHub に会員登録する必要があります。まだ登録してない方は以下のリンクから登録してください。

LinkGitHub Japan | GitHub

Gistの作成

Gistを作成するには、GitHubの右上の「+」を押して「New gist」をクリックします。

すると、Gistを作成するページに遷移します。

①: Gistの説明。書かなくてもよい。
②: ファイル名。拡張子もちゃんと書く。
③: コードを書く。ファイルをドラッグ&ドロップすることもできる。
④: オプション。インデントやコードを折り返すかどうかを設定できる。
⑤: 作成ボタン。secret(非公開)かpulic(公開)で作成できる。

ファイル名、ソースコードを書いてCreateボタンをクリックしてください。公開、非公開どちらでも構いません。

これでGistを作成できました。

Gistをブログへ貼り付ける

Gistページの右上らへんのスクリプトをコピーします。

以下のようなスクリプトです。

<script src="https://gist.github.com/yumarublog/812270104083c794e1fffbe3eca07e42.js"></script>

このスクリプトをブログにテキストとして貼り付けるだけで、以下のようなソースコードを表示することができます。

これでGistを使ってブログにソースコードを表示することができました。

まとめ

この記事では、ブログにソースコードを表示する方法を解説しました。

どちらも一長一短なのでこっちを使った方が良いというのはありません。なので、状況によって使い分けたり、デザインや使いやすさでお好みの方を使ってください。

また、フロントエンド(HTMLやCSSなど)の場合はCodePenもおすすめです。

それでは今回の内容はここまでです。ではまたどこかで〜( ・∀・)ﾉ

関連記事はこちら