当ブログはしばらく

  • Hugo で構築していて
  • Atom を使って記事を書く

というスタイルでやっています。


前回、Hugo に Shortcode を追加して、表現力をアップさせるという記事を書きました。

[Hugo] Shortcode を活用する
静的サイトジェネレーター Hugoにはよく使うものをShortcodeとして登録しておくことができます。このShortcodeを活用してカスタムテンプレートを使いこなすと、ブログ表現が広がります。
atuweb 開発ブログ

Atom は 最初から Markdown に対応 ? していて多機能なため、ブログを書く時に重宝しています。

しかしまあ、Hugo の Shortcode は、さすがに自分でスニペットを足してあげる必要があるため、追加手順をまとめます。

スニペットの追加方法

設定ファイルを開く

Atom メニュー スニペット
Atom メニュー スニペット

Atom メニューの「スニペット」クリックで、 設定ファイル snippets.cson を開きます。

このファイルに、スニペットを書き足していけば OK です。

フォーマット

次の通り、 snippets.cson に例が示されています。

1# An example CoffeeScript snippet to expand log to console.log:
2#
3# '.source.coffee':
4#   'Console log':
5#     'prefix': 'log'
6#     'body': 'console.log $1'

噛み砕くと、次の感じです。

1'ファイル形式';
2  'スニペット名':
3    'prefix'; 'スニペットの呼び出しキー'
4    'body': 'スニペットの内容'

ファイル形式については後述します。

スニペット名は任意なので、自分がわかるもので OK です。

また、呼び出しキーは、短くて覚えやすいものが良いです。
使いやすくないと意味ないですから。

ファイル形式

Atom では「 どの拡張子のファイルで有効にするスニペットか 」として、「ファイル形式」を用います。

このファイル形式は '.source.js' のように指定するのですが、拡張子とイコールではない点に注意が必要です。


ファイル形式は次のようにして調べます。

  • 対象のファイルを開いて
  • そのファイルがアクティブな状態で
  • Scopes at Cursor を開く

すると、次のダイアログがポップします。

Atom Scopes at Cursor
Atom Scopes at Cursor

Scopes at Cursor は次のショートカットキーで呼び出してください。

Mac cmd + option + p
Windows ctrl + alt + shift + p

Markdown のファイル形式は .source.gfm であることが確認できました。

追加したスニペットの例

必要なパーツが揃ったので、スニペットを追加します。

今回はこんな感じになりました。

1'.source.gfm':
2  'entry_card':
3    'prefix': 'entry_card'
4    'body': '{{% entry_card\n  title=""\n  href=""\n%}}'

同じファイル形式に複数のスニペットを追加する場合、ファイル形式を複数回書かずに次のようにしてください。

1'.source.gfm':
2  'entry_card':
3    'prefix': 'entry_card'
4    'body': '{{% entry_card\n  title=""\n  href=""\n%}}'
5
6  'hoge':
7    'prefix': 'hoge'
8    'body': 'fuga'

スニペットの呼び出し

snippets.cson を保存すれば、すぐにスニペット呼び出しを行うことができます。

prefix を入力して Tab を押下で呼び出しを行いますよ。

今回追加したものだと、 entry_card を入力して Tab キーで、次を挿入します。

1{{% entry_card
2  title=""
3  href=""
4%}}

Atom スニペットについて、より詳しくはマニュアルをご覧ください。

Using Atom
Basic Customization
https://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

ラクをするために、手間をかける

スニペットなど、 ちょっとした手間をかけることで、その後ずっとラクができる ということは、プログラマとしてとても大切な姿勢ですよね。

こういったことを積み上げって大切だよな、と改めて感じた次第です。 

SONY ワイヤレスポータブルスピーカー SRS-XB10

防水機能搭載(IPX5) モノラル(46mm)+パッシブラジエーター搭載 縦置きに加えて、付属ストラップで横置き可能 2台つなげて、ステレオでも楽しめるSpeaker Add機能搭載 持ち運んでも安心して使える16時間のロングバッテリー オートパワーオフ機能を搭載

Amazonで詳細を見る