atom / language-html Goto Github PK

HTML package for Atom

License: Other

CoffeeScript 94.78% JavaScript 5.22%

language-html's Introduction

Atom

Atom and all repositories under Atom will be archived on December 15, 2022. Learn more in our official announcement

Atom is a hackable text editor for the 21st century, built on Electron, and based on everything we love about our favorite editors. We designed it to be deeply customizable, but still approachable using the default configuration.

Visit atom.io to learn more or visit the Atom forum.

Follow @AtomEditor on Twitter for important announcements.

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Documentation

If you want to read about using Atom or developing packages in Atom, the Atom Flight Manual is free and available online. You can find the source to the manual in atom/flight-manual.atom.io.

The API reference for developing packages is also documented on Atom.io.

Installing

Prerequisites

macOS

Download the latest Atom release.

Atom will automatically update when a new release is available.

Windows

Download the latest Atom installer. AtomSetup.exe is 32-bit. For 64-bit systems, download AtomSetup-x64.exe.

Atom will automatically update when a new release is available.

You can also download atom-windows.zip (32-bit) or atom-x64-windows.zip (64-bit) from the releases page. The .zip version will not automatically update.

Using Chocolatey? Run cinst Atom to install the latest version of Atom.

Linux

Atom is only available for 64-bit Linux systems.

Configure your distribution's package manager to install and update Atom by following the Linux installation instructions in the Flight Manual. You will also find instructions on how to install Atom's official Linux packages without using a package repository, though you will not get automatic updates after installing Atom this way.

Archive extraction

An archive is available for people who don't want to install atom as root.

This version enables you to install multiple Atom versions in parallel. It has been built on Ubuntu 64-bit, but should be compatible with other Linux distributions.

Install dependencies (on Ubuntu):

sudo apt install git libasound2 libcurl4 libgbm1 libgcrypt20 libgtk-3-0 libnotify4 libnss3 libglib2.0-bin xdg-utils libx11-xcb1 libxcb-dri3-0 libxss1 libxtst6 libxkbfile1

Download atom-amd64.tar.gz from the Atom releases page.
Run tar xf atom-amd64.tar.gz in the directory where you want to extract the Atom folder.
Launch Atom using the installed atom command from the newly extracted directory.

The Linux version does not currently automatically update so you will need to repeat these steps to upgrade to future releases.

Building

Discussion

Discuss Atom on GitHub Discussions

License

MIT

When using the Atom or other GitHub logos, be sure to follow the GitHub logo guidelines.

language-html's People

Contributors

Stargazers

Watchers

Forkers

sangohan cenderin robby guivinicius jacobbednarz olistik missmaggiemo edmaine smfoote sneagan johncatley fiveisprime joseph-hurtado andretw erikdonohoo boborbt libdc luse postcasio ryansobol bobber205 haraldson roypeled thefivetoes ddx32 casesandberg jamygolden wesohaire xlaywan dcalhoun gongfupanada frozzare peirancao talon1024 liuyuan87 heinst burodepeper darobin philippeperret yomybaby thunderkeg redbassett wzxsgcjdtc weshguillaume davidepastore peterjohnhunt w3fs drseil crystalw oyyd aadilzbhatti louyangde rodmax cooljl31 pkdevboxy dsesar bjsunhe mariajoaomirapaulo vjjrmn tymon555 ambyos damnedscholar kevinastone anabel-ed bdjs zpartakov gitter-badger danosier moritzkn a-espinoza runt18 caleb531 ingramz root75 sherlyc commiebstrd julesbravo mattstratton jffi rubenamado chriswburke krispuckett marks1024 kleopatra999 kentcdodds rebeccadeal jacobcward anefzaoui alkomp bennypowers jeremip11 dnukala7 mark-schaal dlwilson88 contestabili-zz ricehiroko jrectenwald puddletowndesign hungarian-notation murkbgith

language-html's Issues

Script tag classes change depending on indent

<script type="text/javascript" src="script.js"></script>

is recognized as text html basic with a child meta tag any html, whilst

    <script type="text/javascript" src="script.js"></script>

is recognized as text html basic with a child source js embedded html.
I don't know which is intended, but the fact that it's changing depending on its indent is weird, no?

Single quote in html comment section should be ignored

I just generated a sample project using using the Ionic Framework and has an html file which has a line of text enclosed as a comment. You can see from the screenshot that it colors the code incorrectly as it thinks the single quote, uses as an apostrophe, is not handled properly.

I am running version 0.188.0 of the Atom editor.

To recreate it simply install the Ionic framework and generate a project. Open the html file index.html in sample/www. It shows the problem at line 21. See screenshot below.

snippets

It's impossible for me to write HTML snippets. Tried to configure some but without luck. Tried using: .text.html.basic also tried a snippet for CSS using .source.css and this works. Any solutions for that?

Autocompleting of html tags with dashes fails

If you have a structure like the following:

<div>
    <my-component>
</div>

When you attempt to type </ after the <my-component> tag it will autocomplete to close it as a </div>.

Are autocomplete rules part of this package or another package? Sorry if this is the wrong repository but this issue has been driving me nuts :)

= not assigned a scope

In HTML code such as:

<html lang="en">

<link href="http://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic" rel="stylesheet" type="text/css">

the = is not assigned a scope. It seems to me that it should be a part of the opeator class. No?

Multiple language syntax highlighting within html files

In an html file, css and js highlighting inline would be nice.

Comment insertion point

When using the shortcut CMD+/ to create an HTHML comment, please make the comment insertion point where the cursor is. Currently comments are inserted at the beginning of a line, whether they were intended to start there or not. Additionally space is added inside the comment equal to the number of space from the start of the line to where the cursor is located, e.g., eight spaces.

In the attached screenshot, the 1st comment should start directly above the first div (where the cursor was, i.e., like the comment above the 2nd div).

'html' does not provide entire snippet

Whenever I simply type 'html' (without singlequotes) it does not include the doctype or charset additions.

Tried reinstalling to no avail...help me -___-

Port TextMate's “Wrap Selection In Tag”

I regularly mash ctrl-shift-w in TextMate; it wraps the current selection in <p>…</p>, highlights both ‘p’ characters letting me type a replacement, then unlatches the selection as soon as I hit space (as I continue to type an attribute/value pair). It's pretty awesome.

Anyone up for porting it over?

TextMate's “Wrap Selection In Tag”

Syntax highlighting.

HTML Syntax highlighting does not properly recognize space delineated element attributes.
Example:

<input onclick="foo()">  // This is considered valid
<input onclick=foo() >    // This is not considered valid

Closing tag not recognized on 12th HTML element within a p element

As I was writing a rather extensive p tag that contained a lot of u and i tags, I noticed that all of my text after a certain closing u tag was the same blue as the tagname within the brackets. I thought I had some syntax error, so I checked my HTML and found it to be error free. I thought nothing of it, and went on my merry way.

Then, a few p tags later, the same thing happened again. That's when I decided to count, and found that the syntax highlighting breaks at or around the 12th enclosed tag. This issue is reproducible with the following code:

<p>
    <u>1</u> to <u>2</2> to <u>3</u> to <u>4</u> to <u>5</u> to <u>6</u>
    to <u>7</u> to <u>8</u> to <u>9</u> to <u>10</u> to <u>11</u> to <u>12</u>
    to <u>broken starting here</u>
</p>

Convoluted snippet expansion?

If you type h1, it expands out to "<h1 id=\"${1/[[:alpha:]]+|( )/(?1:_:\\L$0)/g}\">${1:$TM_SELECTED_TEXT}</h1>".

That doesn't seem right. Other snippet expansions, like ! expand normally, while fieldset does not. You can kind of guess which is going to drop a blob of regex-y text by looking at the content field of the snippets JSONs.

default charset attribute for script tag seems odd

The default auto-expand attribute for a script tag is charset="utf-8"

<script charset="utf-8">

</script>

I don't think i've ever had to use this attribute on a script tag.

type="text/javascript" would seem like a better choice.

I'm on Atom 0.190.0 & language-html 0.31.0

Template in Meteor

It would be awesome if the autcomplete for "template" could be

<template name="">

</template>

instead of

<template id="">

</template>

Since the latter will not qualify as valid in meteor.

Auto close html tags

I used to use Sublime text before I changed to Atom. They had a nice feature: When writing html, if I wrote </the editor automatically completed it to full closing html tag without. It doesn't required even pressing some key to expand.

Please label this to enhancement.

feature request: option for single-line tags (no newline)

It would be great to have an option for tags to be autocompleted without newlines. So instead of tab producing this:

<p>
    [cursor]
</p>

it would instead produce this:

<p>[cursor]</p>

Snippets

My snippets aren't working correctly. For example when I type "html" (without the quotes) and then hit the tab key it provides " " instead of what is listed as "\n\n\t\n\t\t\n\t\t<title>$1</title>\n\t\n\t\n\t\t$2\n\t\n". This isn't the only one that it doesn't work for either.

Indention still doesn't work entirely as expected

This issue was moved from atom/atom#4379.

Indention got much better in the latest releases, but consider the following HTML-Scenario:

<div>
  <a href="#"
     class="something"
     tal:repeat=""
     tal:condition="">Test</a>
</div>

When I copy the <a/> and paste it (2 empty spaces before), Sublime3 gives me (the expected result):

<div>
  <a href="#"
     class="something"
     tal:repeat=""
     tal:condition="">Test</a>

  <a href="#"
     class="something"
     tal:repeat=""
     tal:condition="">Test</a>
</div>

in Atom (OSX, 0.152) it becomes:

<div>
  <a href="#"
     class="something"
     tal:repeat=""
     tal:condition="">Test</a>
     <a href="#"
     class="something"
     tal:repeat=""
     tal:condition="">Test</a>
</div>

Auto-Indent is turned on for language-html. It's not about the <a/>-Tag - I can reproduce it with every other element aswell.

HTML tags with '-' are parsed and colored incorrectly

When using an html tag with a '-' in the name, it is parsed incorrectly. You don't notice with atom dark as the theme, since the element names and attributes are the same color, but on monokai, you notice:

I think the selector for element names just needs a '-' character. I will play around and make a PR

Including text.html.basic stops further highlighting in parent grammar

In my Smarty Grammar I include this language to highlight the HTML. But after the first HTML tag all further smarty syntax highlighting stops.

If I change this or remove this line the smarty highlighting carries through the entire file
https://github.com/MaxGiting/atom-language-smarty/blob/master/grammars/smarty.cson#L16

I have also tested with this package and seen the same issue.
https://atom.io/packages/language-smarty-php

Define custom file types in the preferences

Hi !

Sometimes when you use files with custom extensions (such as .hbs), the language-html doesn't recognize it. Until now, I managed to add the hbs file type in the sources. But every time I update the package, my modifications are undone.

Can you add the possibility to define custom file types in the settings panel ?

Thank you.

feature request: jade-style input autocompletion

I really like the autocompletion which allows you to write everything directly, fast and short. The example of one I really like I first found on Webstorm IDE, but it appears that even jsfiddle has a similar one.

The idea is pretty simple. Using jade-like notation try to type on https://jsfiddle.net/ in HTML section:

div - then press Tab - <div id="abc"></div> generated
div#abc - then press Tab - <div id="abc"></div> generated
div#abc.hello - then press Tab - <div id="abc" class="hello"></div> generated, etc.

This is a really cool feature, you forget about symbols <, ', " and > and you type only valuable things, like div.

But what I really like on the same jsfiddle is that you can autocomplete even not existing tags which feels so good for angular directives!

contact-list - then press Tab - <contact-list></contact-list> generated

For me this would be a huge improvement.

Sorry if I posted it to a wrong repository.

Ending HTML comments in 3 dashes breaks highlight

I have the following piece of snippet:

<html>
  <body>
    <!-- some comment --->
  </body>
</html>

As you can see even in GitHub (as if GitHub is being developed by the same guys as Atom 😁 ) the body and html appear commented, although they really aren't, because of the extra dash in the closing comment syntax.

Chrome doesn't complain about this. Are there any browsers that do? Or do you guys have any reason to parse it like this ?

feature request: ability to style class-names and id-names differently in HTML source

(reposted from atom/atom#5483)

Currently, all attributes are span.entity.other.attribute-name.html and their corresponding value is span.string.quoted.double.html. This means that all attribute names are styled exactly the same way, and the same is true about attribute values.

Inspired by NetBeans, there should be a way to style class names and id names differently from other attributes. This can make code more readable and it can make your workflow much faster. This is illustrated below:

"Toggle Comments" behaves incorrectly on script references.

Attempting to comment out a line with a script reference in the head of a document behaves strangely. It first attempts to comment out the line with two forward slashes. Toggle comments again then adds the correct html comments, but the forward slashes are still there. Activating toggle comments a third time removes the html comment but still leaves the forward slashes, you have to remove them manually.

Don't assume script tags are always JS

Yes, it's horrible, but there are things (like Honeywell's Experion HMI WebBuilder) that produce and interpret HTML with <script language=VBScript>, and non-JS script tags cause this package to utterly fail to parse the rest of the file. Here's a truncated sample of what that would look like (note ellipses):

...
<META name=GENERATOR content="MSHTML 8.00.7601.18715"><LINK id=HDXStylesheet 
rel=stylesheet type=text/css href="..\foocss\sp.css">
<SCRIPT language=VBScript for="" type="" defer event="">'--------------------------------------
'Scada RegCntl - Mode; Hialm Type; EUDesc; 
'--------------------------------------
sub Scd_RegCntl_Mode_Hialm_EUDesc_OnUpdate(oSource,iLen)
    dim sMode,sNMode,iHialmT, iAlmEnbState,oShape,oAlm
    ...
end sub</SCRIPT>

<BODY 
style="BACKGROUND-COLOR: transparent; MARGIN: 0px; ZOOM: 1; FONT-SIZE: 12pt; OVERFLOW: auto">
...

Even GitHub's markdown preview hates this, but supporting it would make Atom applicable to other industries and to engineers who have to slog through such code-salads.

comment snippet expands incorrecty

Instead of expanding to  the comment snippet expands to <--></-->

toggle the hole line to comment not the words which i selected

ctrl + / toggle the hole line to comment not the words which i selected in html file
i did not change the keymap
os ubuntu 14004 lts x64
atom 1.0.10

HTML/Angular syntax coloring not complete or consistent

I love that there is now an html/angular syntax type.

However, I I am using it and trying to integrate it into my themes, I noticed it only worked in SOME places. Not sure why, but I hope it can be expanded and made consistent:

Inline JavaScript Highlighting

I'm trying to use Atom for Polymer development. In Polymer, elements are declared in headerless HTML files, like this:

<dom-module is="my-element">
  <style>  [...] </style>
  <template> [...] </template>
</dom-module>
<script>
  // element registration
  Polymer({
   is: "my-element",
   properties: { 
      a:42
    } 
    myFunction: function() {
    }
  })
</script>

And currents Atom version doesn't highlight the syntax of JavaScript when it is contained within <script></script> tags unless there is a parent element. I.e. to make work the syntax highlighting in the precedent example I'd need to wrap it in a div element, something I don't want to do.

Any idea of why? Could it be possible to overcome that limitation?

Don't match <!doctype html> in .html.erb files

Currently, my .html.erb files don't get correctly detected as HTML (Ruby - ERB) or HTML (Rails) but as plain HTML - I assume because of the 'firstLineMatch' line in the grammar file. Would it be possible to not match <!doctype html> as a first line if the file extension is .html.erb?

Use class instead of id by default

Hoping not to start of class vs id war but wouldn't it be more useful if the snippets offered to set a class rather than an id by default? (e.g. div snippet)

Seems that ids are less commonly used (and even frowned upon when applying css).

Interest in HTML Entities Autocomplete

Should this package automatically suggest HTML Entities like  , &, ü, ..., or would that be the task of other packages? I currently still found none and would offer me to start a merge request for the snippets here.

Use in .php files

What's the simplest way to enable these in *.php files, too? As far as I can tell the file types are hardcoded.

Embedded scripts handled poorly

Scopes for embedded scripts start too soon and end too late, and syntax highlighting gets messed up:

This is how it should be scoped IMO:

HTML snippets simply not working when I press tab

For some reason HTML snippets stopped working. I am using node 0.198.0 and language-html 0.37.0.

When I press Alt+Shift+S, it only shows the snippet for legal and lorem ipsum.

But for any other language, snippets work fine.

Sorry I can't provide how to reproduce it, but I have no idea why it happens.

I delete atom.app and installed it again, then it worked again. Two days later, it stopped worked once more.

Any ideas?

Thanks

new keyword

I feel like "new homepage" shouldn't be highlighted.

Probably something to do with having this stuff inside a script element also.

PHP syntax support within HTML syntax

Most editors have PHP syntax/language support within HTML files, due to the commonality of having PHP within HTML templates. Currently, Atom does not. I hope that this can be rectified. Not having it is a deal breaker for me.

Atom HTML syntax highlighting:

Sublime Text HTML syntax highlighting:

Code folding should be based on tag structure rather than indentation

The following HTML:

<div>
  <pre>Some
code</pre>
  <p>A paragraph</p>
</div>
<p>
  Another paragraph
</p>

provides a code-folding marker next to the opening <div>, but that only folds away the line up to code</pre>, rather than the whole <div> element.

worth adding ASP support?

I occasionally work on classic ASP pages, which are identical to HTML in every way, save the addition of some vbscript.

I can fork and modify the grammars/html.cson file to include files with a .asp extension, but I assume vbscript syntax highlighting is every bit as big a project as combining HTML and PHP into one language file. At bare minimum, catching the <% ... %> and <%= ... %> tags and styling them differently is probably a good idea. Is the HTML language file the right place to put ASP stuff?

PHP Short-Tag highlighting (0.198.0)

Since updating to version 0.198.0, short-tag highlighting seems to be bugged.

If there are no spaces between an element and a short-tag opening there is no syntax highlighting for the rest of the line (i.e. <strong><?=date('l', strtotime($day))?></strong>).

Placing a space before the opening tag corrects the issue (i.e. <strong> <?=date('l', strtotime($day))?></strong>).

Also, as soon as a space is encountered outside of the short-tag, highlighting resumes (i.e. <strong<?=date('l', strtotime($day))?> </strong>).

It is the same issue anywhere there is a short-tag.

Provide option to disable snippets

There are so many single character snippets provided by this package, and they interfere with normal usage, and even other snippets.

For example, I have a snippet copy:ia, but the a at the end triggers one of these snippets instead of mine.

Toggle Comments places cursor outside of comment block

Currently, the Toggle Comments command places the cursor outside of the comment block – not sure if this is a regression or not.

Atom 0.199.0
OS X 10.10.3

First lines <?php got invalid

Hi.

I use html on php source code.
And I got breaking syntax highlight when <?php tag first line.

Inspector source is this

<span class="text html php">
  <span class="invalid illegal bad-angle-bracket html">&lt;</span>?php
</span>

And when I solve this error when toggle disable and enable language-html package.

Quotes are handled horribly

If you have a quote inside a note ( ) the highlighting gets all messed up and starts labeling everything as a string, and same for if you have something inside a tag ( < p > " </ p > I put spaces in the p tags to stop them from rendering). It's a problem with single AND double quotes.

Syntax highlighting on attribute with underscore

Underscores in attribute names break the syntax highlighting.

In editor:

In inspector:

Using language-html 0.42.0 in Atom 1.1.0 on OS X 10.9.5.

Syntax Highlighting error caused by internal Regex

I realise that the syntax highlighting in the html language is not designed to manage regular expressions. However, if I place the following email validation function inside my code, it causes an error in the syntax highlighting and all subsequent text is orange:

The function itself is correct and the code works properly, all the curly brackets match up etc. If I change the language to "Regular Expression(JavaScript)" then the syntax issue is fixed. However I am working with an html file and want to see html text highlighting for the document. I feel like placing the above expression in my code should not prevent it from working correctly. For example, in Text Wrangler if you enclose an expression in <script></script> stages, the syntax highlighting for the rest of the html file will not be corrupted.

Thanks for your help!

No HTML syntax highlighting with large amounts of script content.

I have an HTML file that consists of about 50% Javascript. While Atom recognizes the HTML file, after the script tags there is no HTML syntax highlighting; however, it highlights the Javascript portion of the file perfectly. All HTML after this point is one color, with a gray color for strings (between "&"). I have the HTML language package installed and enabled.

Auto-sync renaming of tag pair

It would be nice, if Atom would sync the renaming of an opening tag with the closing tag like WebStorm. E.g. you have <div></div> and rewrite the first <div> to <p> the result should be <p></p>.

Highlight matching element tag

Most editors that support HTML will match the open and closing tags with the cursor is touching one or the other.

Examples:
Showing matching div (tag underlined)

Showing matching p (tag underlined)