diff --git a/lib/haml_up.rb b/lib/haml_up.rb
index 62d29be414..2ecc619960 100644
--- a/lib/haml_up.rb
+++ b/lib/haml_up.rb
@@ -102,7 +102,15 @@ class HamlUp
     entries = hash.map do |key, value|
       value = stringify(value) if value.is_a? Hash
 
-      "#{key.inspect} => #{value}"
+      # We prefer the Ruby 1.9 hash syntax with symbols followed by a colon
+      # like this:
+      #
+      #   %button{ disabled: true, "ng-class": "primary-button" }
+      #
+      # Symbols start with `:` which we slice off. It gets appended below.
+      key = key.to_sym.inspect.slice(1..-1)
+
+      "#{key}: #{value}"
     end
 
     "{ #{entries.join(', ')} }"
diff --git a/spec/lib/haml_up_spec.rb b/spec/lib/haml_up_spec.rb
index 392e5b5550..0df7c56642 100644
--- a/spec/lib/haml_up_spec.rb
+++ b/spec/lib/haml_up_spec.rb
@@ -14,7 +14,7 @@ describe HamlUp, skip: !Gem::Dependency.new("", "~> 5.2").match?("", Haml::VERSI
     it "rewrites non-standard attribute hashes" do
       original = "%p{ng: {click: 'action', show: 'condition'}} label"
       template = call(original)
-      expect(template).to eq "%p{ \"ng-click\" => 'action', \"ng-show\" => 'condition' } label"
+      expect(template).to eq "%p{ \"ng-click\": 'action', \"ng-show\": 'condition' } label"
     end
 
     it "preserves standard attribute hashes" do
@@ -26,18 +26,18 @@ describe HamlUp, skip: !Gem::Dependency.new("", "~> 5.2").match?("", Haml::VERSI
     it "preserves standard attribute hashes while rewriting others" do
       original = "%p{data: {click: 'standard'}, ng: {click: 'not'}} label"
       template = call(original)
-      expect(template).to eq "%p{ \"data\" => {click: 'standard'}, \"ng-click\" => 'not' } label"
+      expect(template).to eq "%p{ data: {click: 'standard'}, \"ng-click\": 'not' } label"
     end
 
     it "rewrites multi-line attributes" do
       original = <<~HAML
         %li{ ng: { class: "{active: selector.active}" } }
-          %a{ "tooltip" => "{{selector.object.value}}", "tooltip-placement" => "bottom",
+          %a{ tooltip: "{{selector.object.value}}", "tooltip-placement": "bottom",
             ng: { transclude: true, class: "{active: selector.active, 'has-tip': selector.object.value}" } }
       HAML
       expected = <<~HAML
-        %li{ "ng-class" => "{active: selector.active}" }
-          %a{ "tooltip" => "{{selector.object.value}}", "tooltip-placement" => "bottom", "ng-transclude" => true, "ng-class" => "{active: selector.active, 'has-tip': selector.object.value}" }
+        %li{ "ng-class": "{active: selector.active}" }
+          %a{ tooltip: "{{selector.object.value}}", "tooltip-placement": "bottom", "ng-transclude": true, "ng-class": "{active: selector.active, 'has-tip': selector.object.value}" }
       HAML
       template = call(original)
       expect(template).to eq expected