Add support for Angular-style attributes to HTML lexer (#907)

This commit adds support for `#` to be used in attribute names and `[]()` to be used in attribute names with values.
rouge-ruby · Jul 21, 2019 · 8544f86 · 8544f86
1 parent 45da28a
commit 8544f86
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/lib/rouge/lexers/html.rb b/lib/rouge/lexers/html.rb
@@ -83,8 +83,8 @@ def self.detect?(text)
 
       state :tag do
         rule %r/\s+/m, Text
-        rule %r/[a-zA-Z0-9_:-]+\s*=\s*/m, Name::Attribute, :attr
-        rule %r/[a-zA-Z0-9_:-]+/, Name::Attribute
+        rule %r/[a-zA-Z0-9_:\[\]()*.-]+\s*=\s*/m, Name::Attribute, :attr
+        rule %r/[a-zA-Z0-9_:#*-]+/, Name::Attribute
         rule %r(/?\s*>)m, Name::Tag, :pop!
       end
 

diff --git a/spec/lexers/html_spec.rb b/spec/lexers/html_spec.rb
@@ -18,6 +18,44 @@
                             ['Name.Tag', '<custom-element></custom-element>']
       end
     end
+    describe 'attribute names' do
+      it 'allow * to support Angular 2+ structural Directives' do
+        assert_tokens_equal '<custom-element *ng-structural-directive></custom-element>',
+                            ['Name.Tag', '<custom-element'],
+                            ['Text', ' '],
+                            ['Name.Attribute', '*ng-structural-directive'],
+                            ['Name.Tag', '></custom-element>']
+      end
+    end
+    describe 'attribute names' do
+      it 'allow # to support Angular 2+ template reference variables' do
+        assert_tokens_equal '<custom-element #ref></custom-element>',
+                            ['Name.Tag', '<custom-element'],
+                            ['Text', ' '],
+                            ['Name.Attribute', '#ref'],
+                            ['Name.Tag', '></custom-element>']
+      end
+    end
+    describe 'attribute names' do
+      it 'allow [] to support Angular 2+ data binding inputs' do
+        assert_tokens_equal '<custom-element [target]="expression"></custom-element>',
+                            ['Name.Tag', '<custom-element'],
+                            ['Text', ' '],
+                            ['Name.Attribute', '[target]='],
+                            ['Literal.String', '"expression"'],
+                            ['Name.Tag', '></custom-element>']
+      end
+    end
+    describe 'attribute names' do
+      it 'allow () to support Angular 2+ data binding outputs' do
+        assert_tokens_equal '<custom-element (target)="expression"></custom-element>',
+                            ['Name.Tag', '<custom-element'],
+                            ['Text', ' '],
+                            ['Name.Attribute', '(target)='],
+                            ['Literal.String', '"expression"'],
+                            ['Name.Tag', '></custom-element>']
+      end
+    end
   end
 
   describe 'guessing' do

diff --git a/spec/visual/samples/html b/spec/visual/samples/html
@@ -49,3 +49,8 @@
 <!-- no tags -->
 Hello tagless world!
 
+<!-- custom Angular 2-style tags -->
+<custom-element *ng-structural-directive></custom-element>
+<custom-element #ref></custom-element>
+<custom-element [target]="expression"></custom-element>
+<custom-element (target)="expression"></custom-element>