Sublime Text | Markdown Preview Plugin で Font-Awesome の Icon を利用できるようにする
概要
Sublime Text の Markdown Preview Plugin で Font-Awesome の Icon を利用できるようにします。
Markdown Preview Plugin のテンプレートカスタマイズ
Sublime Text のメニューの
- Preferences
- Package Settings
- Markdown Preview
- Setting - User
を選択し、下記のように編集することで任意のテンプレートを利用できます。
{
"html_template": "/path/to/your/template/markdown_template/template.html"
}
テンプレートを作成し、 Font-Awesome の CSS の Link タグを追加します
/path/to/your/template/markdown_template/template.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Markdown Preview</title>
<link rel="stylesheet" href="/path/to/your/css/github.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
{{ BODY }}
</body>
</html>
Use Font-Awesome Icon
- マークダウンを下記のように記述します。
# hoge
## <i class="fa fa-futbol-o" style="font-size:10em;"></i></i> hige
## <i class="fa fa-slideshare" style="font-size:10em;"></i></i> hage
- Preview を確認します
