diff --git a/examples/release-5.2.adoc b/examples/release-5.2.adoc
index e618aab4..dac7b93f 100644
--- a/examples/release-5.2.adoc
+++ b/examples/release-5.2.adoc
@@ -25,6 +25,20 @@ console.log(a+b); <3>
 <2> using the `%step` attribute...
 <3> to explain code more easily !
 
+== Synchronising step-by-step syntax highlighting
+[.fragment, java, highlight="1|2|3", step=0]
+----
+Optional<String> foo();
+Optional<String> bar();
+Optional<String> foobar();
+----
+[.fragment, data-fragment-index=0]
+step-by-step syntax highlighting
+[.fragment, data-fragment-index=1]
+In combination with data-fragment-index
+[.fragment, data-fragment-index=2]
+Allow synchronized fragment display
+
 [transition=fade,transition-speed=slow]
 == Learn More!
 
diff --git a/lib/asciidoctor-revealjs/highlightjs.rb b/lib/asciidoctor-revealjs/highlightjs.rb
index caed04b7..339a7656 100644
--- a/lib/asciidoctor-revealjs/highlightjs.rb
+++ b/lib/asciidoctor-revealjs/highlightjs.rb
@@ -223,12 +223,18 @@ def docinfo location, doc, opts
         var highlightSteps = RevealHighlight.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
         if( highlightSteps.length > 1 ) {
 
+          // When rendered with asciidoc, data-fragment index if it exists lies on the listing block element, so we have to lookup
           // If the original code block has a fragment-index,
           // each clone should follow in an incremental sequence
-          var fragmentIndex = parseInt( block.getAttribute( 'data-fragment-index' ), 10 );
+          var preCodeWrapper = block.parentElement;
+          var divContent = preCodeWrapper.parentElement;
+          var listingBlock = divContent.parentElement;
+          var fragmentIndex = parseInt( listingBlock.getAttribute( 'data-fragment-index' ), 10 );
 
           if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {
             fragmentIndex = null;
+          } else {
+            fragmentIndex += 1;
           }
 
           // Generate fragments for all steps except the original block
diff --git a/test/doctest/source-highlightjs-languages.html b/test/doctest/source-highlightjs-languages.html
index 685203a5..62cb1f7a 100644
--- a/test/doctest/source-highlightjs-languages.html
+++ b/test/doctest/source-highlightjs-languages.html
@@ -409,12 +409,18 @@ <h2>Use the Source</h2>
           var highlightSteps = RevealHighlight.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
           if( highlightSteps.length > 1 ) {
 
+            // When rendered with asciidoc, data-fragment index if it exists lies on the listing block element, so we have to lookup
             // If the original code block has a fragment-index,
             // each clone should follow in an incremental sequence
-            var fragmentIndex = parseInt( block.getAttribute( 'data-fragment-index' ), 10 );
+            var preCodeWrapper = block.parentElement;
+            var divContent = preCodeWrapper.parentElement;
+            var listingBlock = divContent.parentElement;
+            var fragmentIndex = parseInt( listingBlock.getAttribute( 'data-fragment-index' ), 10 );
 
             if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {
               fragmentIndex = null;
+            } else {
+              fragmentIndex += 1;
             }
 
             // Generate fragments for all steps except the original block