Alexander Solonik Alexander Solonik - 5 months ago 53
jQuery Question

Simple HTML atom snippet not working

I was just trying to create a simple HTML snippet in Atom text editor and i was following the instructions from this tutorial.

I basically added the following snippet to my snippets.cson file:

".source.html":
"HTML snippet":
"prefix": "spithtml"
"body": """<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title here</title>
<link rel="author" href="humans.txt">
</head>

<body>

</body>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

</body>
</html>
"""


The above snippet means everytime i type
spithtml
in my text editor, i would like the HTML skeleton to appear.

The above snippet does't work, in fact i get an error in the editor saying the following:

C:\Users\myname\.atom\snippets.cson: unexpected :


Which does not make sense , because my other snippet for jQuery works just fine, like so:

".source.js":
"document ready":
"prefix": "$ready"
"body": """$(function(){
$1
});"""


And has exactly the same syntax. So what am i missing, how do i create a simple HTML snippet in Atom ? surprisingly there is alot of documentation on how to use atom packages, but not on how to create a simple HTML snippet.

Thank you.

Alex-z.

Answer

Your body attribute is indented to far it should inline with prefix like this:

".source.html":
     "HTML snippet":
        "prefix": "spithtml"
        "body": """<!doctype html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>Title here</title>
                    <link rel="author" href="humans.txt">
                </head>

                <body>

                </body>

                    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                </body>
            </html>
            """
Comments