editor-snippets

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

editor-snippets

★ 12 Open GitHub ↗

Snippets for VS Code, Atom & Sublime Text to help with writing posts for Alligator.io

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ✂️ Save time with some snippets!

Here are some useful snippets for writing posts for Alligator.io. Each snippet has a version for Atom, VS Code and Sublime Text. Sorry VI users 😆!

Thanks to [this snippet generator](https://github.com/pawelgrzybek/snippet-generator) for making it easy!

## Table of contents

* [Jekyll front matter](#jekyll-front-matter)
  * [Atom](#atom)
  * [VS Code](#vs-code)
  * [Sublime Text](#sublime-text)
* [Bullet points](#bullet-points)
  * [Atom](#atom-1)
  * [VS Code](#vs-code-1)
  * [Sublime Text](#sublime-text-1)
* [Code snippets](#code-snippets)
  * [Atom](#atom-2)
  * [VS Code](#vs-code-2)
  * [Sublime Text](#sublime-text-2)
* [Raw](#raw)
  * [Atom](#atom-3)
  * [VS Code](#vs-code-3)
  * [Sublime Text](#sublime-text-3)
* [Single-line Code Annotation](#single-line-code-annotation)
  * [Atom](#atom-4)
  * [VS Code](#vs-code-4)
  * [Sublime Text](#sublime-text-4)
* [Block Code Annotation](#block-code-annotation)
  * [Atom](#atom-5)
  * [VS Code](#vs-code-5)
  * [Sublime Text](#sublime-text-5)
* [Info Box](#info-box)
  * [Atom](#atom-6)
  * [VS Code](#vs-code-6)
  * [Sublime Text](#sublime-text-6)
* [Warning Box](#warning-box)
  * [Atom](#atom-7)
  * [VS Code](#vs-code-7)
  * [Sublime Text](#sublime-text-7)
* [Success Box](#success-box)
  * [Atom](#atom-8)
  * [VS Code](#vs-code-8)
  * [Sublime Text](#sublime-text-8)
* [File Description](#file-description)
  * [Atom](#atom-9)
  * [VS Code](#vs-code-9)
  * [Sublime Text](#sublime-text-9)
* [Post Image](#post-image)
  * [Atom](#atom-10)
  * [VS Code](#vs-code-10)
  * [Sublime Text](#sublime-text-10)
* [Lazy Post Image](#lazy-post-image)
  * [Atom](#atom-11)
  * [VS Code](#vs-code-11)
  * [Sublime Text](#sublime-text-11)
* [Collapsible](#collapsible)
  * [Atom](#atom-12)
  * [VS Code](#vs-code-12)
  * [Sublime Text](#sublime-text-12)
* [Parting Thoughts](#parting-thoughts)
  * [Atom](#atom-13)
  * [VS Code](#vs-code-13)
  * [Sublime Text](#sublime-text-13)

## Jekyll front matter

### Atom

```
'Jekyll front matter':
  'prefix': 'frontmatter'
  'body': """
    ---
    layout: page-fullwidth
    title:  "${1:Using JavaScript to Make Crispy Bacon}"
    categories:
        - ${2:JS}
    tags:
        - ${3:bacon}
    header: no
    breadcrumb: true
    meta_description: "${4:Description in the range of 80 to 155 characters.}"
    author: ${5:john_d}
    ---
  """
```

### VS Code

```
"Jekyll front matter": {
  "prefix": "frontmatter",
  "body": [
    "---",
    "layout: page-fullwidth",
    "title:  \"${1:Using JavaScript to Make Crispy Bacon}\"",
    "categories:",
    "    - ${2:JS}",
    "tags:",
    "    - ${3:bacon}",
    "header: no",
    "breadcrumb: true",
    "meta_description: \"${4:Description in the range of 80 to 155 characters.}\"",
    "author: ${5:john_d}",
    "---"
  ],
  "description": "Jekyll front matter"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
---
layout: page-fullwidth
title: "${1:Using JavaScript to Make Crispy Bacon}"
categories:
 - ${2:JS}
tags:
 - ${3:bacon}
header: no
breadcrumb: true
meta_description: "${4:Description in the range of 80 to 155 characters.}"
author: ${5:john_d}
---
]]></content >
 <description>Jekyll front matter</description>
 <tabTrigger>frontmatter</tabTrigger>
 
 
</snippet >
```

## Bullet points

### Atom

```
'Bullet Point':
  'prefix': 'bullet'
  'body': """
    * *${1:Point 1}*: ${2:Text for point 1}
  """
```

### VS Code

```
"Bullet Point": {
  "prefix": "bullet",
  "body": [
    "* *${1:Point 1}*: ${2:Text for point 1}"
  ],
  "description": "Bullet Point"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
* *${1:Point 1}*: ${2:Text for point 1}
]]></content >
 <description>Bullet Point</description>
 <tabTrigger>bullet</tabTrigger>
 
 
</snippet >
```

## Code snippets

### Atom

```
'Code snippet':
 'prefix': 'snippet'
 'body': """
 <pre><code class="${1:language or 'nohighlight'}">${2:your code here}</code></pre>
 """
```

### VS Code

```
"Code snippet": {
 "prefix": "snippet",
 "body": [
 "<pre><code class=\"${1:language or 'nohighlight'}\">${2:your code here}</code></pre>"
 ],
 "description": "Code snippet"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
<pre><code class="${1:language or 'nohighlight'}">${2:your code here}</code></pre>
]]></content >
 <description>Code snippet</description>
 <tabTrigger>snippet</tabTrigger>
 
 
</snippet >
```

## Raw

Liquid tags to escape mustache syntax:

### Atom

```
'Raw':
  'prefix': 'raw'
  'body': """
    {% raw %}${1:your mustache-escaped content here}{% endraw %}
  """
```

### VS Code

```
"Raw": {
  "prefix": "raw",
  "body": [
    "{% raw %}${1:your mustache-escaped content here}{% endraw %}"
  ],
  "description": "Raw"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
{% raw %}${1:your mustache-escaped content here}{% endraw %}
]]></content >
 <description>Raw</description>
 <tabTrigger>raw</tabTrigger>
 
 
</snippet >
```

## Single-line Code Annotation

### Atom

```
'annotation':
 'prefix': 'annotation'
 'body': """
 ${1:your annotated code}
 """
```

### VS Code

```
"annotation": {
 "prefix": "annotation",
 "body": [
 "${1:your annotated code}"
 ],
 "description": "annotation"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
${1:your annotated code}
]]></content >
 <description>annotation</description>
 <tabTrigger>annotation</tabTrigger>
 
 
</snippet >
```

## Block Code Annotation

### Atom

```
'Block annotation':
 'prefix': 'block-annotation'
 'body': """
 ${1:your annotated block}
 """
```

### VS Code

```
"Block annotation": {
 "prefix": "block-annotation",
 "body": [
 "${1:your annotated block}"
 ],
 "description": "Block annotation"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
${1:your annotated block}
]]></content >
 <description>Block annotation</description>
 <tabTrigger>block-annotation</tabTrigger>
 
 
</snippet >
```

## Info Box

### Atom

```
'Info box':
 'prefix': 'info-box'
 'body': """
 
 ${1:content here}
 
 """
```

### VS Code

```
"Info box": {
 "prefix": "info-box",
 "body": [
 "",
 " ${1:content here}",
 ""
 ],
 "description": "Info box"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 ${1:content here}

]]></content >
 <description>Info box</description>
 <tabTrigger>info-box</tabTrigger>
 
 
</snippet >
```

## Warning Box

### Atom

```
'Warning box':
 'prefix': 'warning-box'
 'body': """
 
 ${1:content here}
 
 """
```

### VS Code

```
"Warning box": {
 "prefix": "warning-box",
 "body": [
 "",
 " ${1:content here}",
 ""
 ],
 "description": "Warning box"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 ${1:content here}

]]></content >
 <description>Warning box</description>
 <tabTrigger>warning-box</tabTrigger>
 
 
</snippet >
```

## Success Box

### Atom

```
'Success box':
 'prefix': 'success-box'
 'body': """
 
 ${1:content here}
 
 """
```

### VS Code

```
"Success box": {
 "prefix": "success-box",
 "body": [
 "",
 " ${1:content here}",
 ""
 ],
 "description": "Success box"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 ${1:content here}

]]></content >
 <description>Success box</description>
 <tabTrigger>success-box</tabTrigger>
 
 
</snippet >
```

## File Description

### Atom

```
'File description':
 'prefix': 'file-description'
 'body': """
 ${1:file-name.js}
 """
```

### VS Code

```
"File description": {
 "prefix": "file-description",
 "body": [
 "${1:file-name.js}"
 ],
 "description": "File description"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
${1:file-name.js}
]]></content >
 <description>File description</description>
 <tabTrigger>file-description</tabTrigger>
 
 
</snippet >
```

## Post Image

### Atom

```
'image':
 'prefix': 'post-image'
 'body': """
 
 <img src="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
 
 """
```

### VS Code

```
"image": {
 "prefix": "post-image",
 "body": [
 "",
 " <img src=\"${1:relative path}\" width=\"${2:width}\" height=\"${3:height}\" class=\"slight-shadow\" alt=\"${4:image description}\">",
 ""
 ],
 "description": "image"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 <img src="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">

]]></content >
 <description>image</description>
 <tabTrigger>post-image</tabTrigger>
 
 
</snippet >
```

## Lazy Post Image

### Atom

```
'Lazy image':
 'prefix': 'post-image-lazy'
 'body': """
 
 <img data-original="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
 
 """
```

### VS Code

```
"Lazy image": {
 "prefix": "post-image-lazy",
 "body": [
 "",
 " <img data-original=\"${1:relative path}\" width=\"${2:width}\" height=\"${3:height}\" class=\"slight-shadow\" alt=\"${4:image description}\">",
 ""
 ],
 "description": "Lazy image"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 <img data-original="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">

]]></content >
 <description>Lazy image</description>
 <tabTrigger>post-image-lazy</tabTrigger>
 
 
</snippet >
```

## Collapsible

### Atom

```
'Collapsible':
 'prefix': 'collapsible'
 'body': """
 <gator-collapse title="${1:title here}">
 ${2:content here}
 </gator-collapse>
 """
```

### VS Code

```
"Collapsible": {
 "prefix": "collapsible",
 "body": [
 "<gator-collapse title=\"${1:title here}\">",
 " ${2:content here}",
 "</gator-collapse>"
 ],
 "description": "Collapsible"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[
<gator-collapse title="${1:title here}">
 ${2:content here}
</gator-collapse>
]]></content >
 <description>Collapsible</description>
 <tabTrigger>collapsible</tabTrigger>
 
 
</snippet >
```

## Parting Thoughts

### Atom

```
'Parting thoughts':
 'prefix': 'parting-thoughts'
 'body': """
 
 ${1:your text here}
 
 """
```

### VS Code

```
"Parting thoughts": {
 "prefix": "parting-thoughts",
 "body": [
 "",
 " ${1:your text here}",
 ""
 ],
 "description": "Parting thoughts"
}
```

### Sublime Text

```
<snippet>
 <content><![CDATA[

 ${1:your text here}

]]></content >
 <description>Parting thoughts</description>
 <tabTrigger>parting-thoughts</tabTrigger>
 
 
</snippet >
```

editor-snippets

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README