プログラムソース用WebフォントSource Code Proを使う

カテゴリー:  Tech タグ:  font

ソースコード表示用フォント

このサイトは基本的に Noto Sansを使っています が、英数字にも Noto Sans を指定して雰囲気を変えて見ました。

そうすると、ソースコードが見にくくなってしまいました。色々探してWeb フォントでソースコード表示に向いた Source Code Pro を使用するよう 変更して見ました。

Source Code Pro とは

Source Code Pro は、Adobe が開発し2012年に発表したソースコード表示用 のフォントです。

ソースコードの可読性を上げるため、I(アイ)、小文字のl(エル)、数字の1(イチ) 、数字の0(ゼロ)、O(オー)など他のフォントでは紛らわしいものを区別しやすく デザインしています。

当然モノスペースでインデントが揃うようになっており、ソースコードが把握 しやすくなります。

以下は、ソースコードの例です。

#!/usr/bin/python

# Print the contents of the files listed on the command line.

import sys

for fn in sys.argv[1:]:
    try:
        fin = open(fn, 'r')
    except:
        (type, detail) = sys.exc_info()[:2]
        print "\n*** %s: %s: %s ***" % (fn, type, detail)
        continue
    print "\n*** Contents of", fn, "***"

    # Print the file, with line numbers.
    lno = 0
    while 1:
        line = fin.readline()
        if not line: break;
        print '%3d: %-s' % (lno, line[:-1])
        lno = lno + 1
    fin.close()
print

どうでしょう？ 読みやすくないですか？

設定方法

Adobe Edge Web Fonts か、Google Fonts でSource Code Proの導入の設定を行います。 フォントを使用するためのスタイルシートやJavascriptを生成してくれます。

それをそのまま自分のWebサイトの設定に加えます。

Googleを使う場合、以下のようなコードが提示されるはずです。

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">

あとはスタイルシートに以下のような指定を加えるだけです。（AdobeとGoogleでは設定で示される Font Family名が違いますので注意ください）

font-family: 'Source Code Pro', monospace;

コメント

Comments powered by Disqus