Simple HTML atom snippet not working

Question

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.

I have a problem creating HTML snippets , my JS and jQuery snippets seem to be working perfect. — Alexander Solonik
– Alexander Solonik, Commented Jul 29, 2015 at 13:26

Stefan · Accepted Answer · 2015-07-29 13:31:34Z

5

+50

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

answered Jul 29, 2015 at 13:31

Stefan

3,0811 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stefan Over a year ago

Also note that this is scoped, if you want it to work with any .html file change ".source.html" to ".html"

Alexander Solonik Over a year ago

your solution work but now i have two snippets , see here chopapp.com/#4e3h4rxm , the 1st one does't work , the 2nd one does , any idea , why ?

Stefan Over a year ago

You've already declared ".html" so the second snippet is overriding it. pastebin.com/KzT3uG8i

Patrice De Saint Steban · Accepted Answer · 2016-06-06 11:59:49Z

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

Collectives™ on Stack Overflow

Simple HTML atom snippet not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related