Brian Zelip
Brian Zelip

Reputation: 3201

emmet snippet extension indent head and body from html and insert extra line breaks

I have a question about indenting and inserting extra blank lines into a starter html5 document using a custom abbreviation in my snippets.json extension.

My custom abbreviation looks like this:

"doc": "html[lang=${locale}]>(head>meta[charset=UTF-8]+title{${1:PageTitle}}+link:css)+(body>(header+main+footer)"

The above abbreviation produces the following starter html:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

I would like to indent everything between the <html> tags one more level, and insert a blank line after the <html lang="en-US">, </head>, </header>, </main>, </footer>, and </html> tags.

Can anyone offer the solution?

Upvotes: 2

Views: 788

Answers (1)

Sergey Chikuyonok
Sergey Chikuyonok

Reputation: 2699

  1. Inner indentation of some elements is controlled by format.noIndentTags preference: http://docs.emmet.io/customization/preferences/ You can simply set this preference to null in your preferences.json
  2. Use {${newline}} expression to insert newline. E.g. output newline variable in text node. You can also create your own snippet as a shortcut for this expression or create your own snippet that simply outputs newline.

Upvotes: 7

Related Questions