Mike Slinn
Mike Slinn

Jekyll Plugin Snippets

Published 2023-01-10.
Time to read: 2 minutes.

This page is part of the jekyll collection.

The Visual Studio Code extension called Snippet by Devon Ray is a real timesaver. I have defined snippets for my Jekyll plugins. To use the VSCode Snippets extension with my snippets, install the plugin, then save the following file to ~/.config/Code/User/snippets/html.json. For some reason, one of my 3 Windows machines needs that file installed to %AppData%\Code\User\snippets\html.json.

{
  // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "Insert archive_display invocation": {
    "prefix": "archive_display",
    "body": [
      "{% archive_display $1 %}"
    ],
    "description": "Insert an archive_display plugin invocation"
  },

  "Insert basename invocation": {
    "prefix": "basename",
    "body": [
      "{{ 'blah/blah/filename.ext' | basename }}"
    ],
    "description": "Insert an basename filter invocation"
  },

  "Insert basename_without_extension invocation": {
    "prefix": "basename_without_extension",
    "body": [
      "{{ 'blah/blah/filename.ext' | basename_without_extension }}"
    ],
    "description": "Insert an basename_without_extension filter invocation"
  },

  "Insert days_since invocation": {
    "prefix": "days_since",
    "body": [
      "{{{ '1959' | days_since }}"
    ],
    "description": "Insert a days_since plugin invocation. A wide variety of date formats can be used."
  },

  "Insert dirname invocation": {
    "prefix": "dirname",
    "body": [
      "{{ 'blah/blah/filename.ext' | dirname }}"
    ],
    "description": "Insert an dirname filter invocation"
  },

  "Insert download_link invocation": {
    "prefix": "download_link",
    "body": [
      "{% download_link $1 %}"
    ],
    "description": "Insert an download_link filter invocation"
  },

  "Insert exec": {
    "prefix": "exec",
    "body": [
      "{% exec $1 %}"
    ],
    "description": "Insert an exec plugin invocation for within a {% pre %} tag."
  },

  "Insert exec max": {
    "prefix": "exec_max",
    "body": [
      "{% exec die_if_error die_if_nonzero no_escape no_strip cd='.' $1 %}"
    ],
    "description": "Insert an exec plugin invocation with all options for within a {% pre %} tag."
  },

  "Insert flexible_include maximal invocation": {
    "prefix": "flexible_include_max",
    "body": [
      "{% flexible_include copyButton dark do_not_escape download file='$1' label='$2' highlight='[\\w./\\-_]*django-admin[\\w.\\-_]*' number pre %}"
    ],
    "description": "Insert a flexible_include plugin invocation with all available options."
  },

  "Insert flexible_include minimal invocation": {
    "prefix": "flexible_include",
    "body": [
      "{% flexible_include file='$1' %}"
    ],
    "description": "Insert a flexible_include plugin invocation with only the necessary options."
  },

  "Insert from, to and until invocations": {
    "prefix": "from_to_until",
    "body": [
      "{{ '$1' | from: '$2' | to: '$3' | until: '$3' }}"
    ],
    "description": "Insert chained from, to and until plugin invocations."
  },

  "Insert Jekyll front matter": {
    "prefix": "front_matter",
    "body": [
      "---",
      "categories: [ $1 ]",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
      "description: 35 characters.",
      "javascriptEnd: /assets/js/clipboard.min.js",
      "javascriptInline: new ClipboardJS('.copyBtn');",
      "last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
      "layout: blog",
      "order: 1234",
      "published: false",
      "title: '$4'",
      "---"
    ],
    "description": "Insert Jekyll front matter."
  },

  "Insert href minimal invocation": {
    "prefix": "href",
    "body": [
      "{% href url='$1' $2 %}"
    ],
    "description": "Insert an href plugin invocation with only the necessary options."
  },

  "Insert href maximal invocation": {
    "prefix": "href_max",
    "body": [
      "{% href attribution follow match target='none' url='$1' $2 %}"
    ],
    "description": "Insert an href plugin invocation using all available options."
  },

  "Insert img minimal invocation": {
    "prefix": "img",
    "body": [
      "{% img src='$1' %}"
    ],
    "description": "Insert a minimal href plugin invocation with only the necessary options."
  },

  "Insert img maximal invocation": {
    "prefix": "img_max",
    "body": [
      "{% img",
      "  align='left|center|right'",
      "  caption='$1'",
      "  class='rounded shadow'",
      "  size='initial|halfsize|fullsize|quartersize|eighthsize|15px|10%'",
      "  src='$2'",
      "  url='$3'",
      "  wrapper_class=''",
      "  wrapper_style=''",
      "%}"
    ],
    "description": "Insert a maximal href plugin invocation with all available options."
  },

  "Insert months_since invocation": {
    "prefix": "months_since",
    "body": [
      "{{{ '1959' | months_since }}"
    ],
    "description": "Insert a months_since plugin invocation. A wide variety of date formats can be used."
  },

  "Insert noselect": {
    "prefix": "noselect",
    "body": [
      "{% noselect $1 %}"
    ],
    "description": "Insert a noselect plugin invocation for within a {% pre %} tag."
  },

  "Insert nth filter invocation": {
    "prefix": "nth",
    "body": [
      "{{ '1,2,3,4,5' | split: ',' | nth: 2 }}"
    ],
    "description": "Insert an nth plugin invocation."
  },

  "Insert outline invocation": {
    "prefix": "outline",
    "body": [
      "{% outline attribution collection_name %}",
      "  0: Section Head 1",
      "  1000: Section Head 2",
      "  2000: Section Head 3",
      "{% endoutline %}"
    ],
    "description": "Insert an outline plugin invocation."
  },

  "Insert pre minimal invocation": {
    "prefix": "pre_min",
    "body": [
      "<!-- #region -->",
      "{% pre shell %}",
      "{% noselect %}$1",
      "{% endpre %}",
      "<!-- endregion -->"
    ],
    "description": "Insert a minimal pre plugin invocation with only the necessary options."
  },

  "Insert pre maximal invocation": {
    "prefix": "pre_max",
    "body": [
      "{% pre clear copyButton dark number shell",
      "      class=''",
      "      highlight='regex'",
      "      label='Label'",
      "      style=''",
      "%}",
      "{% noselect %}$1",
      "{% noselect $2 %}",
      "{% exec die_if_error die_if_nonzero no_escape no_strip cd='.' ls %}",
      "{% endpre %}"
    ],
    "description": "Insert a maximal pre plugin invocation with all available options."
  },

  "Insert HTML region": {
    "prefix": "region",
    "body": [
      "<!-- #region -->",
      "<h2 id=\"$1\">$2</h2>",
      "<p>",
      "</p>",
      "<!-- #region -->",
      "{% pre shell copyButton %}",
      "{% exec $3 %}",
      "{% noselect $4 %}",
      "{% endpre %}",
      "<!-- endregion -->",
      "<!-- endregion -->"
    ],
    "description": "Insert an HTML region."
  },


  "Insert quote minimal invocation": {
    "prefix": "quote",
    "body": [
      "{% quote %}",
      "  $3",
      "{% endquote %}"
    ],
    "description": "Insert a minimal quote plugin invocation with only the necessary options."
  },

  "Insert quote maximal invocation": {
    "prefix": "quote_max",
    "body": [
      "{% quote break by noprep",
      "     cite='$1'",
      "     url='$2' %}",
      "  $3",
      "{% endquote %}"
    ],
    "description": "Insert a maximal quote plugin invocation with all available options."
  },

  "Insert random_hex_string invocation": {
    "prefix": "random_hex_string",
    "body": [
      "{% assign id = random_hex_string %}"
    ],
    "description": "Insert a random_hex_string plugin invocation."
  },

  "Insert region start tag": {
    "prefix": "region_start",
    "body": [
      "<!-- #region -->"
    ],
    "description": "Insert a #region start tag."
  },

  "Insert region stop tag": {
    "prefix": "region_end",
    "body": [
      "<!-- endregion -->"
    ],
    "description": "Insert a #region end tag."
  },

  "Insert run invocation": {
    "prefix": "run",
    "body": [
      "{% run echo 'asdf' %}"
    ],
    "description": "Insert a run plugin invocation."
  },

  "Insert snippet definition": {
    "prefix": "snippet_definition",
    "body": [
      "  \"Insert $1\": {",
      "  \"prefix\": \"$2\",",
      "  \"body\": [",
      "    \"$3\",",
      "  ],",
      "  \"description\": \"$4\"",
      "},"
    ],
    "description": "Insert a snippet definition."
  },

  "Insert HTML table": {
    "prefix": "table",
    "body": [
      "<table class='noborder table'>",
      "  <tr>",
      "    <th>Head1</th>",
      "    <th>Head2</th>",
      "    <th>Head3</th>",
      "  </tr>",
      "  <tr>",
      "    <td></td>",
      "    <td></td>",
      "    <td></td>",
      "  </tr>",
      "  <tr>",
      "    <td></td>",
      "    <td></td>",
      "    <td></td>",
      "  </tr>",
      "</table>"
    ]
  },

  "Insert HTML table with all options": {
    "prefix": "table_max",
    "body": [
      "<table class='condensed info info2 noborder table table_cell_top table_cell_vspace'>",
      "  <tr>",
      "    <th nobreak>Non_Breaking_Head</th>",
      "    <th tableLabel>TableLabel</th>",
      "    <th>Head3</th>",
      "  </tr>",
      "  <tr>",
      "    <td nobreak></td>",
      "    <td></td>",
      "    <td></td>",
      "  </tr>",
      "  <tr>",
      "    <td nobreak></td>",
      "    <td></td>",
      "    <td></td>",
      "  </tr>",
      "</table>"
    ]
  },

  "Insert weeks_since invocation": {
    "prefix": "weeks_since",
    "body": [
      "{{{ '1959' | weeks_since }}"
    ],
    "description": "Insert a weeks_since plugin invocation. A wide variety of date formats can be used."
  },

  "Insert years_since invocation": {
    "prefix": "years_since",
    "body": [
      "{{{ '1959' | years_since }}"
    ],
    "description": "Insert a years_since plugin invocation. A wide variety of date formats can be used."
  }
}

The above file defines the following snippets. I used my run plugin to generate the output, and it shows the bash commands it ran to produce the output, followed by the output (which is unselectable).

Shell
$ cat ~/.config/Code/User/snippets/html.json | \
  grep -v '//' | \
  jq -r 'values[].prefix' 
archive_display
basename
basename_without_extension
days_since
dirname
download_link
exec
exec_max
flexible_include_max
flexible_include
from_to_until
front_matter
href
href_max
img
img_max
months_since
noselect
nth
outline
pre_min
pre_max
region
quote
quote_max
random_hex_string
region_start
region_end
run
snippet_definition
table
table_max
weeks_since
years_since

But Wait, There Is More!

In addition to snippets for my Jekyll plugins, I defined a snippet, called region, for HTML regions. A region is a foldable section of HTML, set up the way I like when writing blog posts such as this. If you have a long jekyll_pre passage, like:

Shell
{% pre %}
blah blah blah
{% endpre %}

... placing it within a foldable region makes the source HTML much easier to work with. Regions within regions allows you to unfold to any degree of detail you require.

Shell
<!-- #region -->
{% pre %}
blah blah blah
{% endpre %}
<!-- endregion -->

Foldable regions are provided by the regionfolder Visual Studio Code extension by maptz. The inserted nested regions from the snippet look like this:

Shell
<!-- #region -->
<h2 id='$1'>$2</h2>
<p>
</p>
<!-- #region -->
{% pre shell copyButton %}
{% noselect %}
{% noselect %}
{% endpre %}
<!-- endregion -->
<!-- endregion -->

You control the visibility of nested regions with a series of two keystrokes.

  • All nested regions can be folded by pressing Ctrl-K Ctrl-0.
  • Unfolding just the first level of nested regions can be accomplished by pressing Ctrl-K Ctrl-1.
  • Unfolding to the second level of nested regions can be accomplished by pressing Ctrl-K Ctrl-2.

Videos

Here are some videos that show the Visual Studio Code snippets extension in action.