Published 2023-01-10.
Last modified 2024-01-24.
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.
html.json
{
"Insert archive_display invocation": {
"prefix": "archive_display",
"body": [
"{% archive_display $1 %}$2"
],
"description": "Insert an {% archive_display %} plugin invocation"
},
"Insert basename invocation": {
"prefix": "basename",
"body": [
"{{ 'blah/blah/filename.ext$1' | basename }}$2"
],
"description": "Insert a {{ basename }} filter invocation"
},
"Insert basename_without_extension invocation": {
"prefix": "basename_without_extension",
"body": [
"{{ 'blah/blah/filename.ext$1' | basename_without_extension }}$3"
],
"description": "Insert an {{ basename_without_extension }} filter invocation"
},
"Insert background pink": {
"prefix": "bg_pink",
"body": [
"<span class='bg_pink'>$1</span>$2"
],
"description": "Insert a padded pink background span."
},
"Insert background pink nopad": {
"prefix": "bg_pink_nopad",
"body": [
"<span class='bg_pink_nopad'>$1</span>$2"
],
"description": "Insert a pink background span without padding."
},
"Insert background yellow": {
"prefix": "bg_yellow",
"body": [
"<span class='bg_yellow'>$1</span>$2"
],
"description": "Insert a padded yellow background span."
},
"Insert background yellow nopad": {
"prefix": "bg_yellow_nopad",
"body": [
"<span class='bg_yellow_nopad'>$1</span>$2"
],
"description": "Insert a yellow background span without padding."
},
"Insert comment complete": {
"prefix": "comment",
"body": [
"{% comment %}",
"$1",
"{% endcomment %}"
],
"description": "Insert a complete comment."
},
"Insert comment start": {
"prefix": "comment_start",
"body": [
"{% comment %}"
],
"description": "Insert a comment start."
},
"Insert comment end": {
"prefix": "comment_end",
"body": [
"{% endcomment %}"
],
"description": "Insert a comment end."
},
"Insert todays date": {
"prefix": "date",
"body": [
"$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}"
],
"description": "Insert today's date YYYY-mm-dd."
},
"Insert days_since invocation": {
"prefix": "days_since",
"body": [
"{{ '1959$1' | days_since }}$2"
],
"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$1' | dirname }}$2"
],
"description": "Insert a {{ dirname }} filter invocation"
},
"Insert download_link invocation": {
"prefix": "download_link",
"body": [
"{% download_link $1 %}$2"
],
"description": "Insert a {% download_link %} filter invocation"
},
"Insert emoji": {
"prefix": "emoji",
"body": [
"{% emoji align='right' class='big' name='smiley$1' %}"
],
"description": "Emojis are: angry, boom, clap, confounded, eggplant, grimace, grin, halo, horns, kiss, loudly_cry, notes, open, please, poop, rolling, sad, sax, scream, smiley, smirk, sunglasses, think, two_hearts, wink, worried, unamused, vulcan, zipper."
},
"Insert exec": {
"prefix": "exec",
"body": [
"{% exec $1 %}"
],
"description": "Insert a minimal {% exec %} plugin invocation; should be placed 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 a full {% exec %} plugin invocation with all options; should be placed within a {% pre %} tag."
},
"Insert flexible_include maximal invocation": {
"prefix": "flexible_include_max",
"body": [
"{% flexible_include copyButton dark do_not_escape download number pre$1",
" file='$2' label='$3' highlight='[\\w./\\-_]*django-admin[\\w.\\-_]*'$4 %}$5"
],
"description": "Insert a full {% flexible_include %} plugin invocation with all available options."
},
"Insert flexible_include minimal invocation": {
"prefix": "flexible_include",
"body": [
"{% flexible_include file='$1' %}$2"
],
"description": "Insert a minimal {% 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: '$4' }}"
],
"description": "Insert a chained {{ from }}, {{ to }} and {{ until }} plugin invocation."
},
"Insert AV Studio front matter": {
"prefix": "front_matter_av_studio",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: av_studio",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert AV Studio front matter."
},
"Insert Blog front matter": {
"prefix": "front_matter_blog",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: blog",
"title: '$3'",
"---",
"<!-- #region intro -->",
"<p>",
"$4",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Blog front matter."
},
"Insert Canada front matter": {
"prefix": "front_matter_canada",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: canada",
"published: false",
"title: '$3'",
"---",
"<!-- #region intro -->",
"<p>",
"$4",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Canada front matter."
},
"Insert Evelyn front matter": {
"prefix": "front_matter_evelyn",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: evelyn",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Evelyn front matter."
},
"Insert Expert front matter": {
"prefix": "front_matter_expert",
"body": [
"---",
"categories: [ Technology-expert-series, Expert, $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"intro: \"",
" This article discusses $3",
" \"",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: postExpertSeries",
"order: $4",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
" $5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Expert front matter."
},
"Insert Git front matter": {
"prefix": "front_matter_git",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: git",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Git front matter."
},
"Insert Go front matter": {
"prefix": "front_matter_golang",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: golang",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Go language front matter."
},
"Insert Jekyll front matter": {
"prefix": "front_matter_jekyll",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: jekyll",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Jekyll front matter."
},
"Insert LLM front matter": {
"prefix": "front_matter_llm",
"body": [
"---",
"categories: [ AI, LLM, $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: llm",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert LLM front matter."
},
"Insert Mainframe front matter": {
"prefix": "front_matter_mainframe",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: mainframe",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert mainframe front matter."
},
"Insert Ruby front matter": {
"prefix": "front_matter_ruby",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: ruby",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert Ruby front matter."
},
"Insert Song front matter": {
"prefix": "front_matter_song",
"body": [
"---",
"composed: $1",
"date: $2",
"description: $3, an original composition by Mike Slinn. All rights reserved.",
"guitar_pro_file: ",
"headerImage: ",
"last_modified_at: $4",
"layout: songs",
"live_file: ",
"message: \"\"",
"mp3: ",
"musicxml: ",
"order: $5",
"pdf: ",
"pro_tools: ",
"published: false",
"qr_code: $6",
"title: \"$7\"",
"youtube: ",
"---",
"$8",
"",
"{% include song.html",
" about=about",
" audio=audio",
" change_log=change_log",
" competition=competition",
" how_to_play=how_to_play",
" learning_videos=learning_videos",
" lyrics=lyrics",
" music_videos=music_videos",
" planned=planned",
" tools_used=tools_used",
"%}"
],
"description": "Insert Song front matter."
},
"Insert WPMC front matter": {
"prefix": "front_matter_wpmc",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: wpmc",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert WPMC front matter."
},
"Insert WSL front matter": {
"prefix": "front_matter_wsl",
"body": [
"---",
"categories: [ $1 ]",
"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"description: $2.",
"javascriptEnd: /assets/js/clipboard.min.js",
"javascriptInline: new ClipboardJS('.copyBtn');",
"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}",
"layout: wsl",
"order: $3",
"published: false",
"title: '$4'",
"---",
"<!-- #region intro -->",
"<p>",
"$5",
"</p>",
"<!-- endregion -->"
],
"description": "Insert WSL front matter."
},
"Insert Google Translate": {
"prefix": "google_translate",
"body": [
"{% google_translate_html %}"
],
"description": "Insert Git front matter."
},
"Insert href minimal": {
"prefix": "href",
"body": [
"{% href label='$1' url='$2' %}"
],
"description": "Insert a minimal {% href %} plugin invocation with only the necessary options."
},
"Insert href match": {
"prefix": "href_match",
"body": [
"{% href match url='$2' %}"
],
"description": "Insert a match {% href %} plugin invocation."
},
"Insert href maximal invocation": {
"prefix": "href_max",
"body": [
"{% href attribution blank follow match notarget wbr label='$1' summary='$2' summary_exclude url='$3' %}"
],
"description": "Insert a full {% href %} plugin invocation using all available options."
},
"Insert href_summary invocation": {
"prefix": "href_summary",
"body": [
"{% href_summary attribution include_local %}"
],
"description": "Insert a full {% href_summary %} plugin invocation with all options."
},
"Insert img url only": {
"prefix": "img",
"body": [
"{% img src='$1' %}"
],
"description": "Insert a minimal {% img %} plugin url invocation."
},
"Insert img maximal invocation": {
"prefix": "img_max",
"body": [
"{% img",
" attribution lazy nofollow priority",
" align='left|center|right$1'",
" alt='$2'",
" caption='$3'",
" class='rounded shadow'$4",
" id='$5'",
" size='initial|halfsize|fullsize|quartersize|eighthsize|15px|10%$6'",
" src='$7'",
" style='$8'",
" target='none'",
" title='$9'",
" url='$10'",
" wrapper_class='$11'",
" wrapper_style='$12'",
"%}"
],
"description": "Insert a full {% img %} plugin invocation with all available options."
},
"Insert kramdown minimal": {
"prefix": "kramdown_min",
"body": [
"{% kramdown %}",
"$1",
"{% endkramdown %}"
],
"description": "Insert minimal a {% kramdown %} block tag {% endkramdown %}."
},
"Insert kramdown maximal": {
"prefix": "kramdown_max",
"body": [
"{% kramdown noauto_ids hard_wrap table-container input=GFM math_engine=katex syntax_highlighter=rouge %}",
"$1",
"{% endkramdown %}"
],
"description": "Insert maximal a {% kramdown %} block tag {% endkramdown %}."
},
"Insert math-field": {
"prefix": "mathfield",
"body": [
"<p>",
" <math-field style='font-size:2rem;'>\\displaystyle (\\epsilon_\\theta - \\epsilon$1)</math-field>",
"</p>"
],
"description": "Insert a normal-font MathLive expression."
},
"Insert mathlive large": {
"prefix": "mathlive_large",
"body": [
"<p class='center mathlive' style='font-size: 20pt;'>",
" $1",
"</p>"
],
"description": "Insert a large-font MathLive expression."
},
"Insert mathlive small": {
"prefix": "mathlive_small",
"body": [
"<span class='mathlive'>$1</span>"
],
"description": "Insert a small-font MathLive expression."
},
"Insert months_since invocation": {
"prefix": "months_since",
"body": [
"{{ '1959$1' | 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 %}$2"
],
"description": "Insert a {% noselect %} plugin invocation; should be inserted within a {% pre %} tag."
},
"Insert nth filter invocation": {
"prefix": "nth",
"body": [
"{{ '1,2,3,4,5$1' | split: ',' | nth: 2 }}"
],
"description": "Insert an {{ nth }} plugin invocation."
},
"Insert outline invocation": {
"prefix": "outline",
"body": [
"{% outline attribution collection_name %}",
" 0: Section Head 1$1",
" 10000: Section Head 2$2",
" 20000: Section Head 3$3",
"{% endoutline %}"
],
"description": "Insert an {% outline %} plugin invocation."
},
"Insert pre dialog invocation": {
"prefix": "pre_dialog",
"body": [
"<!-- #region pre -->",
"{% pre copyButton dedent label=\"$1\" %}",
"{% noselect %}$2",
"{% noselect $3 %}<br>",
"{% noselect %}$4",
"{% noselect $5 %}<br>",
"{% noselect %}$6",
"{% noselect $7 %}",
"{% endpre %}",
"<!-- endregion -->"
],
"description": "Insert a {% pre %} generic dialog containing several {% noselect %} tags."
},
"Insert pre maximal invocation": {
"prefix": "pre_max",
"body": [
"{% pre clear copyButton dark dedent number label=\"$1\"",
" class=''",
" highlight='regex'",
" label='Label'",
" style=''",
"%}",
"{% noselect %}$2",
"{% noselect $3 %}<br>",
"{% noselect %}$4",
"{% noselect $5 %}",
"{% exec die_if_error die_if_nonzero no_escape no_strip cd='.' ls %}",
"{% endpre %}"
],
"description": "Insert a full generic {% pre %} plugin invocation with all available options, and embedded {% noselect %} and {% exec %} tags."
},
"Insert pre minimal invocation": {
"prefix": "pre_min",
"body": [
"<!-- #region pre -->",
"{% pre copyButton dedent label=\"$1\" %}",
"$2",
"{% endpre %}",
"<!-- endregion -->"
],
"description": "Insert a minimal generic {% pre %} plugin invocation with only the necessary options."
},
"Insert pre Scala REPL invocation": {
"prefix": "pre_scala_repl",
"body": [
"<!-- #region pre Scala REPL -->",
"{% pre copyButton dedent label=\"Scala REPL\" %}",
"{% noselect scala> %}$1",
"{% noselect $2 %}<br>",
"{% noselect scala> %}$3",
"{% noselect $4 %}",
"{% endpre %}",
"<!-- endregion -->"
],
"description": "Insert a pre Scala REPL plugin invocation."
},
"Insert pre shell invocation": {
"prefix": "pre_shell",
"body": [
"<!-- #region pre -->",
"{% pre copyButton dedent %}",
"$1",
"{% endpre %}",
"<!-- endregion -->"
],
"description": "Insert a minimal {% pre %} plugin invocation for shell commands."
},
"Insert HTML region": {
"prefix": "region",
"body": [
"<!-- #region $1 -->",
"<h2 id=\"$2\">$3</h2>",
"<p>",
" $4",
"</p>",
"<!-- endregion -->"
],
"description": "Insert an HTML region containing an H2 tag."
},
"Insert HTML region_pre": {
"prefix": "region_pre",
"body": [
"<!-- #region $1 -->",
"<h2 id=\"$2\">$3</h2>",
"<p>",
" $4",
"</p>",
"<!-- #region pre -->",
"{% pre dedent copyButton shell %}",
"{% noselect $4 %}",
"{% endpre %}",
"<!-- endregion -->",
"<!-- endregion -->"
],
"description": "Insert an HTML region containing an H2 tag and a pre section."
},
"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$1",
" cite='$2'",
" url='$3' %}",
" $4",
"{% endquote %}"
],
"description": "Insert a full {% quote %} plugin invocation with all available options."
},
"Insert random_hex_string invocation": {
"prefix": "random_hex_string",
"body": [
"{% assign id$1 = random_hex_string %}"
],
"description": "Insert a random_hex_string plugin invocation."
},
"Insert redirect_from front matter attribute": {
"prefix": "redirect_from",
"body": [
"redirect_from:",
" - $1"
],
"description": "Insert a redirect_from front matter attribute."
},
"Insert region start tag": {
"prefix": "region_start",
"body": [
"<!-- #region $1 -->$2"
],
"description": "Insert a #region start tag."
},
"Insert region stop tag": {
"prefix": "region_end",
"body": [
"<!-- endregion -->$2"
],
"description": "Insert a #region end tag."
},
"Insert run invocation": {
"prefix": "run",
"body": [
"{% run echo '$1' %}$2"
],
"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 song_about": {
"prefix": "song_about",
"body": [
"<!-- #region about -->",
"{% capture about %}",
" <p>",
" $1",
" </p>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty about section into a song file in collections/_songs/."
},
"Insert song_audio": {
"prefix": "song_audio",
"body": [
"",
"",
"<!-- #region audio -->",
"{% capture audio %}",
" <p>",
" $2",
" </p>",
" {% include audio.html mp3='/songs/mp3s/$1.mp3' %}",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty audio section into a song file in collections/_songs/."
},
"Insert song_changelog": {
"prefix": "song_changelog",
"body": [
"",
"",
"<!-- #region change_log -->",
"{% capture change_log %}",
" <h3>$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}</h3>",
" <ul>",
" <li>",
" $1",
" </li>",
" </ul>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty change_log section into a song file in collections/_songs/."
},
"Insert song_competition": {
"prefix": "song_competition",
"body": [
"",
"",
"<!-- #region competition -->",
"{% capture competition %}",
" <p>",
" $1",
" </p>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty competition section into a song file in collections/_songs/."
},
"Insert song_how_to_play": {
"prefix": "song_how_to_play",
"body": [
"",
"",
"<!-- #region how_to_play -->",
"{% capture how_to_play %}",
" <p>",
" $1",
" </p>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty how_to_play section into a song file in collections/_songs/."
},
"Insert song_learning_videos": {
"prefix": "song_learning_videos",
"body": [
"",
"",
"<!-- #region learning_videos -->",
"{% capture learning_videos %}",
" <p>",
" $2",
" </p>",
" {% include video.html youtube_id='$1' %}",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty learning_videos section into a song file in collections/_songs/."
},
"Insert song_lyrics": {
"prefix": "song_lyrics",
"body": [
"",
"",
"<!-- #region lyrics -->",
"{% capture lyrics %}",
" $1<br>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty lyrics section into a song file in collections/_songs/."
},
"Insert song_music_videos": {
"prefix": "song_music_videos",
"body": [
"",
"",
"<!-- #region music_videos -->",
"{% capture music_videos %}",
" <p>",
" $2",
" </p>",
" {% include video.html youtube_id='$1' %}",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty music_videos section into a song file in collections/_songs/."
},
"Insert song_planned": {
"prefix": "song_planned",
"body": [
"",
"",
"<!-- #region planned -->",
"{% capture planned %}",
" <ol>",
" <li>$1</li>",
" </ol>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty planned section into a song file in collections/_songs/."
},
"Insert song_tools_used": {
"prefix": "song_tools_used",
"body": [
"",
"",
"<!-- #region tools_used -->",
"{% capture tools_used %}",
" <ol>",
" <li>$1</li>",
" </ol>",
"{% endcapture %}",
"<!-- endregion -->",
"",
""
],
"description": "Insert an empty tools_used section into a song file in collections/_songs/."
},
"Insert HTML table": {
"prefix": "table",
"body": [
"<table class='noborder table'>",
" <tr>",
" <th>Head1$1</th>",
" <th>Head2$2</th>",
" <th>Head3$3</th>",
" </tr>",
" <tr>",
" <td>$4</td>",
" <td>$5</td>",
" <td>$6</td>",
" </tr>",
" <tr>",
" <td>$7</td>",
" <td>$8</td>",
" <td>$9</td>",
" </tr>",
"</table>"
],
"description": "Insert a typical table definition."
},
"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$1</th>",
" <th tableLabel>TableLabel$2</th>",
" <th>Head3$2</th>",
" </tr>",
" <tr>",
" <td nobreak>$4</td>",
" <td>$5</td>",
" <td>$6</td>",
" </tr>",
" <tr>",
" <td nobreak>$7</td>",
" <td>$8</td>",
" <td>$9</td>",
" </tr>",
"</table>"
],
"description": "Insert a full table definition with all available CSS classes."
},
"Insert JTabs": {
"prefix": "tabs",
"body": [
"<div class='jtabs'>",
" <div id='jtabs-headers'>",
" <div>$1</div>",
" <div>$2</div>",
" <div>$3</div>",
" <div>$4</div>",
" </div>",
" <div id='jtabs-content'>",
" <div id='jtabs1'>",
" $5",
" </div>",
" <div id='jtabs2'>",
" $6",
" </div>",
" <div id='jtabs3'>",
" $7",
" </div>",
" <div id='jtabs4'>",
" $8",
" </div>",
" </div>",
"</div>"
],
"description": "Insert a typical jSuites.tabs HTML."
},
"Insert Minimal TODO": {
"prefix": "todo",
"body": [
"{% todo %}",
" $1",
"{% endtodo %}"
],
"description": "Insert a minimal TODO comment."
},
"Insert TODO block": {
"prefix": "todo_block",
"body": [
"{% todo block %}",
" $1",
"{% endtodo %}"
],
"description": "Insert a block TODO comment."
},
"Insert TODO span": {
"prefix": "todo_span",
"body": [
"{% todo span %}",
" $1",
"{% endtodo %}"
],
"description": "Insert a span TODO comment."
},
"Insert Full TODO div": {
"prefix": "todo_full",
"body": [
"{% todo alert block span class='$1' id='$2' style='$3' %}",
" $4",
"{% endtodo %}"
],
"description": "Insert a full TODO comment."
},
"Create new VSCode macro": {
"prefix": "vsmacro",
"body": [
"const vscode = require('vscode');",
"",
"/**",
" * Macro configuration settings",
" * { [name: string]: { ... Name of the macro",
" * no: number, ... Order of the macro",
" * func: ()=> string | undefined ... Name of the body of the macro function",
" * }",
" * }",
" */",
"module.exports.macroCommands = {",
" $1: {",
" no: 1,",
" func: $2,",
" },",
"};",
"",
"/**",
" * Hello world",
" */",
"async function $2() {",
" const editor = vscode.window.activeTextEditor;",
" if (!editor) {",
" // Return an error message if necessary.",
" return 'Active text editor not found.';",
" }",
" const document = editor.document;",
" const selection = editor.selection;",
" const text = document.getText(selection);",
"",
" editor.edit((editBuilder) => {",
" editBuilder.replace(selection, `Hello world! \\${text}`);",
" });",
"}"
],
"description": "VSCode Macro Template"
},
"Insert weeks_since invocation": {
"prefix": "weeks_since",
"body": [
"{{ '1959$1' | weeks_since }}$2"
],
"description": "Insert a {{ weeks_since }} plugin invocation. A wide variety of date formats can be used."
},
"wrap in code": {
"scope": "javascript,html",
"prefix": "wrap_in_code",
"body": "<code>$TM_SELECTED_TEXT</code>"
},
"Insert years_since invocation": {
"prefix": "years_since",
"body": [
"{{ '1959$1' | years_since }}$2"
],
"description": "Insert a {{ years_since }} plugin invocation. A wide variety of date formats can be used."
},
"Insert YouTube": {
"prefix": "youtube",
"body": [
"{% youtube '$1' %}$2"
],
"description": "Insert {% youtube %} tag; requires the URL of a YouTube video."
}
}
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 bg_pink bg_pink_nopad bg_yellow bg_yellow_nopad comment comment_start comment_end date days_since dirname download_link emoji exec exec_max flexible_include_max flexible_include from_to_until front_matter_av_studio front_matter_blog front_matter_canada front_matter_evelyn front_matter_expert front_matter_git front_matter_golang front_matter_jekyll front_matter_llm front_matter_mainframe front_matter_ruby front_matter_song front_matter_wpmc front_matter_wsl google_translate href href_match href_max href_summary img img_max kramdown_min kramdown_max mathfield mathlive_large mathlive_small months_since noselect nth outline pre_dialog pre_max pre_min pre_scala_repl pre_shell region region_pre quote quote_max random_hex_string redirect_from region_start region_end run snippet_definition song_about song_audio song_changelog song_competition song_how_to_play song_learning_videos song_lyrics song_music_videos song_planned song_tools_used table table_max tabs todo todo_block todo_span todo_full vsmacro weeks_since wrap_in_code years_since youtube
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 articles such as this.
If you have a long
jekyll_pre passage, like:
HTML or markdown
{% 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.
HTML or markdown
<!-- #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:
HTML or markdown
<!-- #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.
Key Bindings
Key bindings can also insert snippets.
On Windows and WSL, my key bindings are defined in %AppData%/Code/User/keybindings.json.
The following additional key binding wraps selected text within <code></code> tags:
C:\Users\Mike Slinn\AppData\Roaming/Code/User/keybindings.json
{
"key": "alt+c",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "${TM_SELECTED_TEXT}"
}
},
Videos
Here are some videos that show the Visual Studio Code snippets extension in action.
