├── .gitignore
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ✂️ Save time with some snippets!
  2 | 
  3 | 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 😆!
  4 | 
  5 | Thanks to [this snippet generator](https://github.com/pawelgrzybek/snippet-generator) for making it easy!
  6 | 
  7 | ## Table of contents
  8 | 
  9 | * [Jekyll front matter](#jekyll-front-matter)
 10 |   * [Atom](#atom)
 11 |   * [VS Code](#vs-code)
 12 |   * [Sublime Text](#sublime-text)
 13 | * [Bullet points](#bullet-points)
 14 |   * [Atom](#atom-1)
 15 |   * [VS Code](#vs-code-1)
 16 |   * [Sublime Text](#sublime-text-1)
 17 | * [Code snippets](#code-snippets)
 18 |   * [Atom](#atom-2)
 19 |   * [VS Code](#vs-code-2)
 20 |   * [Sublime Text](#sublime-text-2)
 21 | * [Raw](#raw)
 22 |   * [Atom](#atom-3)
 23 |   * [VS Code](#vs-code-3)
 24 |   * [Sublime Text](#sublime-text-3)
 25 | * [Single-line Code Annotation](#single-line-code-annotation)
 26 |   * [Atom](#atom-4)
 27 |   * [VS Code](#vs-code-4)
 28 |   * [Sublime Text](#sublime-text-4)
 29 | * [Block Code Annotation](#block-code-annotation)
 30 |   * [Atom](#atom-5)
 31 |   * [VS Code](#vs-code-5)
 32 |   * [Sublime Text](#sublime-text-5)
 33 | * [Info Box](#info-box)
 34 |   * [Atom](#atom-6)
 35 |   * [VS Code](#vs-code-6)
 36 |   * [Sublime Text](#sublime-text-6)
 37 | * [Warning Box](#warning-box)
 38 |   * [Atom](#atom-7)
 39 |   * [VS Code](#vs-code-7)
 40 |   * [Sublime Text](#sublime-text-7)
 41 | * [Success Box](#success-box)
 42 |   * [Atom](#atom-8)
 43 |   * [VS Code](#vs-code-8)
 44 |   * [Sublime Text](#sublime-text-8)
 45 | * [File Description](#file-description)
 46 |   * [Atom](#atom-9)
 47 |   * [VS Code](#vs-code-9)
 48 |   * [Sublime Text](#sublime-text-9)
 49 | * [Post Image](#post-image)
 50 |   * [Atom](#atom-10)
 51 |   * [VS Code](#vs-code-10)
 52 |   * [Sublime Text](#sublime-text-10)
 53 | * [Lazy Post Image](#lazy-post-image)
 54 |   * [Atom](#atom-11)
 55 |   * [VS Code](#vs-code-11)
 56 |   * [Sublime Text](#sublime-text-11)
 57 | * [Collapsible](#collapsible)
 58 |   * [Atom](#atom-12)
 59 |   * [VS Code](#vs-code-12)
 60 |   * [Sublime Text](#sublime-text-12)
 61 | * [Parting Thoughts](#parting-thoughts)
 62 |   * [Atom](#atom-13)
 63 |   * [VS Code](#vs-code-13)
 64 |   * [Sublime Text](#sublime-text-13)
 65 | 
 66 | ## Jekyll front matter
 67 | 
 68 | ### Atom
 69 | 
 70 | ```
 71 | 'Jekyll front matter':
 72 |   'prefix': 'frontmatter'
 73 |   'body': """
 74 |     ---
 75 |     layout: page-fullwidth
 76 |     title:  "${1:Using JavaScript to Make Crispy Bacon}"
 77 |     categories:
 78 |         - ${2:JS}
 79 |     tags:
 80 |         - ${3:bacon}
 81 |     header: no
 82 |     breadcrumb: true
 83 |     meta_description: "${4:Description in the range of 80 to 155 characters.}"
 84 |     author: ${5:john_d}
 85 |     ---
 86 |   """
 87 | ```
 88 | 
 89 | ### VS Code
 90 | 
 91 | ```
 92 | "Jekyll front matter": {
 93 |   "prefix": "frontmatter",
 94 |   "body": [
 95 |     "---",
 96 |     "layout: page-fullwidth",
 97 |     "title:  \"${1:Using JavaScript to Make Crispy Bacon}\"",
 98 |     "categories:",
 99 |     "    - ${2:JS}",
100 |     "tags:",
101 |     "    - ${3:bacon}",
102 |     "header: no",
103 |     "breadcrumb: true",
104 |     "meta_description: \"${4:Description in the range of 80 to 155 characters.}\"",
105 |     "author: ${5:john_d}",
106 |     "---"
107 |   ],
108 |   "description": "Jekyll front matter"
109 | }
110 | ```
111 | 
112 | ### Sublime Text
113 | 
114 | ```
115 | <snippet>
116 |   <content><![CDATA[
117 | ---
118 | layout: page-fullwidth
119 | title:  "${1:Using JavaScript to Make Crispy Bacon}"
120 | categories:
121 |     - ${2:JS}
122 | tags:
123 |     - ${3:bacon}
124 | header: no
125 | breadcrumb: true
126 | meta_description: "${4:Description in the range of 80 to 155 characters.}"
127 | author: ${5:john_d}
128 | ---
129 | ]]></content >
130 |   <description>Jekyll front matter</description>
131 |   <tabTrigger>frontmatter</tabTrigger>
132 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
133 |   <!-- <scope >source.python</scope > -->
134 | </snippet >
135 | ```
136 | 
137 | ## Bullet points
138 | 
139 | ### Atom
140 | 
141 | ```
142 | 'Bullet Point':
143 |   'prefix': 'bullet'
144 |   'body': """
145 |     * *${1:Point 1}*: ${2:Text for point 1}
146 |   """
147 | ```
148 | 
149 | ### VS Code
150 | 
151 | ```
152 | "Bullet Point": {
153 |   "prefix": "bullet",
154 |   "body": [
155 |     "* *${1:Point 1}*: ${2:Text for point 1}"
156 |   ],
157 |   "description": "Bullet Point"
158 | }
159 | ```
160 | 
161 | ### Sublime Text
162 | 
163 | ```
164 | <snippet>
165 |   <content><![CDATA[
166 | * *${1:Point 1}*: ${2:Text for point 1}
167 | ]]></content >
168 |   <description>Bullet Point</description>
169 |   <tabTrigger>bullet</tabTrigger>
170 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
171 |   <!-- <scope >source.python</scope > -->
172 | </snippet >
173 | ```
174 | 
175 | ## Code snippets
176 | 
177 | ### Atom
178 | 
179 | ```
180 | 'Code snippet':
181 |   'prefix': 'snippet'
182 |   'body': """
183 |     <pre><code class="${1:language or 'nohighlight'}">${2:your code here}</code></pre>
184 |   """
185 | ```
186 | 
187 | ### VS Code
188 | 
189 | ```
190 | "Code snippet": {
191 |   "prefix": "snippet",
192 |   "body": [
193 |     "<pre><code class=\"${1:language or 'nohighlight'}\">${2:your code here}</code></pre>"
194 |   ],
195 |   "description": "Code snippet"
196 | }
197 | ```
198 | 
199 | ### Sublime Text
200 | 
201 | ```
202 | <snippet>
203 |   <content><![CDATA[
204 | <pre><code class="${1:language or 'nohighlight'}">${2:your code here}</code></pre>
205 | ]]></content >
206 |   <description>Code snippet</description>
207 |   <tabTrigger>snippet</tabTrigger>
208 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
209 |   <!-- <scope >source.python</scope > -->
210 | </snippet >
211 | ```
212 | 
213 | ## Raw
214 | 
215 | Liquid tags to escape mustache syntax:
216 | 
217 | ### Atom
218 | 
219 | ```
220 | 'Raw':
221 |   'prefix': 'raw'
222 |   'body': """
223 |     {% raw %}${1:your mustache-escaped content here}{% endraw %}
224 |   """
225 | ```
226 | 
227 | ### VS Code
228 | 
229 | ```
230 | "Raw": {
231 |   "prefix": "raw",
232 |   "body": [
233 |     "{% raw %}${1:your mustache-escaped content here}{% endraw %}"
234 |   ],
235 |   "description": "Raw"
236 | }
237 | ```
238 | 
239 | ### Sublime Text
240 | 
241 | ```
242 | <snippet>
243 |   <content><![CDATA[
244 | {% raw %}${1:your mustache-escaped content here}{% endraw %}
245 | ]]></content >
246 |   <description>Raw</description>
247 |   <tabTrigger>raw</tabTrigger>
248 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
249 |   <!-- <scope >source.python</scope > -->
250 | </snippet >
251 | ```
252 | 
253 | ## Single-line Code Annotation
254 | 
255 | ### Atom
256 | 
257 | ```
258 | 'annotation':
259 |   'prefix': 'annotation'
260 |   'body': """
261 |     <span class="code-annotation">${1:your annotated code}</span>
262 |   """
263 | ```
264 | 
265 | ### VS Code
266 | 
267 | ```
268 | "annotation": {
269 |   "prefix": "annotation",
270 |   "body": [
271 |     "<span class=\"code-annotation\">${1:your annotated code}</span>"
272 |   ],
273 |   "description": "annotation"
274 | }
275 | ```
276 | 
277 | ### Sublime Text
278 | 
279 | ```
280 | <snippet>
281 |   <content><![CDATA[
282 | <span class="code-annotation">${1:your annotated code}</span>
283 | ]]></content >
284 |   <description>annotation</description>
285 |   <tabTrigger>annotation</tabTrigger>
286 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
287 |   <!-- <scope >source.python</scope > -->
288 | </snippet >
289 | ```
290 | 
291 | ## Block Code Annotation
292 | 
293 | ### Atom
294 | 
295 | ```
296 | 'Block annotation':
297 |   'prefix': 'block-annotation'
298 |   'body': """
299 |     <span class="block-annotation">${1:your annotated block}</span>
300 |   """
301 | ```
302 | 
303 | ### VS Code
304 | 
305 | ```
306 | "Block annotation": {
307 |   "prefix": "block-annotation",
308 |   "body": [
309 |     "<span class=\"block-annotation\">${1:your annotated block}</span>"
310 |   ],
311 |   "description": "Block annotation"
312 | }
313 | ```
314 | 
315 | ### Sublime Text
316 | 
317 | ```
318 | <snippet>
319 |   <content><![CDATA[
320 | <span class="block-annotation">${1:your annotated block}</span>
321 | ]]></content >
322 |   <description>Block annotation</description>
323 |   <tabTrigger>block-annotation</tabTrigger>
324 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
325 |   <!-- <scope >source.python</scope > -->
326 | </snippet >
327 | ```
328 | 
329 | ## Info Box
330 | 
331 | ### Atom
332 | 
333 | ```
334 | 'Info box':
335 |   'prefix': 'info-box'
336 |   'body': """
337 |     <p class="info-box">
338 |       ${1:content here}
339 |     </p>
340 |   """
341 | ```
342 | 
343 | ### VS Code
344 | 
345 | ```
346 | "Info box": {
347 |   "prefix": "info-box",
348 |   "body": [
349 |     "<p class=\"info-box\">",
350 |     "  ${1:content here}",
351 |     "</p>"
352 |   ],
353 |   "description": "Info box"
354 | }
355 | ```
356 | 
357 | ### Sublime Text
358 | 
359 | ```
360 | <snippet>
361 |   <content><![CDATA[
362 | <p class="info-box">
363 |   ${1:content here}
364 | </p>
365 | ]]></content >
366 |   <description>Info box</description>
367 |   <tabTrigger>info-box</tabTrigger>
368 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
369 |   <!-- <scope >source.python</scope > -->
370 | </snippet >
371 | ```
372 | 
373 | ## Warning Box
374 | 
375 | ### Atom
376 | 
377 | ```
378 | 'Warning box':
379 |   'prefix': 'warning-box'
380 |   'body': """
381 |     <p class="info-box warning">
382 |       ${1:content here}
383 |     </p>
384 |   """
385 | ```
386 | 
387 | ### VS Code
388 | 
389 | ```
390 | "Warning box": {
391 |   "prefix": "warning-box",
392 |   "body": [
393 |     "<p class=\"info-box warning\">",
394 |     "  ${1:content here}",
395 |     "</p>"
396 |   ],
397 |   "description": "Warning box"
398 | }
399 | ```
400 | 
401 | ### Sublime Text
402 | 
403 | ```
404 | <snippet>
405 |   <content><![CDATA[
406 | <p class="info-box warning">
407 |   ${1:content here}
408 | </p>
409 | ]]></content >
410 |   <description>Warning box</description>
411 |   <tabTrigger>warning-box</tabTrigger>
412 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
413 |   <!-- <scope >source.python</scope > -->
414 | </snippet >
415 | ```
416 | 
417 | ## Success Box
418 | 
419 | ### Atom
420 | 
421 | ```
422 | 'Success box':
423 |   'prefix': 'success-box'
424 |   'body': """
425 |     <p class="info-box success">
426 |       ${1:content here}
427 |     </p>
428 |   """
429 | ```
430 | 
431 | ### VS Code
432 | 
433 | ```
434 | "Success box": {
435 |   "prefix": "success-box",
436 |   "body": [
437 |     "<p class=\"info-box success\">",
438 |     "  ${1:content here}",
439 |     "</p>"
440 |   ],
441 |   "description": "Success box"
442 | }
443 | ```
444 | 
445 | ### Sublime Text
446 | 
447 | ```
448 | <snippet>
449 |   <content><![CDATA[
450 | <p class="info-box success">
451 |   ${1:content here}
452 | </p>
453 | ]]></content >
454 |   <description>Success box</description>
455 |   <tabTrigger>success-box</tabTrigger>
456 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
457 |   <!-- <scope >source.python</scope > -->
458 | </snippet >
459 | ```
460 | 
461 | ## File Description
462 | 
463 | ### Atom
464 | 
465 | ```
466 | 'File description':
467 |   'prefix': 'file-description'
468 |   'body': """
469 |     <p class="file-desc"><span>${1:file-name.js}</span></p>
470 |   """
471 | ```
472 | 
473 | ### VS Code
474 | 
475 | ```
476 | "File description": {
477 |   "prefix": "file-description",
478 |   "body": [
479 |     "<p class=\"file-desc\"><span>${1:file-name.js}</span></p>"
480 |   ],
481 |   "description": "File description"
482 | }
483 | ```
484 | 
485 | ### Sublime Text
486 | 
487 | ```
488 | <snippet>
489 |   <content><![CDATA[
490 | <p class="file-desc"><span>${1:file-name.js}</span></p>
491 | ]]></content >
492 |   <description>File description</description>
493 |   <tabTrigger>file-description</tabTrigger>
494 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
495 |   <!-- <scope >source.python</scope > -->
496 | </snippet >
497 | ```
498 | 
499 | ## Post Image
500 | 
501 | ### Atom
502 | 
503 | ```
504 | 'image':
505 |   'prefix': 'post-image'
506 |   'body': """
507 |     <p class="text-center">
508 |      <img src="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
509 |     </p>
510 |   """
511 | ```
512 | 
513 | ### VS Code
514 | 
515 | ```
516 | "image": {
517 |   "prefix": "post-image",
518 |   "body": [
519 |     "<p class=\"text-center\">",
520 |     " <img src=\"${1:relative path}\" width=\"${2:width}\" height=\"${3:height}\" class=\"slight-shadow\" alt=\"${4:image description}\">",
521 |     "</p>"
522 |   ],
523 |   "description": "image"
524 | }
525 | ```
526 | 
527 | ### Sublime Text
528 | 
529 | ```
530 | <snippet>
531 |   <content><![CDATA[
532 | <p class="text-center">
533 |  <img src="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
534 | </p>
535 | ]]></content >
536 |   <description>image</description>
537 |   <tabTrigger>post-image</tabTrigger>
538 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
539 |   <!-- <scope >source.python</scope > -->
540 | </snippet >
541 | ```
542 | 
543 | ## Lazy Post Image
544 | 
545 | ### Atom
546 | 
547 | ```
548 | 'Lazy image':
549 |   'prefix': 'post-image-lazy'
550 |   'body': """
551 |     <p class="text-center">
552 |      <img data-original="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
553 |     </p>
554 |   """
555 | ```
556 | 
557 | ### VS Code
558 | 
559 | ```
560 | "Lazy image": {
561 |   "prefix": "post-image-lazy",
562 |   "body": [
563 |     "<p class=\"text-center\">",
564 |     " <img data-original=\"${1:relative path}\" width=\"${2:width}\" height=\"${3:height}\" class=\"slight-shadow\" alt=\"${4:image description}\">",
565 |     "</p>"
566 |   ],
567 |   "description": "Lazy image"
568 | }
569 | ```
570 | 
571 | ### Sublime Text
572 | 
573 | ```
574 | <snippet>
575 |   <content><![CDATA[
576 | <p class="text-center">
577 |  <img data-original="${1:relative path}" width="${2:width}" height="${3:height}" class="slight-shadow" alt="${4:image description}">
578 | </p>
579 | ]]></content >
580 |   <description>Lazy image</description>
581 |   <tabTrigger>post-image-lazy</tabTrigger>
582 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
583 |   <!-- <scope >source.python</scope > -->
584 | </snippet >
585 | ```
586 | 
587 | ## Collapsible
588 | 
589 | ### Atom
590 | 
591 | ```
592 | 'Collapsible':
593 |   'prefix': 'collapsible'
594 |   'body': """
595 |     <gator-collapse title="${1:title here}">
596 |       <p>${2:content here}</p>
597 |     </gator-collapse>
598 |   """
599 | ```
600 | 
601 | ### VS Code
602 | 
603 | ```
604 | "Collapsible": {
605 |   "prefix": "collapsible",
606 |   "body": [
607 |     "<gator-collapse title=\"${1:title here}\">",
608 |     "  <p>${2:content here}</p>",
609 |     "</gator-collapse>"
610 |   ],
611 |   "description": "Collapsible"
612 | }
613 | ```
614 | 
615 | ### Sublime Text
616 | 
617 | ```
618 | <snippet>
619 |   <content><![CDATA[
620 | <gator-collapse title="${1:title here}">
621 |   <p>${2:content here}</p>
622 | </gator-collapse>
623 | ]]></content >
624 |   <description>Collapsible</description>
625 |   <tabTrigger>collapsible</tabTrigger>
626 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
627 |   <!-- <scope >source.python</scope > -->
628 | </snippet >
629 | ```
630 | 
631 | ## Parting Thoughts
632 | 
633 | ### Atom
634 | 
635 | ```
636 | 'Parting thoughts':
637 |   'prefix': 'parting-thoughts'
638 |   'body': """
639 |     <p class="t70 text-center">
640 |       ${1:your text here}
641 |     </p>
642 |   """
643 | ```
644 | 
645 | ### VS Code
646 | 
647 | ```
648 | "Parting thoughts": {
649 |   "prefix": "parting-thoughts",
650 |   "body": [
651 |     "<p class=\"t70 text-center\">",
652 |     "  ${1:your text here}",
653 |     "</p>"
654 |   ],
655 |   "description": "Parting thoughts"
656 | }
657 | ```
658 | 
659 | ### Sublime Text
660 | 
661 | ```
662 | <snippet>
663 |   <content><![CDATA[
664 | <p class="t70 text-center">
665 |   ${1:your text here}
666 | </p>
667 | ]]></content >
668 |   <description>Parting thoughts</description>
669 |   <tabTrigger>parting-thoughts</tabTrigger>
670 |   <!-- Optional: Set a scope to limit where the snippet will trigger -->
671 |   <!-- <scope >source.python</scope > -->
672 | </snippet >
673 | ```
674 | 


--------------------------------------------------------------------------------