asciidoctor-revealjs 4.1.0 → 5.0.0.rc1

data/lib/asciidoctor-revealjs/highlightjs.rb

@@ -6,7 +6,10 @@ module Asciidoctor
       class HighlightJsAdapter < Asciidoctor::SyntaxHighlighter::Base
         register_for 'highlightjs', 'highlight.js'
 
-        HIGHLIGHT_JS_VERSION = '9.18.1'
+        # REMIND: we cannot use Highlight.js 11+ because unescaped HTML support has been removed:
+        # https://github.com/highlightjs/highlight.js/issues/2889
+        # We are using unescaped HTML in source blocks for callout.
+        HIGHLIGHT_JS_VERSION = '10.7.3'
 
         def initialize *args
           super
@@ -19,19 +22,25 @@ module Asciidoctor
         # The steps are split using the | character
         # For example, this method makes "1..3|6,7" into "1,2,3|6,7"
         def _convert_highlight_to_revealjs node
-          return node.attributes["highlight"].split("|").collect { |linenums|
-            node.resolve_lines_to_highlight(node.content, linenums).join(",")
-          }.join("|")
+          node.attributes['highlight'].split('|').collect { |linenums|
+            node.resolve_lines_to_highlight(node.content, linenums).join(',')
+          }.join('|')
         end
 
         def format node, lang, opts
-          super node, lang, (opts.merge transform: proc { |_, code|
+          super node, lang, (opts.merge transform: proc { |pre, code|
             code['class'] = %(language-#{lang || 'none'} hljs)
             code['data-noescape'] = true
+            if (id = node.attr('data-id'))
+              pre['data-id'] = id
+            end
+            if node.option?('trim')
+              code['data-trim'] = ''
+            end
 
-            if node.attributes.key?("highlight")
+            if node.attributes.key?('highlight')
               code['data-line-numbers'] = self._convert_highlight_to_revealjs(node)
-            elsif node.attributes.key?("linenums")
+            elsif node.attributes.key?('linenums')
               code['data-line-numbers'] = ''
             end
           })
@@ -50,7 +59,7 @@ module Asciidoctor
           if doc.attr? 'highlightjs-theme'
             theme_href = doc.attr 'highlightjs-theme'
           else
-            theme_href = "#{revealjsdir}/lib/css/monokai.css"
+            theme_href = "#{revealjsdir}/plugin/highlight/monokai.css"
           end
           base_url = doc.attr 'highlightjsdir', %(#{opts[:cdn_base_url]}/highlight.js/#{HIGHLIGHT_JS_VERSION})
           %(<link rel="stylesheet" href="#{theme_href}"#{opts[:self_closing_tag_slash]}>
@@ -58,11 +67,14 @@ module Asciidoctor
 #{(doc.attr? 'highlightjs-languages') ? ((doc.attr 'highlightjs-languages').split ',').map {|lang| %[<script src="#{base_url}/languages/#{lang.lstrip}.min.js"></script>\n] }.join : ''}
 <script>
 #{HIGHLIGHT_PLUGIN_SOURCE}
-hljs.initHighlightingOnLoad();
+hljs.configure({
+  ignoreUnescapedHTML: true,
+});
+hljs.highlightAll();
 </script>)
         end
 
-        # this file was copied-pasted from https://raw.githubusercontent.com/hakimel/reveal.js/3.9.2/plugin/highlight/highlight.js
+        # this file was copied-pasted from https://raw.githubusercontent.com/hakimel/reveal.js/4.1.2/plugin/highlight/plugin.js
         # please note that the bundled highlight.js code was removed so we can use the latest version from cdnjs.
         HIGHLIGHT_PLUGIN_SOURCE = %q{
 /* highlightjs-line-numbers.js 2.6.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
@@ -137,14 +149,25 @@ hljs.initHighlightingOnLoad();
     HIGHLIGHT_LINE_DELIMITER: ',',
     HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
 
-    init: function() {
+    init: function( reveal ) {
 
       // Read the plugin config options and provide fallbacks
       var config = Reveal.getConfig().highlight || {};
       config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
       config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
 
-      [].slice.call( document.querySelectorAll( '.reveal pre code' ) ).forEach( function( block ) {
+      [].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {
+
+        block.parentNode.className = 'code-wrapper';
+
+        // Code can optionally be wrapped in script template to avoid
+        // HTML being parsed by the browser (i.e. when you need to
+        // include <, > or & in your code).
+        let substitute = block.querySelector( 'script[type="text/template"]' );
+        if( substitute ) {
+          // textContent handles the HTML entity escapes for us
+          block.textContent = substitute.innerHTML;
+        }
 
         // Trim whitespace if the "data-trim" attribute is present
         if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
@@ -158,7 +181,7 @@ hljs.initHighlightingOnLoad();
 
         // Re-highlight when focus is lost (for contenteditable code)
         block.addEventListener( 'focusout', function( event ) {
-          hljs.highlightBlock( event.currentTarget );
+          hljs.highlightElement( event.currentTarget );
         }, false );
 
         if( config.highlightOnLoad ) {
@@ -166,6 +189,13 @@ hljs.initHighlightingOnLoad();
         }
       } );
 
+      // If we're printing to PDF, scroll the code highlights of
+      // all blocks in the deck into view at once
+      reveal.on( 'pdf-ready', function() {
+        [].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
+          RevealHighlight.scrollHighlightedLineIntoView( block, {}, true );
+        } );
+      } );
     },
 
     /**
@@ -178,7 +208,7 @@ hljs.initHighlightingOnLoad();
      */
     highlightBlock: function( block ) {
 
-      hljs.highlightBlock( block );
+      hljs.highlightElement( block );
 
       // Don't generate line numbers for empty code blocks
       if( block.innerHTML.trim().length === 0 ) return;
@@ -186,6 +216,8 @@ hljs.initHighlightingOnLoad();
       if( block.hasAttribute( 'data-line-numbers' ) ) {
         hljs.lineNumbersBlock( block, { singleLine: true } );
 
+        var scrollState = { currentBlock: block };
+
         // If there is at least one highlight step, generate
         // fragments
         var highlightSteps = RevealHighlight.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
@@ -194,6 +226,7 @@ hljs.initHighlightingOnLoad();
           // 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 );
+
           if( typeof fragmentIndex !== 'number' || isNaN( fragmentIndex ) ) {
             fragmentIndex = null;
           }
@@ -215,6 +248,10 @@ hljs.initHighlightingOnLoad();
               fragmentBlock.removeAttribute( 'data-fragment-index' );
             }
 
+            // Scroll highlights into view as we step through them
+            fragmentBlock.addEventListener( 'visible', RevealHighlight.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
+            fragmentBlock.addEventListener( 'hidden', RevealHighlight.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );
+
           } );
 
           block.removeAttribute( 'data-fragment-index' )
@@ -222,12 +259,116 @@ hljs.initHighlightingOnLoad();
 
         }
 
+        // Scroll the first highlight into view when the slide
+        // becomes visible. Note supported in IE11 since it lacks
+        // support for Element.closest.
+        var slide = typeof block.closest === 'function' ? block.closest( 'section:not(.stack)' ) : null;
+        if( slide ) {
+          var scrollFirstHighlightIntoView = function() {
+            RevealHighlight.scrollHighlightedLineIntoView( block, scrollState, true );
+            slide.removeEventListener( 'visible', scrollFirstHighlightIntoView );
+          }
+          slide.addEventListener( 'visible', scrollFirstHighlightIntoView );
+        }
+
         RevealHighlight.highlightLines( block );
 
       }
 
     },
 
+    /**
+     * Animates scrolling to the first highlighted line
+     * in the given code block.
+     */
+    scrollHighlightedLineIntoView: function( block, scrollState, skipAnimation ) {
+
+      cancelAnimationFrame( scrollState.animationFrameID );
+
+      // Match the scroll position of the currently visible
+      // code block
+      if( scrollState.currentBlock ) {
+        block.scrollTop = scrollState.currentBlock.scrollTop;
+      }
+
+      // Remember the current code block so that we can match
+      // its scroll position when showing/hiding fragments
+      scrollState.currentBlock = block;
+
+      var highlightBounds = RevealHighlight.getHighlightedLineBounds( block )
+      var viewportHeight = block.offsetHeight;
+
+      // Subtract padding from the viewport height
+      var blockStyles = getComputedStyle( block );
+      viewportHeight -= parseInt( blockStyles.paddingTop ) + parseInt( blockStyles.paddingBottom );
+
+      // Scroll position which centers all highlights
+      var startTop = block.scrollTop;
+      var targetTop = highlightBounds.top + ( Math.min( highlightBounds.bottom - highlightBounds.top, viewportHeight ) - viewportHeight ) / 2;
+
+      // Account for offsets in position applied to the
+      // <table> that holds our lines of code
+      var lineTable = block.querySelector( '.hljs-ln' );
+      if( lineTable ) targetTop += lineTable.offsetTop - parseInt( blockStyles.paddingTop );
+
+      // Make sure the scroll target is within bounds
+      targetTop = Math.max( Math.min( targetTop, block.scrollHeight - viewportHeight ), 0 );
+
+      if( skipAnimation === true || startTop === targetTop ) {
+        block.scrollTop = targetTop;
+      }
+      else {
+
+        // Don't attempt to scroll if there is no overflow
+        if( block.scrollHeight <= viewportHeight ) return;
+
+        var time = 0;
+        var animate = function() {
+          time = Math.min( time + 0.02, 1 );
+
+          // Update our eased scroll position
+          block.scrollTop = startTop + ( targetTop - startTop ) * RevealHighlight.easeInOutQuart( time );
+
+          // Keep animating unless we've reached the end
+          if( time < 1 ) {
+            scrollState.animationFrameID = requestAnimationFrame( animate );
+          }
+        };
+
+        animate();
+
+      }
+
+    },
+
+    /**
+     * The easing function used when scrolling.
+     */
+    easeInOutQuart: function( t ) {
+
+      // easeInOutQuart
+      return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
+
+    },
+
+    getHighlightedLineBounds: function( block ) {
+
+      var highlightedLines = block.querySelectorAll( '.highlight-line' );
+      if( highlightedLines.length === 0 ) {
+        return { top: 0, bottom: 0 };
+      }
+      else {
+        var firstHighlight = highlightedLines[0];
+        var lastHighlight = highlightedLines[ highlightedLines.length -1 ];
+
+        return {
+          top: firstHighlight.offsetTop,
+          bottom: lastHighlight.offsetTop + lastHighlight.offsetHeight
+        }
+      }
+
+    },
+
     /**
      * Visually emphasize specific lines within a code block.
      * This only works on blocks with line numbering turned on.

data/lib/asciidoctor-revealjs/version.rb

@@ -1,5 +1,5 @@
 module Asciidoctor
 module Revealjs
-  VERSION = '4.1.0'
+  VERSION = '5.0.0.rc1'
 end
 end

data/templates/asciidoctor-compatibility.css

@@ -2,7 +2,7 @@
   float: right
 }
 
-/* listing block */
+/* source blocks */
 .reveal .listingblock.stretch > .content {
   height: 100%
 }
@@ -16,6 +16,21 @@
   max-height: 100%
 }
 
+/* auto-animate feature */
+/* hide the scrollbar when auto-animating source blocks */
+.reveal pre[data-auto-animate-target] {
+  overflow: hidden;
+}
+
+.reveal pre[data-auto-animate-target] code {
+  overflow: hidden;
+}
+
+/* add a min width to avoid horizontal shift on line numbers */
+code.hljs .hljs-ln-line.hljs-ln-n {
+  min-width: 1.25em;
+}
+
 /* tables */
 table {
   border-collapse: collapse;
@@ -388,3 +403,13 @@ td.hdlist1 {
   font-size: 0.65em;
   margin-top: 4em;
 }
+
+.byline {
+  font-size:.8em
+}
+ul.byline {
+  list-style-type: none;
+}
+ul.byline li + li {
+  margin-top: 0.25em;
+}

data/templates/document.html.slim

@@ -1,3 +1,14 @@
+- slides_content = self.content
+- content_for :slides
+  - unless noheader
+    - unless (header_docinfo = docinfo :header, '-revealjs.html').empty?
+      = header_docinfo
+    - if header?
+      include title_slide.html.slim
+  = slides_content
+  - unless (footer_docinfo = docinfo :footer, '-revealjs.html').empty?
+    = footer_docinfo
+
 doctype 5
 html lang=(attr :lang, 'en' unless attr? :nolang)
   head
@@ -16,12 +27,21 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
     - [:description, :keywords, :author, :copyright].each do |key|
       - if attr? key
         meta name=key content=(attr key)
+    - if attr? 'favicon'
+      - if (icon_href = attr 'favicon').empty?
+        - icon_href = 'favicon.ico'
+        - icon_type = 'image/x-icon'
+      - elsif (icon_ext = File.extname icon_href)
+        - icon_type = icon_ext == '.ico' ? 'image/x-icon' : %(image/#{icon_ext.slice 1, icon_ext.length})
+      - else
+        - icon_type = 'image/x-icon'
+      link rel="icon" type="#{icon_type}" href="#{icon_href}"
     - linkcss = (attr? 'linkcss')
-    link rel="stylesheet" href="#{revealjsdir}/css/reset.css"
-    link rel="stylesheet" href="#{revealjsdir}/css/reveal.css"
+    link rel="stylesheet" href="#{revealjsdir}/dist/reset.css"
+    link rel="stylesheet" href="#{revealjsdir}/dist/reveal.css"
 
     / Default theme required even when using custom theme
-    link rel='stylesheet' href=(attr :revealjs_customtheme, %(#{revealjsdir}/css/theme/#{attr 'revealjs_theme', 'black'}.css)) id='theme'
+    link rel='stylesheet' href=(attr :revealjs_customtheme, %(#{revealjsdir}/dist/theme/#{attr 'revealjs_theme', 'black'}.css)) id='theme'
     /! This CSS is generated by the Asciidoctor reveal.js converter to further integrate AsciiDoc's existing semantic with reveal.js
     style type="text/css"
       include asciidoctor-compatibility.css
@@ -37,38 +57,10 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
           link rel='stylesheet' href=%(#{cdn_base}/font-awesome/#{font_awesome_version}/css/v4-shims.min.css)
       - else
         link rel='stylesheet' href=(normalize_web_path %(#{attr 'iconfont-name', 'font-awesome'}.css), (attr 'stylesdir', ''), false)
-    - if attr? :stem
-      - eqnums_val = (attr 'eqnums', 'none')
-      - eqnums_val = 'AMS' if eqnums_val == ''
-      - eqnums_opt = %( equationNumbers: { autoNumber: "#{eqnums_val}" } )
-      - mathjaxdir = (attr 'mathjaxdir', "#{cdn_base}/mathjax/2.7.6")
-      script type='text/x-mathjax-config'
-        | MathJax.Hub.Config({
-          tex2jax: {
-            inlineMath: [#{Asciidoctor::INLINE_MATH_DELIMITERS[:latexmath].to_s}],
-            displayMath: [#{Asciidoctor::BLOCK_MATH_DELIMITERS[:latexmath].to_s}],
-            ignoreClass: "nostem|nolatexmath"
-          },
-          asciimath2jax: {
-            delimiters: [#{Asciidoctor::BLOCK_MATH_DELIMITERS[:asciimath].to_s}],
-            ignoreClass: "nostem|noasciimath"
-          },
-          TeX: {#{eqnums_opt}}
-          });
-      script src='#{mathjaxdir}/MathJax.js?config=TeX-MML-AM_HTMLorMML'
-
+    = generate_stem(cdn_base)
     - syntax_hl = self.syntax_highlighter
     - if syntax_hl && (syntax_hl.docinfo? :head)
       =syntax_hl.docinfo :head, self, cdn_base_url: cdn_base, linkcss: linkcss, self_closing_tag_slash: '/'
-
-    /! Printing and PDF exports
-    javascript:
-      var link = document.createElement( 'link' );
-      link.rel = 'stylesheet';
-      link.type = 'text/css';
-      link.href = window.location.search.match( /print-pdf/gi ) ? "#{revealjsdir}/css/print/pdf.css" : "#{revealjsdir}/css/print/paper.css";
-      document.getElementsByTagName( 'head' )[0].appendChild( link );
-
     - if attr? :customcss
       link rel='stylesheet' href=((customcss = attr :customcss).empty? ? 'asciidoctor-revealjs.css' : customcss)
     - unless (_docinfo = docinfo :head, '-revealjs.html').empty?
@@ -77,15 +69,8 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
     .reveal
       / Any section element inside of this container is displayed as a slide
       .slides
-        - unless noheader
-          - unless (_docinfo = docinfo :header, '-revealjs.html').empty?
-            = _docinfo
-          - if header?
-            include title_slide.html.slim
-        = content
-        - unless (_docinfo = docinfo :footer, '-revealjs.html').empty?
-          = _docinfo
-    script src="#{revealjsdir}/js/reveal.js"
+        - yield_content :slides
+    script src="#{revealjsdir}/dist/reveal.js"
     / Supports easy AsciiDoc syntax for background color
     javascript:
       Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {
@@ -248,12 +233,11 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
         dependencies: [
             #{revealjs_dependencies(document, self, revealjsdir)}
         ],
-
-        #{(attr? 'revealjs_plugins_configuration') ? File.read(attr('revealjs_plugins_configuration', '')) : ""}
-
       });
     / Workaround the "Only direct descendants of a slide section can be stretched" limitation in reveal.js
     / https://github.com/hakimel/reveal.js/issues/2584
+
+
     include stretch_nested_elements.js.slim
 
     - if syntax_hl && (syntax_hl.docinfo? :footer)

data/templates/helpers.rb

@@ -4,6 +4,8 @@ unless RUBY_ENGINE == 'opal'
   require 'asciidoctor'
 end
 
+require 'json'
+
 # This module gets mixed in to every node (the context of the template) at the
 # time the node is being converted. The properties and methods in this module
 # effectively become direct members of the template.
@@ -193,15 +195,9 @@ module Slim::Helpers
 
   def revealjs_dependencies(document, node, revealjsdir)
     dependencies = []
-    dependencies << "{ src: '#{revealjsdir}/plugin/zoom-js/zoom.js', async: true }" unless (node.attr? 'revealjs_plugin_zoom', 'disabled')
-    dependencies << "{ src: '#{revealjsdir}/plugin/notes/notes.js', async: true }" unless (node.attr? 'revealjs_plugin_notes', 'disabled')
-    dependencies << "{ src: '#{revealjsdir}/plugin/markdown/marked.js', async: true }" if (node.attr? 'revealjs_plugin_marked', 'enabled')
-    dependencies << "{ src: '#{revealjsdir}/plugin/markdown/markdown.js', async: true }" if (node.attr? 'revealjs_plugin_markdown', 'enabled')
-    if (node.attr? 'revealjs_plugins') &&
-        !(revealjs_plugins_file = (node.attr 'revealjs_plugins', '').strip).empty? &&
-        !(revealjs_plugins_content = (File.read revealjs_plugins_file).strip).empty?
-      dependencies << revealjs_plugins_content
-    end
+    dependencies << "{ src: '#{revealjsdir}/plugin/zoom/zoom.js', async: true, callback: function () { Reveal.registerPlugin(RevealZoom) } }" unless (node.attr? 'revealjs_plugin_zoom', 'disabled')
+    dependencies << "{ src: '#{revealjsdir}/plugin/notes/notes.js', async: true, callback: function () { Reveal.registerPlugin(RevealNotes) } }" unless (node.attr? 'revealjs_plugin_notes', 'disabled')
+    dependencies << "{ src: '#{revealjsdir}/plugin/search/search.js', async: true, callback: function () { Reveal.registerPlugin(RevealSearch) } }" if (node.attr? 'revealjs_plugin_search', 'enabled')
     dependencies.join(",\n      ")
   end
 
@@ -279,6 +275,84 @@ module Slim::Helpers
     end
     nil
   end
+
+  # Copied from asciidoctor/lib/asciidoctor/converter/semantic-html5.rb which is not yet shipped
+  # @todo remove this code when the new converter becomes available in the main gem
+  def generate_authors node
+    return if node.authors.empty?
+
+    if node.authors.length == 1
+      %(<p class="byline">
+#{format_author node, node.authors.first}
+</p>)
+    else
+      result = ['<ul class="byline">']
+      node.authors.each do |author|
+        result << "<li>#{format_author node, author}</li>"
+      end
+      result << '</ul>'
+      result.join Asciidoctor::LF
+    end
+  end
+
+  # Copied from asciidoctor/lib/asciidoctor/converter/semantic-html5.rb which is not yet shipped
+  # @todo remove this code when the new converter becomes available in the main gem
+  def format_author node, author
+    in_context 'author' do
+      %(<span class="author">#{node.sub_replacements author.name}#{author.email ? %( #{node.sub_macros author.email}) : ''}</span>)
+    end
+  end
+
+  # Copied from asciidoctor/lib/asciidoctor/converter/semantic-html5.rb which is not yet shipped
+  # @todo remove this code when the new converter becomes available in the main gem
+  def in_context name
+    (@convert_context ||= []).push name
+    result = yield
+    @convert_context.pop
+    result
+  end
+
+  STEM_EQNUMS_AMS = 'ams'
+  STEM_EQNUMS_NONE = 'none'
+  STEM_EQNUMS_VALID_VALUES = [
+    STEM_EQNUMS_NONE,
+    STEM_EQNUMS_AMS,
+    'all'
+  ]
+
+  MATHJAX_VERSION = '3.2.0'
+
+  # Generate the Mathjax markup to process STEM expressions
+  # @param cdn_base [String]
+  # @return [String]
+  def generate_stem(cdn_base)
+    if attr?(:stem)
+      eqnums_val = attr('eqnums', STEM_EQNUMS_NONE).downcase
+      unless STEM_EQNUMS_VALID_VALUES.include?(eqnums_val)
+        eqnums_val = STEM_EQNUMS_AMS
+      end
+      mathjax_configuration = {
+        tex: {
+          inlineMath: [Asciidoctor::INLINE_MATH_DELIMITERS[:latexmath]],
+          displayMath: [Asciidoctor::BLOCK_MATH_DELIMITERS[:latexmath]],
+          processEscapes: false,
+          tags: eqnums_val,
+        },
+        options: {
+          ignoreHtmlClass: 'nostem|nolatexmath'
+        },
+        asciimath: {
+          delimiters: [Asciidoctor::BLOCK_MATH_DELIMITERS[:asciimath]],
+        },
+        loader: {
+          load: ['input/asciimath', 'output/chtml', 'ui/menu']
+        }
+      }
+      mathjaxdir = attr('mathjaxdir', "#{cdn_base}/mathjax/#{MATHJAX_VERSION}/es5")
+      %(<script>window.MathJax = #{JSON.generate(mathjax_configuration)};</script>) +
+      %(<script async src="#{mathjaxdir}/tex-mml-chtml.js"></script>)
+    end
+  end
   #--
 end