ソースコード用フォントを「VSCode」「はてなブログ」に設定する【SourceHanCode,RictyDiminished,FiraCode】

ソースコード用フォント

いろいろあるんだなー

developer.hatenastaff.com

RictyDiminished

github.com

FiraCode

github.com

SourceCodePro

fonts.google.com

SourceCodeProはAdobeから出てる「SourceHanCode」ほうが日本語が綺麗らしい

プログラミング用のフォントとしてAdobeの”Source Code Pro”を愛用していたけどコメントなどで日本語を打つと不自然になるのが課題だったけど日本語フォントに対応した版が同じくAdobeから出ていたらしい：https://t.co/HvBjTWj2tZ

— Hisatoshi TORIYA | 鳥屋剛毅 (@h1sat0r1) 2019年10月12日

github.com

VSCodeで変更

www.atmarkit.co.jp

taccuma.com

設定を開いて、検索で「fontfamily」ってしたら出てくる。

まさかのフォント名直打ち！

フォント名にスペースが入っているものは、'Ricty Diminished',　みたいに’でかこう。

'Ricty Diminished',

'Fira Code',

'SourceHanCodeJP-Light',

どのフォント名を入れたらいいの？

どれが正式なフォント名かよく分からない。

FiraCodeはファイル名はFiraとCodeくっついてるけど、正式名称は'Fira Code'って離すみたい

SourceHanCodeはダウンロードしたファイル名はSourceHanCodeJPなのに、XDとかで見ると源ノ角ゴシック Code JPになってる。

どちらを入れたらいいんだろう？こういうのって日本語フォントだけなのかな。

MacだとFontBookに出てる名前かな？

でもSourceHanCodeJは
'源ノ角ゴシック Code JP',も'Source Han Code JP,'も'SourceHanCodeJP,'もダメ

'SourceHanCodeJP-Light',というファイル名だといけた。

よく分からない・・・

www.koreyome.com

はてなブログのソースコード表記を変更

ブログのデザインCSSでwebフォントを取ってきたら変えられるって！

denpa-shinbun.com

元

今はこんなフォント。

何フォントだろう？ちゃんと区別つくから今のままでもいい。

自分用はてな記法スクリプト - トマシープが学ぶ

変える

デザインCSSに以下を書く。

.entry-content .code{
     font-family: "Source Code Pro", sans-serif; /* ここでフォントを指定 */
    font-size:70%;/* 本文よりも小さい方がソースコードは読みやすい */
}

私は既にいろいろ書いてあるので、コメントアウトで何の処理かを書くようにしている。

ヘッダにも以下を書く

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

変更後

↑SourceCodePro

↓元

どっちがいいかな？

0の真ん中に点があるの、０なのかoなのかわからない。

０と行ったら斜め線でしょ・・・って思う。

でも文字の幅はSourceCodeProの方が広くて好き。 

0o@1liI
using UnityEngine;
using Microsoft.MixedReality.Toolkit.Experimental.UI;
using UnityEngine.UI;

最後に

できた。なんだかんだすごい時間かかった。