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/.
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.