Skip to content

Instantly share code, notes, and snippets.

@rsgranne
Last active August 29, 2023 18:56
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rsgranne/de8f406066dc2f198b277843b255516d to your computer and use it in GitHub Desktop.
Save rsgranne/de8f406066dc2f198b277843b255516d to your computer and use it in GitHub Desktop.
{
/*
// 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"
}
// Version 1.5 2022-07-06
*/
"Anchor": {
"prefix": "a",
"body": [
"<a href=\"${1}\">${0}</a>"
],
"description": "<a>: Anchor (link)"
},
"Address": {
"prefix": "address",
"body": [
"<address>",
"\t${0}",
"</address>"
],
"description": [
"<address>: Author contact",
"info, indented"
]
},
"Article": {
"prefix": "article",
"body": [
"<article>",
"\t${0}",
"</article>"
],
"description": "<article>, indented"
},
"Aside": {
"prefix": "aside",
"body": [
"<aside>",
"\t${0}",
"</aside>"
],
"description": "<aside>, indented"
},
"Blockquote": {
"prefix": "blockquote",
"body": [
"<blockquote>",
"\t${0}",
"</blockquote>"
],
"description": "<aside>, indented"
},
"Bold": {
"prefix": "b",
"body": [
"<b>${1}</b>${0}"
],
"description": "<b>: Stylistically bold"
},
"Description List": {
"prefix": "dl",
"body": [
"<dl>",
"\t${0}",
"</dl>"
],
"description": [
"<dl>: Description list,",
"indented"
]
},
"Description Data": {
"prefix": "dd",
"body": [
"<dd>${0}</dd>"
],
"description": "<dd>: Description list data"
},
"Description Term": {
"prefix": "dt",
"body": [
"<dt>${0}</dt>"
],
"description": "<dt>: Description list term"
},
"Division": {
"prefix": "div",
"body": [
"<div>",
"\t${0}",
"</div>"
],
"description": "<div>, indented"
},
"Emphasis": {
"prefix": "em",
"body": [
"<em>${0}</em>"
],
"description": "<em>: Emphasis"
},
"Figure": {
"prefix": "figure",
"body": [
"<figure>",
"\t${0}",
"</figure>"
],
"description": "<figure>, indented"
},
"Figure Caption": {
"prefix": "figcaption",
"body": [
"<figcaption>",
"\t${0}",
"</figcaption>"
],
"description": [
"figcaption>: Figure caption,",
"indented"
]
},
"Footer": {
"prefix": "footer",
"body": [
"<footer>",
"\t${0}",
"</footer>"
],
"description": "<footer>, indented"
},
"Head": {
"prefix": "head",
"body": [
"<head>",
"\t${0}",
"</head>"
],
"description": "<head>, indented"
},
"Header": {
"prefix": "header",
"body": [
"<header>",
"\t${0}",
"</header>"
],
"description": "<header>, indented"
},
"HTML": {
"prefix": "html",
"body": [
"<html>",
"\t${0}",
"</html>"
],
"description": "<html>, indented"
},
"Image": {
"prefix": "img",
"body": [
"<img src=\"${0}\" alt=\"\" width=\"\" height=\"\" srcset=\"\">"
],
"description": "<img>: Image"
},
"Italic": {
"prefix": "i",
"body": [
"<i>${0}</i>"
],
"description": "<i>: Stylistically italic"
},
"Link": {
"prefix": "link",
"body": [
"<link rel=\"stylesheet\" href=\"${0}\">"
],
"description": "<link>, indented"
},
"List Item": {
"prefix": "li",
"body": [
"<li>${0}</li>"
],
"description": "<li>: List Item"
},
"Main": {
"prefix": "main",
"body": [
"<main>",
"\t${0}",
"</main>"
],
"description": [
"<main>: Main area,",
"indented"
]
},
"Meta UTF-8": {
"prefix": "meta",
"body": [
"<meta charset=\"UTF-8\">${0}"
],
"description": "<meta>: UTF-8"
},
"Navigation": {
"prefix": "nav",
"body": [
"<nav>",
"\t${0}",
"</nav>"
],
"description": "<nav>: Navigation, indented"
},
"Option": {
"prefix": "option",
"body": [
"<option>${1}</option>${0}"
],
"description": "<option>: No value attribute"
},
"Ordered List": {
"prefix": "ol",
"body": [
"<ol>",
"\t${0}",
"</ol>"
],
"description": [
"<ol>: Ordered list",
"indented"
]
},
"Ordered List with List Items": {
"prefix": "ol+",
"body": [
"<ol>",
"\t<li>${1}</li>",
"\t<li>${2}</li>",
"\t<li>${3}</li>${0}",
"</ol>"
],
"description": [
"<ol><li>: Ordered list & 3 list",
"items, indented"
]
},
"Paragraph": {
"prefix": "p",
"body": [
"<p>",
"\t${0}",
"</p>"
],
"description": "<p>: Paragraph, indented"
},
"Script": {
"prefix": "script",
"body": [
"<script src=\"${0}\"></script>"
],
"description": "<script src>"
},
"Section": {
"prefix": "section",
"body": [
"<section>",
"\t${0}",
"</section>"
],
"description": "<section>, indented"
},
"Strong": {
"prefix": "strong",
"body": [
"<strong>${0}</strong>"
],
"description": "<strong>: Strong emphasis"
},
"Style": {
"prefix": "style",
"body": [
"<style>",
"\t${0}",
"</style>"
],
"description": "<style>, indented"
},
"Table": {
"prefix": "table",
"body": [
"<table>",
"\t${0}",
"</table>"
],
"description": "<table>, indented"
},
"Table Caption": {
"prefix": "caption",
"body": [
"<caption>",
"\t${0}",
"</caption>"
],
"description": [
"<caption>: Table caption,",
"indented"
]
},
"Table Data Cell": {
"prefix": "td",
"body": [
"<td>${0}</td>"
],
"description": "<td>: Table data cell"
},
"Table Header Cell": {
"prefix": "th",
"body": [
"<th>${0}</th>"
],
"description": "<th>: Table header cell"
},
"Table Row": {
"prefix": "tr",
"body": [
"<tr>",
"\t${0}",
"</tr>"
],
"description": "<tr>: Table row, indented"
},
"Table Row & Data Cell": {
"prefix": "trd",
"body": [
"<tr>",
"\t<td>${0}</td>",
"</tr>"
],
"description": [
"<tr><td>: Table row",
"& data cell"
]
},
"Table Row & Header Cell": {
"prefix": "trh",
"body": [
"<tr>",
"\t<th>${0}</th>",
"</tr>"
],
"description": [
"<tr><th>: Table row",
"& header cell"
]
},
"Unordered List": {
"prefix": "ul",
"body": [
"<ul>",
"\t${0}",
"</ul>"
],
"description": [
"<ul>: Unordered list,",
"indented"
]
},
"Unordered List with List Items": {
"prefix": "ul+",
"body": [
"<ul>",
"\t<li>${1}</li>",
"\t<li>${2}</li>",
"\t<li>${0}</li>",
"</ul>"
],
"description": [
"<ul><li>: Unordered list & 3 list",
"items, indented"
]
},
"Video": {
"prefix": "video",
"body": [
"<video src=\"\" poster=\"\" width=\"\" height=\"\" controls></video>"
],
"description": [
"<video>: Video player,",
"1 video source"
]
},
"Video with 2+ sources": {
"prefix": "video+",
"body": [
"<video poster=\"\" width=\"\" height=\"\" controls>",
"\t<source src=\"${1}\" type=\"video/webm\">",
"\t<source src=\"${2}\" type=\"video/mp4\">",
"</video>"
],
"description": [
"<video>: Video player,",
"2+ video sources, indented"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment