この記事では、ブログにソースコードを記述する方法を解説します。
技術系ブログとソースコードは切っても切れない関係です。
しかし、単純にpreタグ + codeタグを使って書くだけでは、キーワードや関数名などをハイライトしてくれないので見た目がしょぼく見づらいものとなってしまいます。
例えば以下のような感じです。(色やpaddingを変えればもう少しマシにはなる)
s = 'test'
print(s)しかし、prismを使えば以下のような感じ。
s = 'test'
print(s)GitHub Gistを使えば以下のような感じでソースコードを記述できます。
見た目が貧相だと説得力も薄れてしまうので「prism」、または「GitHub Gist」を使ってリッチなソースコードをブログにのっけましょう！
Prismは軽量なシンタックス・ハイライターです。Prismを使うことでブログにリッチなソースコードを記述することができます。
いま一度どんな見た目だったのか見ておきましょう。と言ってもテーマが 8こぐらい用意されているのでデザインの幅はかなり広いです。
# コメント
s = '文字列'
print(s)それでは、prismを使ってみましょう！
以下のリンクからprismのダウンロードページに飛べます。
LinkPrism - Download
飛んだらまずはThemes（テーマ）を選択します。ちなみに、僕が使っているのは「Tomorrow Night」というテーマです。サイトの下の方にプレビューがあるので確認してください。
次に使用する言語にチェックを付けます。
さらに使用したいプラグインにチェックを付けます。僕は「Copy to Clipboard Button」のみ入れています。どんなプラグインか分からない時はリンクをクリックすると説明が出てきます。
デザインを確認して良ければ「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックします。
これで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"みたいな感じ)
そしたら投稿編集画面でテキストに変更し、タグとソースコードを記述します。
すると、以下のような感じのソースコードが書けます。
s = 'test'
print(s)これでprismを使ってブログにソースコードを書けるようになりました。
GistとはGitHubのサービスの一部でソースコードを保存および公開することが可能です。
それでは、GitHub Gistを使ってブロブにソースコードを貼り付けてみましょう！
Gistを使用するには GitHub に会員登録する必要があります。まだ登録してない方は以下のリンクから登録してください。
Gistを作成するには、GitHubの右上の「+」を押して「New gist」をクリックします。
すると、Gistを作成するページに遷移します。
①: Gistの説明。書かなくてもよい。
②: ファイル名。拡張子もちゃんと書く。
③: コードを書く。ファイルをドラッグ&ドロップすることもできる。
④: オプション。インデントやコードを折り返すかどうかを設定できる。
⑤: 作成ボタン。secret(非公開)かpulic(公開)で作成できる。
ファイル名、ソースコードを書いてCreateボタンをクリックしてください。公開、非公開どちらでも構いません。
これでGistを作成できました。
Gistページの右上らへんのスクリプトをコピーします。
以下のようなスクリプトです。
<script src="https://gist.github.com/yumarublog/812270104083c794e1fffbe3eca07e42.js"></script>このスクリプトをブログにテキストとして貼り付けるだけで、以下のようなソースコードを表示することができます。
これでGistを使ってブログにソースコードを表示することができました。
この記事では、ブログにソースコードを表示する方法を解説しました。
どちらも一長一短なのでこっちを使った方が良いというのはありません。なので、状況によって使い分けたり、デザインや使いやすさでお好みの方を使ってください。
また、フロントエンド(HTMLやCSSなど)の場合はCodePenもおすすめです。
それでは今回の内容はここまでです。ではまたどこかで〜( ・∀・)ﾉ