CODEWITHSUNDEEP
jqueryhtmlatom-editor
Alexander Solonik
Alexander Solonik

Reputation: 10230

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.

Upvotes: 0

Views: 2027

Answers (2)

Patrice De Saint Steban
Patrice De Saint Steban

Reputation: 743

You must use .text.html instead of .source.html for html snippets :

".text.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>
            """

Upvotes: 2

Stefan
Stefan

Reputation: 3041

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>
            """

Upvotes: 5

Related Questions