はじめに

なりゆき

Markdownで資料を作るという作業が発生したのですが、見栄えが悪いということで、せめてFont Awesomeを使うかという話になりました。

その際、ちょっとハマったので、自分用のメモと同じことをやりたい方向けにこの記事を書くことにしました。

Font Awesomeとは？

こちらです！

fontawesome.com

ざっくりいうと、文字と同じ扱いで（Twitterとかの）アイコンを表示してくれるサービスです。（※自分は開発で使ったことがない）

詳細やどんな使い方ができるん？というのを知りたい方はこちらからどうぞ！

saruwakakun.com

本題

使用するリポジトリ

こちらになります。

github.com

VSCodeユーザーなら、Download後、readme.mdをプレビューやPDF出力していただければ、そのままFont Awesomeが使えることが確認できるようになっています。

手順

では手順を書いていきます。

Font Awesomeのダウンロード

Font Awesome - Downloadページを開きます。

f:id:kic-yuuki:20190303152307p:plain

Free fot Webをクリックし、圧縮ファイルをダウンロードします。ダウンロード完了後に展開したフォルダ一式は、Markdownを書くディレクトリ配下に配置します。

こんなディレクトリ階層になるイメージです。

vscode-markdown-fontawesome
├── fontawesome-free-5.7.2-web
└── readme.md

ワークスペース用settings.jsonの編集

コマンドパレット（メタ＋Shift＋P）を開き、"setting"と入力するとこのような候補が表示されると思います。

f:id:kic-yuuki:20190303153143p:plain

基本設定: ワークスペース設定を開くをクリックします。その後、開かれた設定ウィンドウの検索テキストエリアに"json"と打ち込みます。

f:id:kic-yuuki:20190303153323p:plain

すると"settings.json で編集"というリンクが表示されます。こちらをクリックし、表示された.vscode/settings.jsonに以下"markdown.styles"の設定を追記、保存します。

.vscode/settings.json

{
  "markdown.styles": [
    "./fontawesome-free-5.7.2-web/css/all.min.css"
  ]
}

これにより、作業中のワークスペース配下で記述するMarkdownに対して、Font Awesomeが有効になります。

注意「絶対パスはダメ、相対パスを入力すること」

「"markdown.styles"への設定を絶対パスにすれば、どのワークスペースでも有効になるじゃん」という意見もあると思います。（私も同じことを考えました。）

ただ、VSCode側で絶対パスの指定を禁じているみたいで、絶対パスを指定するとFont Awesomeが有効になりませんでした。

禁じられている理由はこちらの記事が参考になりました。ありがとうございました！

neos21.hatenablog.com

Markdownプレビュー、PDF出力

では、試しに以下をmdファイルに入力してプレビュー表示させてみます。

# markdownでfontawesomeを使うよ in VSCode

## サンプル

- <i class="fab fa-twitter"></i> [Twitter - ざき](https://twitter.com/zucky_zakizaki)
- <i class="fas fa-sticky-note"></i> [note - ざき](https://note.mu/zucky_zakizaki)
- <i class="fa fa-fw fa-map-marker"></i> [野毛（桜木町の裏の主役）](https://ja.wikipedia.org/wiki/%E9%87%8E%E6%AF%9B%E7%94%BA)