記事にソースコードを直接書き込む方法

ソースコードを表示される方法は大きく分けて2種類あります。今読んでいる記事にコードを直接書き込む方法と、ウェブサービスを利用して埋め込む方法です。今回は、1つのエディタで完結できる「記事にコードを直接書き込む方法」について紹介します。

はじめに

まず、codeタグでソースコードを囲んで、コンピュータがコードだと理解できるようにします。

コードをそのまま記事にコピペすると、次のような違いがあります。

  • 改行が維持されない。
  • 背景色がなく見ずらい。
  • 文字が読みづらい。
  • シンタックスハイライトがついていない。

ソースコードを表示する

記事はHTMLコードで書かれているので、そのままコピペしても表示されません。
ビジュアルエディタにコピペすると、テキストエディタではエスケープされた文字が表示されます。

後日、ソースコードもきれいに表示されるように何らかの対応をします。
※現在は技術不足でJavaScriptがわかりません。勉強してコードの改善ができましたら記事にまとめますので、それまでお待ちください。
改善策としては「HTMLコードをそのまま表示させたい」が参考になると思います。

改行を維持する

改行する役割はbrタグが担っていますが、毎回ソースコードの改行位置にbrをつけるのは手間です。preタグを使って、レイアウトをそのまま反映させましょう。

シンタックスハイライトをする

シンタックスハイライトとは、テキストの一部分を分類ごとにカラーリングすることです。
ソフトやテーマによってカラーリングが違うので、ソースコードがわかりやすいように、私のサイトではシンタックスハイライトは導入しません。

導入する際は、以下の「code-prettify」がおすすめです。

codeタグのスタイル改善

ダウンロード版の「code-prettify」を導入した方は、テーマ指定で背景色なども既についていると思うので、次の項目へ移動してください。

ここからは、CSSに書き込んでソースコードの表示を編集していきます。

このサイトは以下のようになっています。これはボックスデザインについて実際に書いてみると理解できるようになります。
code {
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
display: block;
padding: 1em 2em;
margin: 2em 0;
color: #fff;
background: #505050;
}

カスタマイズする

このサイトで採用しているものと採用していないものが一緒に紹介されていますが、必要になったとき使うためのメモみたいなものです。採用したいものがあったら、コピペしてみてください。

エディタ調のフォントで表示する

ソースコードを読みやすくするに、フォントにも気を配ります。タイトルを明朝体にして内容をゴシック体にするとメリハリがついてわかりやすいように、ソースコードも記事とは異なるフォントを使うとぱっと見つけやすくなります。用途にあったフォントを選択しましょう。
code {
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

ソースコード表示幅を変更可能する

必要に応じてソースコードの幅を手動で伸ばせるようにします。ソースコード枠の右下をドラッグすることで、サイズの可変ができます。

CSSのresizeプロパティで要素のサイズを自由に変更できるようにします。指定する値によって、縦、横、全方向を選択することができます。

このサイトでは横方向のみ変更可能としています。
code {
overflow: auto;
resize: horizontal;
}

まとめ

ソースコードを見ればだいたいのことは理解できるようになるので、表示には気を配りましょう。

「Gist」や「CodePen」などのウェブサービスを利用して埋め込む方法もあるので、好みに合ったやり方でソースコードを表示しましょう。

コメント