use https://github.com/nunocoracao/blowfish.git

3 files changed, 633 insertions, 0 deletions

diff --git a/themes/blowfish/.vscode/blowfish.code-snippets b/themes/blowfish/.vscode/blowfish.code-snippets
new file mode 100644
index 0000000..265bdc8
--- /dev/null
+++ b/themes/blowfish/.vscode/blowfish.code-snippets
@@ -0,0 +1,211 @@
+{
+  "alert": {
+    "prefix": ["BFS-alert", "HSC-alert", "alert"],
+    "body": [
+      "{{< alert ${1| ,icon=\"iconName\"|}${2| , iconColor=\"iconColor\"|}${3| , cardColor=\"cardColor\"|}${4| , textColor=\"textColor\"|} >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /alert >}}"
+    ],
+    "description": "Outputs its contents as a stylised message box within your article. Blowfish alert Shortcode.  Documentation: https://blowfish.page/docs/shortcodes/#alert ",
+  },
+  "article": {
+    "prefix": ["BFS-article", "HSC-article", "article"],
+    "body": [
+      "{{< article link=\"${1:RelPermalink_Of_Target_Article}\">}}",
+      "$0"
+    ],
+    "description": " Embed a single article into a markdown file. The link to the file should be the .RelPermalink of the file to be embedded.  Blowfish article Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#article ",
+  },
+  "badge": {
+    "prefix": ["BFS-badge", "HSC-badge", "badge"],
+    "body": [
+      "{{< badge >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /badge >}}"
+    ],
+    "description": "Outputs a styled badge component which is useful for displaying metadata. Blowfish badge Shortcode.  Documentation: https://blowfish.page/docs/shortcodes/#badge ",
+  },
+  "button": {
+    "prefix": ["BFS-button", "HSC-button", "button"],
+    "body": [
+      "{{< button href=\"${1:url}\" target=\"${2:target}\" >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /button >}}"
+    ],
+    "description": "Output a styled button component which can be used to highlight a primary action. Blowfish button Shortcode.  Documentation: https://blowfish.page/docs/shortcodes/#button ",
+  },
+  "carousel": {
+    "prefix": ["BFS-carousel", "HSC-carousel", "carousel"],
+    "body": [
+      "{{< carousel images=\"{${1:regex matching images }}\" aspectRatio=\"${2|16-9,21-9,32-9|}\" interval=\"${3:2000}\"   >}}",
+      "$0"
+    ],
+    "description": "Showcase multiple images in an interactive and visually appealing way. Blowfish carousel Shortcode.  Documentation: https://blowfish.page/docs/shortcodes/#carousel ",
+  },
+  "chart-bar": {
+    "prefix": ["BFS-chart-bar", "HSC-chart-bar", "chart-bar"],
+    "body": [
+      "{{< chart >}} $0<!-- https://www.chartjs.org/docs/latest/samples/information.html -->",
+      "type: 'bar',\r\ndata: {\r\n  labels: ['January', 'February', 'March'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [65, 59, 80],\r\n    backgroundColor: [\r\n      'rgba(255, 99, 132, 0.2)',\r\n      'rgba(255, 159, 64, 0.2)',\r\n      'rgba(255, 205, 86, 0.2)'\r\n    ],\r\n    borderColor: [ \r\n      'rgb(255, 99, 132)',\r\n      'rgb(255, 159, 64)',\r\n      'rgb(255, 205, 86)'\r\n    ],\r\n    borderWidth: 1\r\n  }]\r\n}"
+      "{{< /chart >}}"
+      ],
+      "description": "Use the Chart.js library to embed charts into articles using simple structured data. Blowfish chart Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#chart ",
+  },
+  "chart-doughnut": {
+    "prefix": ["BFS-chart-doughnut", "HSC-chart-doughnut", "chart-doughnut"],
+    "body": [
+      "{{< chart >}} $0<!--  https://www.chartjs.org/docs/latest/samples/information.html -->",
+      "type: 'doughnut',\r\ndata: {\r\n  labels: ['Red', 'Blue', 'Yellow'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [300, 50, 100],\r\n    backgroundColor: [\r\n      'rgba(255, 99, 132, 0.7)',\r\n      'rgba(54, 162, 235, 0.7)',\r\n      'rgba(255, 205, 86, 0.7)'\r\n    ],\r\n    borderWidth: 0,\r\n    hoverOffset: 4\r\n  }]\r\n}",
+      "{{< /chart >}}"
+    ],
+    "description": "Use the Chart.js library to embed charts into articles using simple structured data. Blowfish chart Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#chart ",
+  },
+  "chart-line": {
+    "prefix": ["BFS-chart-line", "HSC-chart-line", "chart-line"],
+    "body": [
+      "{{< chart >}} $0<!-- https://www.chartjs.org/docs/latest/samples/information.html -->",
+      "type: 'line',\r\ndata: {\r\n  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [65, 59, 80, 81, 56, 55, 40],\r\n    tension: 0.2\r\n  }]\r\n}",
+      "{{< /chart >}}"
+      ],
+      "description": "Use the Chart.js library to embed charts into articles using simple structured data. Blowfish chart Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#chart ",
+  },
+  "chart": {
+    "prefix": ["BFS-chart", "HSC-chart", "chart"],
+    "body": [
+      "{{< chart >}} $0<!-- https://www.chartjs.org/docs/latest/samples/information.html -->",
+      "type: 'bar',\r\ndata: {\r\n  labels: ['January', 'February', 'March'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [65, 59, 80],\r\n    backgroundColor: [\r\n      'rgba(255, 99, 132, 0.2)',\r\n      'rgba(255, 159, 64, 0.2)',\r\n      'rgba(255, 205, 86, 0.2)'\r\n    ],\r\n    borderColor: [ \r\n      'rgb(255, 99, 132)',\r\n      'rgb(255, 159, 64)',\r\n      'rgb(255, 205, 86)'\r\n    ],\r\n    borderWidth: 1\r\n  }]\r\n}",
+      "type: 'doughnut',\r\ndata: {\r\n  labels: ['Red', 'Blue', 'Yellow'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [300, 50, 100],\r\n    backgroundColor: [\r\n      'rgba(255, 99, 132, 0.7)',\r\n      'rgba(54, 162, 235, 0.7)',\r\n      'rgba(255, 205, 86, 0.7)'\r\n    ],\r\n    borderWidth: 0,\r\n    hoverOffset: 4\r\n  }]\r\n}",
+      "type: 'line',\r\ndata: {\r\n  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\r\n  datasets: [{\r\n    label: 'My First Dataset',\r\n    data: [65, 59, 80, 81, 56, 55, 40],\r\n    tension: 0.2\r\n  }]\r\n}",
+      "{{< /chart >}}"
+    ],
+    "description": "Use the Chart.js library to embed charts into articles using simple structured data. Blowfish chart Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#chart ",
+  },  
+  "figure": {
+    "prefix": ["BFS-figure", "HSC-figure", "figure"],
+    "body": [
+      "{{< figure src=\"${1:asset-src}\"${2| , alt=\"2:alt text\"|}${3| , caption=\"MD String to display beneath asset\"|}${4| , class=\"CSS Class to add to asset\"|}${5| , href=\"url to link asset to\"|}${6| , nozoom=true, nozoom=false|}${7| , default=true|} >}}",
+    ],
+    "description": "Add images to content. Blowfish figure Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#figure ",
+  },
+  "gallery": {
+    "prefix": ["BFS-gallery", "HSC-gallery", "gallery"],
+    "body": [
+      "{{< gallery >}}",
+        "<img src=\"image-uri-here\" class=\"${1|grid-w5,grid-w10,grid-w15,grid-w20,grid-w25,grid-w30,grid-w33,grid-w35,grid-w40,grid-w45,grid-w50,grid-w55,grid-w60,grid-w65,grid-w66,grid-w70,grid-w75,grid-w80,grid-w85,grid-w90,grid-w95,grid-w100|}\" />",
+        "<img src=\"image-uri-here\" class=\"grid-w50 md:grid-w33 xl:grid-w25\" />",
+        "$0",
+      "{{< /gallery >}}"
+    ],
+    "description": "Showcase multiple images at once, in a responsive manner with more varied and interesting layouts. Blowfish gallery Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#gallery ",
+  },
+  "github": {
+    "prefix": ["BFS-github", "HSC-github", "github"],
+    "body": [
+      "{{< github repo=\"${1:nunocoracao/blowfish}\" >}}$0",
+    ],
+    "description": "Quickly link a github repository. Blowfish github Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#github ",
+  },
+  "gitlab": {
+    "prefix": ["BFS-gitlab", "HSC-gitlab", "gitlab"],
+    "body": [
+      "{{< gitlab projectID=\"${1:278964}\"${2| , baseURL=\"https://gitlab.com\"|}$0 >}}",
+    ],
+    "description": "Quickly link a GitLab Project. Blowfish gitlab Shortcode.  Documentation: https://blowfish.page/docs/shortcodes/#gitlab ",
+  },
+  "icon": {
+    "prefix": ["BFS-icon", "HSC-icon", "icon"],
+    "body": [
+      "{{< icon \"${1:star}$0\" >}}",
+    ],
+    "description": "Output an SVG icon. Blowfish icon Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#icon ",
+  },
+  "katex": {
+    "prefix": ["BFS-katex", "HSC-katex", "katex"],
+    "body": [
+      "{{< katex >}}",
+      "$0"
+    ],
+    "description": "Add mathematical expressions to article content using the KaTeX package. Blowfish katex Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#katex ",
+  },
+  "lead": {
+    "prefix": ["BFS-lead", "HSC-lead", "lead"],
+    "body": [
+      "{{< lead >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /lead >}}"
+    ],
+    "description": "Bring emphasis to the start of an article. Blowfish lead Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#lead ",
+  },
+  "list": {
+    "prefix": ["BFS-list", "HSC-list", "list"],
+    "body": [
+      "{{< list limit=\"${1:5}\"${2| , title=\"Recent\"|}${3| , where=\"Type\"|}${4| ,value=\"article\"|} >}}",
+      "{{/* The where and value values are used in the following query where .Site.RegularPages $where $value in the code of the shortcode. See Hugo Docs: https://gohugo.io/variables/page/ */}} $0",
+    ],
+    "description": "Display a list of recent articles. Blowfish list Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#list ",
+  },
+  "ltr": {
+    "prefix": ["BFS-ltr", "HSC-ltr", "ltr"],
+    "body": [
+      "{{% ltr %}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{% /ltr %}}"
+    ],
+    "description": "Allows you to mix your contents' reading direction. Blowfish ltr Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#ltr ",
+  },
+  "mermaid": {
+    "prefix": ["BFS-mermaid", "HSC-mermaid", "mermaid"],
+    "body": [
+      "{{< mermaid >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /mermaid >}}"
+    ],
+    "description": "Draw detailed diagrams and visualisations using text. Blowfish mermaid Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#mermaid ",
+  },
+  "rtl": {
+    "prefix": ["BFS-rtl", "HSC-rtl", "rtl"],
+    "body": [
+      "{{% rtl %}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{% /rtl %}}"
+    ],
+    "description": "allows you to mix your contents. Blowfish rtl Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#rtl ",
+  },
+  "swatches": {
+    "prefix": ["BFS-swatches", "HSC-swatches", "swatches"],
+    "body": [
+      "{{< swatches \"#${1:00ff00}\"${2| , \"#0000FF\"|}${3| , \"#FF00FF\"|} >}}$0",
+    ],
+    "description": "Output a set of up to three different colors. Blowfish swatches Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#swatches ",
+  },
+  "timeline": {
+    "prefix": ["BFS-timeline", "HSC-timeline", "timeline"],
+    "body": [
+      "{{< timeline >}}",
+      "{{< timelineItem ${1| , icon=\"star\"|}${2| , header=\"Header\"|}${3| , badge=\"Badge Text\"|}${4| , subheader=\"SubHeader\"|} >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /timelineItem >}}",
+      "{{< /timeline >}}"
+    ],
+    "description": "Create a linear visual timeline that can be used in different use-cases. Blowfish timeline Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#timeline ",
+  },
+  "timelineItem": {
+    "prefix": ["BFS-timelineItem", "HSC-timelineItem", "timelineItem"],
+    "body": [
+      "{{< timelineItem ${1| , icon=\"star\"|}${2| , header=\"Header\"|}${3| , badge=\"Badge Text\"|}${4| , subheader=\"SubHeader\"|} >}}",
+      "${TM_SELECTED_TEXT:${CLIPBOARD}}$0",
+      "{{< /timelineItem >}}",
+    ],
+    "description": "Create an element within a timeline.  Blowfish timelineItem Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#timeline ",
+  },
+  "typeit": {
+    "prefix": ["BFS-typeit", "HSC-typeit", "typeit"],
+    "body": [
+      "${1:Type-Initial-String-then-press-tab}\r{{< typeit tag=\"${2|div,span,aside,p,header,footer,main,section,h1,h2,h3,h4,h5,h6,hgroup,code,kbd,q,samp,portal|}\"${3| , classList=\"rounded\"|} initialString=\"${1:Type-Initial-Text-and-hit-tab}\"${4| , speed=\"19\"|}${5| , lifeLike=true, lifeLike=false|}${6| , startDelay=\"250\"|}${7| , breakLines=true, breakLines=false|}${8| , waitUntilVisible=true, waitUntilVisible=false|}${9| , loop=true, loop=false|} >}}",
+      "${TM_SELECTED_TEXT:$CLIPBOARD} $0",
+      "{{< /typeit >}}"
+    ],
+    "description": "Typewriter-Like text. Blowfish typeit Shortcode. Documentation: https://blowfish.page/docs/shortcodes/#typeit https://www.typeitjs.com/docs/vanilla/usage/ ",
+  },
+
+}
\ No newline at end of file
diff --git a/themes/blowfish/.vscode/codesnippets-doc.md b/themes/blowfish/.vscode/codesnippets-doc.md
new file mode 100644
index 0000000..c527dd6
--- /dev/null
+++ b/themes/blowfish/.vscode/codesnippets-doc.md
@@ -0,0 +1,237 @@
+# [Making VSCode Snippets][vscode-snippets-docs]
+
+This info sourced from: [VSCode's docs][vscode-snippets-docs]
+
+A useful bit of info is that VSCode Snippets are intended to be compatible with [textmate code snippets](https://macromates.com/textmate/manual/snippets)
+
+## [Creating your own](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets)
+
+### [File template snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_file-template-snippets)
+
+You can add the `isFileTemplate` attribute to your snippet's definition if the snippet is intended to populate or replace a file's contents. File template snippets are displayed in a dropdown when you run the **Snippets: Populate File from Snippet** command in a new or existing file.
+
+## [Snippet scope](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-scope)
+
+Snippets are scoped so that only relevant snippets are suggested. Snippets can be scoped by either:
+
+1. the **language(s)** to which snippets are scoped (possibly all)
+2. the **project(s)** to which snippets are scoped (probably all)
+
+### [Language snippet scope](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_language-snippet-scope)
+
+Every snippet is scoped to one, several, or all ("global") languages based on whether it is defined in:
+
+1. a **language** snippet file
+2. a **global** snippet file
+
+Single-language user-defined snippets are defined in a specific language's snippet file (for example `javascript.json`), which you can access by language identifier through **Snippets: Configure User Snippets**. A snippet is only accessible when editing the language for which it is defined.
+
+Multi-language and global user-defined snippets are all defined in "global" snippet files (JSON with the file suffix `.code-snippets`), which is also accessible through **Snippets: Configure User Snippets**. In a global snippets file, a snippet definition may have an additional `scope` property that takes one or more [language identifiers](https://code.visualstudio.com/docs/languages/identifiers), which makes the snippet available only for those specified languages. If no `scope`property is given, then the global snippet is available in **all** languages.
+
+Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.
+
+### [Project snippet scope](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_project-snippet-scope)
+
+You can also have a global snippets file (JSON with file suffix `.code-snippets`) scoped to your project. Project-folder snippets are created with the **New Snippets file for ''...** option in the **Snippets: Configure User Snippets** dropdown menu and are located at the root of the project in a `.vscode` folder. Project snippet files are useful for sharing snippets with all users working in that project. Project-folder snippets are similar to global snippets and can be scoped to specific languages through the `scope` property.
+
+
+## [Snippet syntax](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax)
+
+The `body` of a snippet can use special constructs to control cursors and the text being inserted. The following are supported features and their syntaxes:
+
+### [Tabstops](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops)
+
+With tabstops, you can make the editor cursor move inside a snippet. Use `$1`, `$2` to specify cursor locations. The number is the order in which tabstops will be visited, whereas `$0` denotes the final cursor position. Multiple occurrences of the same tabstop are linked and updated in sync.
+
+### [Placeholders](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholders)
+
+Placeholders are tabstops with values, like `${1:foo}`. The placeholder text will be inserted and selected such that it can be easily changed.  
+Placeholders can be nested, like `${1:another ${2:placeholder}}`.
+
+### [Choice](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_choice)
+
+Placeholders can have choices as values. The syntax is a comma-separated enumeration of values, enclosed with the pipe-character, for example `${1|one,two,three|}`. When the snippet is inserted and the placeholder selected, choices will prompt the user to pick one of the values.
+
+### [Variables](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables)
+
+With `$name` or `${name:default}`, you can insert the value of a variable. When a variable isn't set, its **default** or the empty string is inserted. When a variable is unknown (that is, its name isn't defined) the name of the variable is inserted and it is transformed into a placeholder.
+
+The following variables can be used:
+
+`TM_SELECTED_TEXT`
+: The currently selected text or the empty string
+
+`TM_CURRENT_LINE`
+: The contents of the current line
+
+`TM_CURRENT_WORD`
+: The contents of the word under cursor or the empty string
+
+`TM_LINE_INDEX`
+: The zero-index based line number
+
+`TM_LINE_NUMBER`
+: The one-index based line number
+
+`TM_FILENAME`
+: The filename of the current document
+
+`TM_FILENAME_BASE`
+: The filename of the current document without its extensions
+
+`TM_DIRECTORY`
+: The directory of the current document
+
+`TM_FILEPATH`
+: The full file path of the current document
+
+`RELATIVE_FILEPATH`
+: The relative (to the opened workspace or folder) file path of the current document
+
+`CLIPBOARD`
+: The contents of your clipboard
+
+`WORKSPACE_NAME`
+: The name of the opened workspace or folder
+
+`WORKSPACE_FOLDER`
+: The path of the opened workspace or folder
+
+`CURSOR_INDEX`
+: The zero-index based cursor number
+
+`CURSOR_NUMBER`
+: The one-index based cursor number
+
+#### Inserting the current date and time:
+
+`CURRENT_YEAR`
+: The current year
+
+`CURRENT_YEAR_SHORT`
+: The current year's last two digits
+
+`CURRENT_MONTH`
+: The month as two digits (example '02')
+
+`CURRENT_MONTH_NAME`
+: The full name of the month (example 'July')
+
+`CURRENT_MONTH_NAME_SHORT`
+: The short name of the month (example 'Jul')
+
+`CURRENT_DATE`
+: The day of the month as two digits (example '08')
+
+`CURRENT_DAY_NAME`
+: The name of day (example 'Monday')
+
+`CURRENT_DAY_NAME_SHORT`
+: The short name of the day (example 'Mon')
+
+`CURRENT_HOUR`
+: The current hour in 24-hour clock format
+
+`CURRENT_MINUTE`
+: The current minute as two digits
+
+`CURRENT_SECOND`
+: The current second as two digits
+
+`CURRENT_SECONDS_UNIX`
+: The number of seconds since the Unix epoch
+
+`CURRENT_TIMEZONE_OFFSET`
+: The current UTC time zone offset as +HH:MM or -HH:MM (example -07:00).
+
+
+#### Inserting random values:
+
+RANDOM 6 random Base-10 digits
+RANDOM_HEX 6 random Base-16 digits
+UUID A Version 4 UUID
+#### Inserting line or block comments, honoring the current language:
+
+`BLOCK_COMMENT_START`
+: Example output: in PHP `/*` or in HTML `<!--`
+
+`BLOCK_COMMENT_END`
+: Example output: in PHP `*/` or in HTML `-->`
+
+`LINE_COMMENT`
+: Example output: in PHP `//`
+
+
+### [Variable transforms](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variable-transforms)
+
+Transformations allow you to modify the value of a variable before it is inserted. The definition of a transformation consists of three parts:
+
+1. A regular expression that is matched against the value of a variable, or the empty string when the variable cannot be resolved.
+2. A "format string" that allows to reference matching groups from the regular expression. The format string allows for conditional inserts and simple modifications.
+3. Options that are passed to the regular expression.
+
+The following example inserts the name of the current file without its ending, so from `foo.txt` it makes `foo`.
+
+```
+${TM_FILENAME/(.*)\\..+$/$1/}
+  |           |         |  |
+  |           |         |  |-> no options
+  |           |         |
+  |           |         |-> references the contents of the first
+  |           |             capture group
+  |           |
+  |           |-> regex to capture everything before
+  |               the final `.suffix`
+  |
+  |-> resolves to the filename
+```
+
+### [Placeholder-Transform](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_placeholdertransform)
+
+Like a Variable-Transform, a transformation of a placeholder allows changing the inserted text for the placeholder when moving to the next tab stop. The inserted text is matched with the regular expression and the match or matches - depending on the options - are replaced with the specified replacement format text. Every occurrence of a placeholder can define its own transformation independently using the value of the first placeholder. The format for Placeholder-Transforms is the same as for Variable-Transforms.
+
+### [Transform examples](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_transform-examples)
+
+The examples are shown within double quotes, as they would appear inside a snippet body, to illustrate the need to double escape certain characters. Sample transformations and the resulting output for the filename `example-123.456-TEST.js`.
+
+|Example|Output|Explanation|
+|---|---|---|
+|`"${TM_FILENAME/[\\.]/_/}"`|`example-123_456-TEST.js`|Replace the first `.` with `_`|
+|`"${TM_FILENAME/[\\.-]/_/g}"`|`example_123_456_TEST_js`|Replace each `.` or `-`with `_`|
+|`"${TM_FILENAME/(.*)/${1:/upcase}/}"`|`EXAMPLE-123.456-TEST.JS`|Change to all uppercase|
+|`"${TM_FILENAME/[^0-9^a-z]//gi}"`|`example123456TESTjs`|Remove non-alphanumeric characters|
+
+### [Grammar](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_grammar)
+
+Below is the EBNF ([extended Backus-Naur form](https://en.wikipedia.org/wiki/Extended_Backus-Naur_form)) for snippets. With `\` (backslash), you can escape `$`, `}`, and `\`. Within choice elements, the backslash also escapes comma and pipe characters.
+
+```
+any         ::= tabstop | placeholder | choice | variable | text
+tabstop     ::= '$' int
+                | '${' int '}'
+                | '${' int  transform '}'
+placeholder ::= '${' int ':' any '}'
+choice      ::= '${' int '|' text (',' text)* '|}'
+variable    ::= '$' var | '${' var '}'
+                | '${' var ':' any '}'
+                | '${' var transform '}'
+transform   ::= '/' regex '/' (format | text)+ '/' options
+format      ::= '$' int | '${' int '}'
+                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'
+                | '${' int ':+' if '}'
+                | '${' int ':?' if ':' else '}'
+                | '${' int ':-' else '}' | '${' int ':' else '}'
+regex       ::= JavaScript Regular Expression value (ctor-string)
+options     ::= JavaScript Regular Expression option (ctor-options)
+var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
+int         ::= [0-9]+
+text        ::= .*
+if          ::= text
+else        ::= text
+```
+
+
+
+
+[vscode-snippets-docs]: <https://code.visualstudio.com/docs/editor/userdefinedsnippets>
+
diff --git a/themes/blowfish/.vscode/textmate-code-snippets.md b/themes/blowfish/.vscode/textmate-code-snippets.md
new file mode 100644
index 0000000..b0d87fe
--- /dev/null
+++ b/themes/blowfish/.vscode/textmate-code-snippets.md
@@ -0,0 +1,185 @@
+# [Textmate Code Snippets](https://macromates.com/textmate/manual/snippets)
+
+
+A snippet is a piece of text that you would like to insert in your document. It can include code to run at insertion time, variables (like selected text), tab stops/placeholders for missing information (which you can tab through after insertion) and perform transformations on the data which you enter in the placeholders.
+
+Snippets are created in the bundle editor and are often assigned a tab trigger for easy insertion.
+
+## Grammar
+
+Snippets support the following constructs:
+
+```
+$«int»
+${«int»}
+${«int»:«any»}
+${«int»/«regexp»/«format»/«options»}
+${«int»|«choice 1»,…,«choice n»|}
+`«code»`
+«format»
+```
+
+In the above, `«format»` is a format string and `«any»` refers to any of the above.
+
+The next sections will give examples of each of the above.
+
+## Plain Text
+
+In the simplest case, you can use snippets to insert text that you do not want to type again and again, either because you type it a lot, or because the actual text to insert is hard to remember (like your bank account details or the HTML entities for the Apple modifier keys).
+
+If you use snippets to insert plain text there is only one thing you should be aware of: `$` and `` ` `` are reserved characters. So if you want to insert one of these, prefix it with an escape (i.e. `\$`). An escape not followed by one of these two characters (or followed by another escape) will be inserted as a literal character.
+
+## Variables
+
+You can use any of TextMate’s defined variables by prefixing the name of the variable with `$`. All the normal dynamic variables are supported, the most useful probably being `TM_SELECTED_TEXT`. If for example we want to create a snippet which wraps the selection in a LaTeX `\textbf` command, we can make a snippet which is:
+
+```
+\textbf{$TM_SELECTED_TEXT}
+```
+
+If no text is selected the variable will not be set, so nothing will be inserted in its place. We can provide a default value by using format string syntax: `${«variable»:«default value»}`. For example:
+
+```
+\textbf{${TM_SELECTED_TEXT:no text was selected}}
+```
+
+The default value can itself contain variables or shell code. If you want the default text to contain a `}`, you need to escape it. But all other characters are used verbatim.
+
+Variables also support regular expression replacements using this syntax: `${«variable»/«regexp»/«format»/«options»}`. If the variable is not set the replacement will be performed on the empty string. For example, to prepend a bullet to each non-empty line in the selection (and insert that) we can do:
+
+```
+${TM_SELECTED_TEXT/^.+$/• $0/g}
+```
+
+## Interpolated Shell Code
+
+You can use backticks to have shell code executed when the snippet is inserted. The result from running the code gets inserted into the snippet, though with the last newline in the result removed (if present). So for example to create a snippet that wraps the selection in an HTML link, where the URL of that link comes from the clipboard, we can do:
+
+```
+<a href="`pbpaste`">$TM_SELECTED_TEXT</a>
+```
+
+Since this is normal shell code, we can write a small program. For example we can let it verify that the clipboard contains only a single line of text like this:
+
+```
+<a href="`
+    if [[ $(pbpaste|wc -l) -eq 0 ]]
+        then pbpaste
+        else echo http://example.com/
+    fi
+`">$TM_SELECTED_TEXT</a>
+```
+
+Inside shell code, the only character you need to escape is the backtick.
+
+## Tab Stops
+
+After insertion, the caret will be placed after the last character of the snippet. This is not always desirable and we can change that by using `$0` to mark where we want the caret to be. So if for example we make an HTML `div`-snippet and want the caret to end between the opening and closing tags, we could make it like this:
+
+```
+<div>
+    $0
+</div>
+```
+
+Often though we want to fill in text in several places in the snippet. Multiple tab stops can be provided by inserting `$1`-`$n`. The caret will start at `$1`, then when pressing tab it will move to `$2` and `$3` on next tab etc. until there are no more tab stops. If you do not explicitly set `$0`, the caret will be at the end of the snippet.
+
+So we could for example change the above to:
+
+```
+<div$1>
+    $0
+</div>
+```
+
+This allows us to fill in an argument and then tab on to `$0`.
+
+## Placeholders
+
+Like variables, tab stops can also have default values (and are generally referred to as placeholders when they do). The syntax is the same: `${«tab stop»:«default value»}`. And the default value can contain both text, shell code and other placeholders. So we can refine the previous example further:
+
+```
+<div${1: id="${2:some_id}"}>
+    $0
+</div>
+```
+
+Inserting this snippet will insert a `div` tag with the `id` argument selected and we can then decide either to overtype the argument (i.e. delete it) and press tab again to reach `$0`, or we can press tab immediately to get to the second tab stop (the value part of the argument) and edit that.
+
+When you edit the placeholder text, any embedded tab stops will be removed.
+
+## Mirrors
+
+There are times when you need to provide the same value several places in the inserted text and in these situations you can re-use the tab stop to signal that you want it mirrored at that location. So for example to create a LaTeX environment with a snippet, we can use:
+
+```
+\begin{${1:enumerate}}
+    $0
+\end{$1}
+```
+
+After inserting this snippet, `enumerate` will be selected and if we edit it, the changes will be reflected in the `\end` part as well.
+
+## Transformations
+
+There are situations where we want our placeholder text mirrored but with slight changes or where we want some text to appear depending on the value/presence of a placeholder.
+
+We can accomplish this by doing a regular expression substitution on the placeholder text (when mirroring it). The syntax for this is: `${«tab stop»/«regexp»/«format»/«options»}`.
+
+As an example, the Objective-C getter/setter methods (prior to the `@property` keyword) often look like this (in the [thread-unsafe form](http://ticket.macromates.com/show?ticket_id=E11D9EAF)):
+
+```
+- (id)foo
+{
+    return foo;
+}
+
+- (void)setFoo:(id)aValue
+{
+    [foo autorelease];
+    foo = [aValue retain];
+}
+```
+
+In the format string we can use `${«var»:/upcase}` to uppercase the matched character, so a snippet that only asks for the name of the instance variable once could look like this:
+
+```
+- (${1:id})${2:foo}
+{
+    return $2;
+}
+
+- (void)set${2/./${0:/upcase}/}:($1)aValue
+{
+    [$2 autorelease];
+    $2 = [aValue retain];
+}
+```
+
+We can also use conditional insertions in the format string (`${«var»:+«if-set»}`) to make decisions. For example if we create a snippet for a method we can let the return type decide whether or not the method should include a `return` statement like this:
+
+```
+- (${1:void})${2:methodName}
+{${1/void$|(.+)/${1:+\n\treturn nil;}/}
+}
+```
+
+Here we match placeholder 1 against `void` or anything (`.+`) and put the latter match in capture register 1. Then only if we did match something (other than `void`) will we insert a newline, tab and the `return nil;` text.
+
+## Multiple Choices
+
+Sometimes a placeholder can only take a limited number of values in which case we may want to show a menu with these choices.
+
+This can be done with the `${«int»|«choice 1»,…,«choice n»|}` syntax.
+
+For example:
+
+```
+color: ${1|red,green,blue|}
+```
+
+ [Text Editing](https://macromates.com/textmate/manual/text-editing)
+
+ [Table of Contents](https://macromates.com/textmate/manual/)
+
+[Commands](https://macromates.com/textmate/manual/commands) 
\ No newline at end of file