Atom Hugo Shortcodes and Snippets
I wanted a way to quickly access shortcodes from Atom without having to manually type them out each time. Atom’s built-in snippets function was perfect for this.
Adding Shortcodes
Shortcodes are added as individual html files under the layouts/shortcodes directory. Each shortcode points to a single html file of the same name. For example, abbr.html is a file that contains a shortcode to generate an abbreviation:
<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>
The associated shortcode that will used in a markdown file looks like this:
{{< abbr title="Long text to be abbreviated" text="Hover me!" >}}
and is rendered like this: Hover me!
Adding Snippets
Since the so-called “short”-code is anything but short, it saves time to assign the shortcode to a snippet. Snippets can be added directly to Atom’s snippets.cson file, which can be accessed through the command palette.
'.text.md':
'Abbr':
'prefix': 'abbr'
'body': '{{< abbr title="$1" text="$2" >}}'In the above snippet:
'text.md'indicates the snippet should only apply to markdown files'Abbr'is the name of the snippet'prefix'is the shortcut
To use this snippet, type abbr followed by TAB and the text of 'body' will be inserted with your cursor centered at $1. Pressing TAB again will jump your cursor to $2.
Escaping Shortcodes
Hugo will still process shortcodes found in codeblocks. To escape shortcodes, add {{</* and */>}} as appropriate.