Published 2023-01-10.
Time to read: 2 minutes.
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/
.
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).
$ 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:
{% 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.
<!-- #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:
<!-- #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.