diff --git a/examples/data-attributes.adoc b/examples/data-attributes.adoc
new file mode 100644
index 00000000..49eb947f
--- /dev/null
+++ b/examples/data-attributes.adoc
@@ -0,0 +1,29 @@
+// :include: //div[@class="slides"]
+// :header_footer:
+= Data attributes
+:backend: revealjs
+:icons: font
+
+== Reference
+
+https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+
+// .paragraphs
+== Paragraphs
+
+[.fragment.highlight-red,data-fragment-index=1]
+text1
+
+[.fragment.highlight-red,data-fragment-index=0]
+text2
+
+[.fragment.highlight-red,data-fragment-index=1]
+text3
+
+// .inline-images
+== Inline images
+:imagesdir: images
+
+image:cute-cat-1.jpg[cute-cat-laying,role="fragment fade-in",data-fragment-index=3]
+image:cute-cat-2.jpg[cute-cat-yawning,role="fragment fade-in",data-fragment-index=1]
+image:cute-cat-3.jpg[cute-cat-melting,role="fragment fade-in",data-fragment-index=2]
diff --git a/examples/images/cute-cat-1.jpg b/examples/images/cute-cat-1.jpg
new file mode 100644
index 00000000..36ca562d
Binary files /dev/null and b/examples/images/cute-cat-1.jpg differ
diff --git a/examples/images/cute-cat-2.jpg b/examples/images/cute-cat-2.jpg
new file mode 100644
index 00000000..ddee543e
Binary files /dev/null and b/examples/images/cute-cat-2.jpg differ
diff --git a/examples/images/cute-cat-3.jpg b/examples/images/cute-cat-3.jpg
new file mode 100644
index 00000000..094e3b34
Binary files /dev/null and b/examples/images/cute-cat-3.jpg differ
diff --git a/templates/helpers.rb b/templates/helpers.rb
index a6e99071..f4a2f9f9 100644
--- a/templates/helpers.rb
+++ b/templates/helpers.rb
@@ -72,7 +72,6 @@ def to_valid_slidenumber val
# @yield The block of Slim/HTML code within the tag (optional).
# @return [String] a rendered HTML element.
#
-
def html_tag(name, attributes = {}, content = nil)
attrs = attributes.inject([]) do |attrs, (k, v)|
next attrs if !v || v.nil_or_empty?
@@ -91,6 +90,17 @@ def html_tag(name, attributes = {}, content = nil)
end
+ #
+ # Extracts data- attributes from the attributes.
+ # @param attributes [Hash] (default: {})
+ # @return [Hash] a Hash that contains only data- attributes
+ #
+ def data_attrs(attributes)
+ # key can be an Integer (for positional attributes)
+ attributes.select { |key, _| key.to_s.start_with?('data-') }
+ end
+
+
##
# Returns corrected section level.
#
diff --git a/templates/inline_image.html.slim b/templates/inline_image.html.slim
index 9ef1f4a4..b9027c7c 100644
--- a/templates/inline_image.html.slim
+++ b/templates/inline_image.html.slim
@@ -1,4 +1,4 @@
-span class=[@type,role] style=("float: #{attr :float}" if attr? :float)
+= html_tag('span', { :class => [@type, role], :style => ("float: #{attr :float}" if attr? :float) }.merge(data_attrs(@attributes)))
- if @type == 'icon' && (@document.attr? :icons, 'font')
- style_class = ["fa fa-#{@target}"]
- style_class << "fa-#{attr :size}" if attr? :size
diff --git a/templates/paragraph.html.slim b/templates/paragraph.html.slim
index 9211cf31..f21fe0ec 100644
--- a/templates/paragraph.html.slim
+++ b/templates/paragraph.html.slim
@@ -1,4 +1,4 @@
-.paragraph id=@id class=role
+= html_tag('div', { :id => @id, :class => ['paragraph', role] }.merge(data_attrs(@attributes)))
- if title?
.title=title
- if has_role? 'small'
diff --git a/test/doctest/data-attributes.html b/test/doctest/data-attributes.html
new file mode 100644
index 00000000..b47f33c1
--- /dev/null
+++ b/test/doctest/data-attributes.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+