ブログの記事内でソースコードをエディタ風に表示するにはどうするの？よく使われている「シンタックスハイライター」は、レンタルブログでは導入が難しいよね。そこで今回は、CSSだけでソースコードをきれいに表示する方法を紹介するよ！
こんにちは、ちうぱんです。
一般的にブログ内でソースコードを表示する場合、シンタックスハイライターやGistを使ってる人が多いと思います。
しかし、シンタックスハイライターはウェブサーバーにファイルをアップロードする必要があるのでレンタルブログでは難しいし、GistはGitHubの利用が前提となるので普通のブロガーさんには敷居が高い（≒面倒）ですよね。
そこで今回は、CSSだけでソースコードをエディタ風に表示する方法を共有します。
これは簡単！CSSだけでエディタ風にソースコードを表示してみよう
論より証拠ということで、はじめに以下のコードを使って実例を示します。
ol.code-writer{
position:relative;
margin-left: 0px;
padding:30px 20px 10px 45px;
border:none;
background:#2F3437;
}
CSSだけでエディタ風にソースコードを表示する
CSSを1箇所に設定するだけで、エディタ風にソースコードを表示できます。
- ol.code-writer{
- position:relative;
- margin-left: 0px;
- padding:30px 20px 10px 45px;
- border:none;
- background:#2F3437;
- }
シンタックスハイライター風に着色も可能
ブログ記事内のテキストにCSSを設定しているだけなので、テキストを着色すればシンタックスハイライター風にすることもできます（ここは手動です）。
- ol.code-writer{
- position:relative;
- margin-left: 0px;
- padding:30px 20px 10px 45px;
- border:none;
- background:#2F3437;
- }
行番号は「番号付きリスト」なので、ソースコードのコピー＆ペーストも可能
上に表示したソースコードをコピペしてみてください（範囲選択してもらうだけでもOKです）。
行番号の部分はコピーできませんよね？
手前味噌ですが、ここがミソです。
行番号はHTML（番号付きリスト）で表示しているので、ソースコードをそのままコピー＆ペーストして利用することが可能です。
設定や手順とその解説など
それでは以下に具体的な設定方法について説明します。<head>タグとCSSの設定は最初の一度だけなので、とても簡単に使えると思いますよ。
＜head>タグ内に以下のコードをコピペ
左上のラベル内でFontAwsomeによるアイコンを使うための設定です。下記のコードをコピーし、<head>タグ内にコピーしてください。なお、アイコン不要であれば、この部分は省略可です。
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
スタイルシートにCSSをコピペ
まずは以下のコードをスタイルシートにまるっとコピーしてください。
- ol.code-writer{ /* クラス名は任意（以下同）*/
- position:relative;
- margin-left: 0px;
- padding:30px 20px 10px 45px;
- border:none;
- background:#2F3437;
- }
- ol.code-writer:after{ /* 左上のラベル部分 */
- position: absolute;
- font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
- content: '\121 code'; /* f121はアイコンの番号 */
- position: absolute;
- top: 0px;
- left: 0px;
- padding: 5px 10px;
- background: #969998;
- line-height: 1;
- font-size: 0.9em;
- color: #fff;
- }
- ol.code-writer li{ /* 行番号とコードの間のライン */
- padding-left:15px;
- border-left:1.5px solid #000000;
- color: #fff;
- }
（11行目を修正しました（121の前に \ を挿入）。事務リーダーさんコメントありがとうございました）
なお、左上のラベル部分で使用しているアイコンは、FontAwsomeを利用しています。FontAwsomeの使い方とコーディングについては、下記のサイトを参照させていただきました。
表示したいソースコードに「番号付きリスト」とクラス名を設定
表示したいソースコードに「番号付きリスト」とCSSで指定したクラス名を設定してください。<li>-</li>を一つ一つ手入力するのは大変ですが、一般的なブログエディタならリスト表示ボタンで一発だと思います。
htmlで表示したとき、以下のようになれば完成です。
- <ol class="code-writer">
- <li>ol.code-writer{</li>
- <li>position:relative;</li>
- <li>margin-left: 0px;</li>
- <li>padding:30px 20px 10px 45px;</li>
- <li>border:none;</li>
- <li>background:#2F3437;</li>
- <li>}</li>
- </ol>
解説は以上となります。
コードを加工すれば、行番号を削除したり、FontAwsomeのアイコンを変更することも可能です。ブログのデザインに合わせて調整してみてください。
もし挙動におかしい点があれば、コメントにご連絡いただければ助かります。
というわけで、以上っ！
