Help us understand the problem. What is going on with this article?

Sublime Text | Font Awesome のタグを snippet 化して楽に入力する

More than 3 years have passed since last update.

Sublime Text | Font Awesome のタグを snippet 化して楽に入力する

概要

Sublime Text で Font Awesome のタグを楽に入力するために、snippet を作成します。

Snippet 生成スクリプト

仕様

  • Font-Awesome の Web サイトからスクレイピングで icon 名を取得する
    • 抽出条件は i タグ かつ class に fa を含むもの
  • 1 icon 1 ファイルで Snippet を出力する
    • ファイル名は < icon 名>.sublime-snippet
    • ファイル内容は下記 ( fa-adjust の例)
<snippet>
  <content><![CDATA[
<i class="fa fa-adjust" style="font-size:1em;"></i>
]]></content>
  <tabTrigger>fa-adjust</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa fa-adjust</description>
</snippet>
  • ついでに全アイコンとアイコン名の表示サンプル HTML を出力する

Snippet 生成スクリプト

require 'open-uri'
require 'nokogiri'
require 'erb'

module FontAwesome
  module SublimeText
    URL = 'http://fortawesome.github.io/Font-Awesome/icons/'
    OUTPUT_DIR = 'fontawesome_snippets'
    OUTPUT_SAMPLE_DIR = 'fontawesome_samples'

    class Generator
      def self.bulk_output(klasses)
        Dir.mkdir(OUTPUT_SAMPLE_DIR) unless Dir.exist?(OUTPUT_SAMPLE_DIR)
        sample_html = apply_sample_html(klasses)
        output_sample_html(sample_html)

        Dir.mkdir(OUTPUT_DIR) unless Dir.exist?(OUTPUT_DIR)
        klasses.each do |klass|
          generator = Generator.new(klass)
          snippet = generator.apply_snippet
          generator.output_snippets(OUTPUT_DIR, snippet)
        end
      end

      def self.apply_sample_html(klasses)
        samples = klasses.map do |klass|
          format("<tr><td><i class='fa %s' style='font-size:3em;'></i></td><td>%s</td></tr>", klass, klass)
        end.join("\n")

        template =<<-EOS
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Font Awesome Samples</title>
  <link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <style type="text/css">
  body {
    font-family: Crete Round, Arial, serif;
  }
  h1  {
    width: 400px;
    margin: 0 auto;
  }
  table {
    width: 400px;
    margin: 0 auto;
  }
  td {
    text-align:left;
  }
  </style>
</head>
<body>
  <h1>Font Awesome Samples</h1>
  <hr>
  <table>
  <%=samples%>
  </table>
</body>
</html>
        EOS
        ERB.new(template).result(binding)
      end

      def self.output_sample_html(sample_html)
        File.open("./#{OUTPUT_SAMPLE_DIR}/fontawesome_samples.html", "w:utf-8") do |e|
          e.puts(sample_html)
        end
      end

      def initialize(klass)
        @klass = klass
      end

      def apply_snippet
        klass = @klass
        template =<<-EOS
<snippet>
  <content><![CDATA[
<i class="fa <%=klass%>" style="font-size:1em;"></i>
]]></content>
  <tabTrigger><%=klass%></tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa <%=klass%></description>
</snippet>
        EOS
        ERB.new(template).result(binding)
      end

      def output_snippets(output_dir, snippet)
        File.open("./#{output_dir}/#{@klass}.sublime-snippet", "w:utf-8") do |e|
          e.puts(snippet)
        end
      end
    end
  end
end

charset = nil
html = open(FontAwesome::SublimeText::URL) do |f|
  charset = f.charset
  f.read
end

doc = Nokogiri::HTML.parse(html, nil, charset)
klasses = doc.xpath('//i[contains(@class,"fa")]')
   .map { |e|e.attributes.first.last.value }
   .map { |e|e.split(' ') }
   .select { |e|e.size === 2 }
   .map { |e|e[1] }
   .to_a
   .uniq
   .sort

FontAwesome::SublimeText::Generator.bulk_output(klasses)

出力内容

  • Snippet 出力例
<snippet>
  <content><![CDATA[
<i class="fa fa-adjust" style="font-size:1em;"></i>
]]></content>
  <tabTrigger>fa-adjust</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa fa-adjust</description>
</snippet>

samples.png

参照

Font-Awesome の Web サイト
Subilme Text Font Awesome Snippets GitHub

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした