asciidoctor-html 2.0.2 → 2.1.0

data/lib/asciidoctor/html/book.rb

@@ -116,7 +116,7 @@ module Asciidoctor
       end
 
       def langs(doc)
-        doc.attr?("source-langs") ? doc.attr("source-langs").keys : []
+        doc.attr("source-langs").keys if doc.attr?("source-langs")
       end
 
       def doctitle(doc)
@@ -207,12 +207,15 @@ module Asciidoctor
 
       def outline(key, doc, absolute: true)
         items = []
+        line_number = 0
         doc.sections.each do |section|
+          next if section.option? "skipnav"
           next unless section.id && section.level == 1
 
           prefix = Utils.display_sectnum(section) if section.numbered
           url = "#{"#{key}.html" if absolute}##{section.id}"
-          items << BookTemplate.nav_item(url, "#{prefix}#{section.title}")
+          line_number += 1
+          items << BookTemplate.nav_item(url, "#{prefix}#{section.title}", line_number:)
         end
         return "" unless items.size > 1
 
@@ -256,6 +259,7 @@ module Asciidoctor
           content,
           nav_items,
           has_subnav: !outline.empty?,
+          has_live: doc.attr?("live"),
           title: @title,
           short_title: @short_title,
           authors: display_authors(doc),
@@ -264,6 +268,7 @@ module Asciidoctor
           chapheading: tdata.chapheading,
           chapsubheading: tdata.chapsubheading,
           langs: langs(doc),
+          linenumbering: doc.attr?("linenumbering"),
           paginator: pagination(key),
           pagestyle: doc.attr?("pagestyle") ? doc.attr("pagestyle").to_sym : :single
         )

data/lib/asciidoctor/html/book_template.rb

@@ -5,6 +5,7 @@ require_relative "popovers"
 require_relative "sidebar"
 require_relative "scroll"
 require_relative "flip"
+require_relative "live"
 
 module Asciidoctor
   module Html
@@ -17,11 +18,12 @@ module Asciidoctor
         </button>
       HTML
 
-      def self.nav_item(target, text, content = "", active: false)
+      def self.nav_item(target, text, content = "", active: false, line_number: 0)
         active_class = active ? %( class="active") : ""
         link = %(<a href="#{target}">#{text}</a>)
         subnav = content.empty? ? content : "\n#{content}\n"
-        %(<li#{active_class}>#{link}#{subnav}</li>\n)
+        live_attr = Utils.line_number_attr(line_number, live: line_number.positive?)
+        %(<li#{active_class}#{live_attr}>#{link}#{subnav}</li>\n)
       end
 
       def self.nav_text(chapprefix, chaptitle)
@@ -101,7 +103,7 @@ module Asciidoctor
           <main id="main" class="main">
           <div id="content-container" class="content-container dynamic-width"  tabindex="0">
           #{chapheader opts[:chapheading], opts[:chapsubheading]}
-          <div class="chaphead d-block">
+          <div class="chaphead flip d-block">
             #{toggle_button opts[:pagestyle] if opts[:has_subnav]}
             #{chapheading opts[:chapheading]}
             <h1 class="chaptitle">#{opts[:chapsubheading]}</h1>
@@ -161,27 +163,35 @@ module Asciidoctor
         HTML
       end
 
-      def self.highlightjs(langs)
-        langs.map do |lang|
-          %(<script defer src="#{Highlightjs::CDN_PATH}/languages/#{lang}.min.js"></script>)
-        end.join("\n  ")
+      def self.highlightjs(opts)
+        return "" unless opts[:langs]
+
+        html = [
+          <<~HTML
+            <link rel="stylesheet" href="#{Highlightjs::CDN_PATH}/styles/tomorrow-night-blue.min.css">
+            <script defer src="#{Highlightjs::CDN_PATH}/highlight.min.js"></script>
+          HTML
+        ]
+        opts[:langs].each do |lang|
+          html << %(<script defer src="#{Highlightjs::CDN_PATH}/languages/#{lang}.min.js"></script>)
+        end
+        html << %(<script defer src="#{Highlightjs::LN_PLUGIN_PATH}"></script>) if opts[:linenumbering]
+        html.join "\n"
       end
 
-      def self.head(title, description, authors, langs)
+      def self.head(opts)
         <<~HTML
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
-          #{%(<meta name="description" content="#{description}">) if description}
-          #{%(<meta name="author" content="#{authors}">) if authors}
-          <title>#{title}</title>
+          #{%(<meta name="description" content="#{opts[:description]}">) if opts[:description]}
+          #{%(<meta name="author" content="#{opts[:authors]}">) if opts[:authors]}
+          <title>#{opts[:title]}</title>
           <link rel="apple-touch-icon" sizes="180x180" href="#{FAVICON_PATH}/apple-touch-icon.png">
           <link rel="icon" type="image/png" sizes="32x32" href="#{FAVICON_PATH}/favicon-32x32.png">
           <link rel="icon" type="image/png" sizes="16x16" href="#{FAVICON_PATH}/favicon-16x16.png">
           <link rel="manifest" href="#{FAVICON_PATH}/site.webmanifest" crossorigin="anonymous">
           <link rel="stylesheet" href="#{CSS_PATH}/styles.css">
-          <link rel="stylesheet" href="#{Highlightjs::CDN_PATH}/styles/tomorrow-night-blue.min.css">
-          <script defer src="#{Highlightjs::CDN_PATH}/highlight.min.js"></script>
-          #{highlightjs langs}
+          #{highlightjs(opts)}
           <script>
             MathJax = {
               tex: {
@@ -202,6 +212,7 @@ module Asciidoctor
 
       # opts:
       # - has_subnav: Boolean
+      # - has_live: Boolean
       # - title: String
       # - short_title: String
       # - authors: String
@@ -223,7 +234,7 @@ module Asciidoctor
           <!DOCTYPE html>
           <html lang="en">
           <head>
-          #{head opts[:title], opts[:description], opts[:authors], opts[:langs]}
+          #{head(opts)}
           #{opts[:at_head_end]}
           </head>
           <body>
@@ -235,11 +246,12 @@ module Asciidoctor
           </div> <!-- .page -->
           <script>document.getElementById("cr-year").textContent = (new Date()).getFullYear();</script>
           <script type="module">
-          #{Highlightjs::PLUGIN}
+          #{Highlightjs::PLUGIN if opts[:langs]}
           #{Popovers::POPOVERS}
           #{Sidebar::TOGGLE if nav}
           #{Scroll::SCROLL}
           #{Flip::FLIP}
+          #{Live::LIVE if opts[:has_live]}
           </script>
           #{opts[:at_body_end]}
           </body>

data/lib/asciidoctor/html/converter.rb

@@ -29,7 +29,7 @@ module Asciidoctor
       end
 
       def convert_preamble(node)
-        %(<div class="preamble d-block">\n#{node.content}</div> <!-- .preamble -->\n)
+        %(<div class="preamble flip d-block">\n#{node.content}</div> <!-- .preamble.flip -->\n)
       end
 
       def convert_section(node)
@@ -38,9 +38,10 @@ module Asciidoctor
         show_sectnum = node.numbered && level <= (document.attr("sectnumlevels") || 1).to_i
         tag_level = [level == 1 ? level + 1 : level + 2, 6].min
         tag_name = %(h#{tag_level})
+        classes = "section#{" flip" if level == 1}#{" #{node.role}" if node.role}"
         display_sectnum = Utils.display_sectnum(node, level) if show_sectnum
         content = %(<#{tag_name}>#{display_sectnum}#{node.title}</#{tag_name}>\n#{node.content})
-        Utils.wrap_node content, node, :section
+        Utils.wrap_id_classes content, node.id, classes, :section
       end
 
       def convert_paragraph(node)
@@ -120,8 +121,11 @@ module Asciidoctor
       def convert_listing(node)
         nowrap = (node.option? "nowrap") || !(node.document.attr? "prewrap")
         if node.style == "source"
-          lang = node.attr "language"
-          code_open = %(<code#{%( class="language-#{lang}") if lang}>)
+          classes = []
+          classes << "language-#{node.attr "language"}" if node.attr?("language")
+          classes << "linenums" if (has_linenums = node.option? "linenums")
+          classes << "ln-plugin" if has_linenums || node.attr?("live")
+          code_open = %(<code#{%( class="#{classes.join " "}") unless classes.empty?}>)
           pre_open = %(<pre#{%( class="nowrap") if nowrap}>#{code_open})
           pre_close = "</code></pre>"
         else
@@ -130,7 +134,7 @@ module Asciidoctor
         end
         title = Utils.display_title(node)
         content = title + pre_open + node.content + pre_close
-        Utils.wrap_node content, node
+        Utils.wrap_live Utils.wrap_node(content, node), node.attr("live")
       end
 
       def convert_literal(node)
@@ -192,19 +196,24 @@ module Asciidoctor
       def convert_dlist(node)
         classes = ["dlist", node.style, node.role].compact.join(" ")
         result = [%(<dl#{Utils.dyn_id_class_attr_str node, classes}>)]
+        live = node.attr? "live"
+        line_number = 1
         node.items.each do |terms, dd|
           terms.each do |dt|
-            result << %(<dt>#{dt.text}</dt>)
+            result << %(<dt class="dterm"#{Utils.line_number_attr line_number, live:}>#{dt.text}</dt>)
+            line_number += 1
           end
           next unless dd
 
-          result << "<dd>"
+          result << "<dd#{Utils.line_number_attr line_number, live:}>"
+          line_number += 1
           result << %(<p>#{dd.text}</p>) if dd.text?
           result << dd.content if dd.blocks?
           result << "</dd>"
         end
         result << "</dl>\n"
-        Utils.wrap_id_classes_with_title result.join("\n"), node, node.id, "dlist-wrapper"
+        Utils.wrap_live(Utils.wrap_id_classes_with_title(result.join("\n"), node, node.id, "dlist-wrapper"),
+                        node.attr("live"))
       end
 
       def convert_inline_anchor(node)
@@ -233,7 +242,7 @@ module Asciidoctor
       end
 
       def convert_table(node)
-        classes = ["table", node.role].compact
+        classes = ["table"]
         classes << "table-striped" if node.option? "striped"
         classes << "table-bordered" if node.option? "bordered"
         classes << "table-sm" if node.option? "compact"
@@ -246,7 +255,9 @@ module Asciidoctor
           width_attribute = %( width="#{tablewidth}%")
         end
         result = [%(<table#{Utils.id_class_attr_str node.id, classes.join(" ")}#{width_attribute}>)]
-        result << %(<caption class="table-title">#{Utils.display_title_prefix node}#{node.title}</caption>)
+        unless node.option? "nocaption"
+          result << %(<caption class="table-title">#{Utils.display_title_prefix node}#{node.title}</caption>)
+        end
         if node.attr("rowcount").positive? && node.attr?("cols")
           result << "<colgroup>"
           if autowidth
@@ -259,7 +270,8 @@ module Asciidoctor
           result << "</colgroup>"
         end
         result << "#{Table.display_rows(node)}</table>"
-        Utils.wrap_id_classes result.join("\n"), nil, "table-responsive"
+        wrap_classes = "table-responsive#{" #{node.role}" if node.role}"
+        Utils.wrap_live Utils.wrap_id_classes(result.join("\n"), nil, wrap_classes), node.attr("live")
       end
     end
   end

data/lib/asciidoctor/html/flip.rb

@@ -6,7 +6,6 @@ module Asciidoctor
     module Flip
       FLIP = <<~JS
         (function() {
-          const sectSelector = '.content-container > .section';
           // Holds replaced pagination links to prev/next chapter
           const chapPagination = {
             prevChap: null,
@@ -25,11 +24,7 @@ module Asciidoctor
           const nav = document.querySelectorAll('#sidebar nav > ul > li.active > ul > li');
 
           let currentId = "page";
-          document.querySelectorAll('.content-container > .chaphead, .content-container > .preamble').forEach(el => {
-            sectsById[currentId].push(el);
-            el.dataset.withSect = currentId;
-          });
-          document.querySelectorAll(sectSelector).forEach(el => {
+          focusEl.querySelectorAll(':scope > .flip').forEach(el => {
             if(el.id) {
               el.dataset.prevPage = currentId;
               currentId = el.id;
@@ -50,7 +45,7 @@ module Asciidoctor
           function focusOnLoad() {
             if(searchForm) return;
 
-            focusEl.focus({preventScroll: true});
+            focusEl.focus({preventScroll: !page.classList.contains('presentation')});
           }
 
           function updatePaginator(prev, next) {
@@ -112,7 +107,7 @@ module Asciidoctor
             document.querySelector('.breadcrumb').classList.toggle('d-block', id != 'page' && !isPresentation);
             document.querySelector('.chapauthors').classList.toggle('d-block', isPresentation);
 
-            let section = target && target.closest(sectSelector);
+            let section = target && target.closest('.content-container > .section');
             if(section) {
               id = section.dataset.withSect;
               section = sectsById[id][0];
@@ -151,6 +146,7 @@ module Asciidoctor
             }
 
             focusOnLoad();
+            if(isPresentation) focusEl.dataset.flip = id;
           }
           flip();
 
@@ -183,7 +179,7 @@ module Asciidoctor
             switch(e.key) {
               case 'ArrowLeft': move('left'); break;
               case 'ArrowRight': move('right'); break;
-              case 'e':
+              case 'q':
               case 'Escape':
                 page.classList.contains('presentation') && changeViewmode('multi');
             }
@@ -196,6 +192,7 @@ module Asciidoctor
           }));
 
           page.classList.add('loaded');
+          ADHT.move = move;
         })();
       JS
     end

data/lib/asciidoctor/html/highlightjs.rb

@@ -6,6 +6,8 @@ module Asciidoctor
     module Highlightjs
       CDN_PATH = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build"
 
+      LN_PLUGIN_PATH = "https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.9.0/dist/highlightjs-line-numbers.min.js"
+
       INCLUDED_LANGS = {
         "bash" => true,
         "c" => true,
@@ -106,6 +108,10 @@ module Asciidoctor
             }
           });
           hljs.highlightAll();
+
+          if(Object.hasOwn(hljs, "lineNumbersBlock")) {
+            document.querySelectorAll('code.ln-plugin').forEach(block => hljs.lineNumbersBlock(block));
+          }
         })();
       JS
     end

data/lib/asciidoctor/html/list.rb

@@ -26,13 +26,14 @@ module Asciidoctor
         end
         result << %(</#{tag_name}> <!-- .level-#{level} -->\n)
         wrap_classes = %(list-wrapper#{" #{node.role}" if node.title? && node.role})
-        Utils.wrap_id_classes_with_title result.join("\n"), node, node.id, wrap_classes
+        Utils.wrap_live Utils.wrap_id_classes_with_title(result.join("\n"), node, node.id, wrap_classes), node.attr("live")
       end
 
       def self.display_list_item(item, inside: false)
         result = []
+        lineno_attr = Utils.line_number_attr item.attr("line-number"), live: item.attr?("line-number")
         inside_mark = %(<span class="li-mark-inside">#{item.attr "mark"} </span>) if inside
-        result << %(<li#{Utils.id_class_attr_str item.id, item.role}>)
+        result << %(<li#{Utils.id_class_attr_str item.id, item.role}#{lineno_attr}>)
         result << %(<div class="li-mark">#{item.attr "mark"}</div><div class="li-content">) unless inside
         result << %(<p>#{inside_mark}#{item.text}</p>) unless item.text.empty?
         result << "\n#{item.content}" if item.blocks?

data/lib/asciidoctor/html/live.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Script for live presentations
+    module Live
+      LIVE = <<~JS
+        (function() {
+          const page = document.getElementById('page');
+          const container = document.getElementById('content-container');
+          const liveBlocksSelector = ':scope > .flip.d-block .live';
+
+          let liveBlocks = container.querySelectorAll(liveBlocksSelector);
+          let liveBlockIdx = 0;
+          selectBlock();
+
+          const observer = new MutationObserver(() => {
+            liveBlocks = container.querySelectorAll(liveBlocksSelector);
+            liveBlockIdx = 0;
+            selectBlock();
+          });
+
+          function selectBlock() {
+            liveBlocks.forEach((block, idx) => {
+              block.firstElementChild.classList.toggle('selected', idx === liveBlockIdx);
+            });
+          }
+
+          function getLines(block, lineNumber = -1, selected) {
+            let selector = '[data-line-number]';
+            if(lineNumber > -1) selector = `[data-line-number="${lineNumber}"]`;
+            if(selected === false) selector += ':not(.emph)';
+            if(selected === true) selector += '.emph';
+            return block.querySelectorAll(selector);
+          }
+
+          function getNextLines() {
+            while(liveBlocks.length > 0 && liveBlockIdx < liveBlocks.length) {
+              selectBlock();
+              const currentBlock = liveBlocks[liveBlockIdx];
+              if(currentBlock) {
+                toggleDefault(currentBlock);
+                let lines = getLines(currentBlock, -1, true);
+                if(lines.length > 0) {
+                  const lineNumber = parseInt(lines[lines.length - 1].dataset.lineNumber) + 1;
+                  lines = getLines(currentBlock, lineNumber);
+                  if(lines.length > 0) return lines;
+                } else {
+                  lines = getLines(currentBlock, -1, false);
+                  if(lines.length > 0) return getLines(currentBlock, lines[0].dataset.lineNumber);
+                }
+              }
+              liveBlockIdx++;
+            }
+            ADHT.move('right');
+            return [];
+          }
+
+          function nextBlock() {
+            if(liveBlockIdx < liveBlocks.length - 1) {
+              liveBlockIdx++;
+              selectBlock();
+            } else {
+              ADHT.move('right');
+            }
+          }
+
+          function prevBlock() {
+            if(liveBlockIdx > 0) {
+              liveBlockIdx--;
+              selectBlock();
+            } else {
+              ADHT.move('left');
+            }
+          }
+
+          function getPrevLines() {
+            while(liveBlocks.length > 0 && liveBlockIdx > -1) {
+              selectBlock();
+              const currentBlock = liveBlocks[liveBlockIdx];
+              if(currentBlock) {
+                const lines = getLines(currentBlock, -1, true);
+                if(lines.length > 0) {
+                  const line = lines[lines.length - 1];
+                  return getLines(currentBlock, line.dataset.lineNumber);
+                }
+              }
+              liveBlockIdx--;
+            }
+            ADHT.move('left');
+            return [];
+          }
+
+          function toggleDefault(block, reset = false) {
+            const token = block.dataset.reset;
+            if(reset) {
+              block.classList.add(token);
+              getLines(block).forEach(el => el.classList.remove('emph'));
+            } else {
+              block.classList.remove(token);
+            }
+          }
+
+          observer.observe(container, { attributes: true, attributeFilter: ['data-flip'] });
+          addEventListener('keyup', function(e) {
+            if(!page.classList.contains('presentation')) return;
+
+            const currentBlock = liveBlocks[liveBlockIdx];
+            if(/^\\d$/.test(e.key)) {
+              toggleDefault(currentBlock);
+              const key = e.key === "0" ? "10" : e.key;
+              getLines(currentBlock, e.key).forEach(el => el.classList.toggle('emph'));
+            } else {
+              switch(e.key) {
+                case 'r':
+                  toggleDefault(currentBlock, true);
+                  break;
+                case 'R':
+                  liveBlocks.forEach(block => toggleDefault(block, true));
+                  break;
+                case 'n':
+                  getNextLines().forEach(el => el.classList.add('emph'));
+                  break;
+                case 'b':
+                  getPrevLines().forEach(el => el.classList.remove('emph'));
+                  break;
+                case 'N':
+                  nextBlock();
+                  break;
+                case 'B':
+                  prevBlock();
+                  break;
+              }
+            }
+          });
+        })();
+      JS
+    end
+  end
+end

data/lib/asciidoctor/html/ref_tree_processor.rb

@@ -69,6 +69,8 @@ module Asciidoctor
           block.style == "figlist"
         when :stem, :listing
           block.option? "numbered"
+        when :table
+          !block.option? "nocaption"
         else
           NUMBERED_CONTEXTS.include? context
         end
@@ -152,7 +154,7 @@ module Asciidoctor
         end
         block.set_attr "list-depth", depth
         if flat_style
-          block.set_attr("flat-style", true)
+          block.set_attr "flat-style", true
         else
           offset = offset block
           style = block.style
@@ -194,8 +196,9 @@ module Asciidoctor
         register_reftext! item, mark
       end
 
-      def process_source_code!(document, lang)
+      def process_source_code!(document, lang, linenums: false)
         document.set_attr("source-langs", {}) unless document.attr?("source-langs")
+        document.set_attr("linenumbering", true) if !document.attr?("linenumbering") && linenums
         langs = document.attr "source-langs"
         langs[lang] = true unless Highlightjs::INCLUDED_LANGS.include?(lang)
       end
@@ -225,29 +228,39 @@ module Asciidoctor
       end
 
       def process(document)
-        listdepth = 0
-        bulletdepth = 0
-        flat_style = false
-        flat_idx = 0 # flat index for (pseudocode) list
+        listdepth = bulletdepth = flat_idx = 0
+        flat_style = live = false
+        line_number = 1
         tw = TreeWalker.new document
         while (block = tw.next_block)
           unless block.attr? "refprocessed"
             process_numbered_block!(block, document) if process_numbered_block?(block)
             if colist? block
               process_colist! block
-            elsif olist? block
-              if listdepth.zero?
+            elsif (is_olist = olist? block) || (is_ulist = ulist? block)
+              if is_olist && listdepth.zero?
                 flat_style = (block.style == "pseudocode")
                 flat_idx = offset block
               end
-              process_olist! block, listdepth, flat_style:
-            elsif olist_item?(block) && flat_style
-              process_flat_item! block, flat_idx
-              flat_idx += 1
+              process_olist!(block, listdepth, flat_style:) if is_olist
+              process_ulist!(block, bulletdepth) if is_ulist
+              if (listdepth + bulletdepth).zero?
+                live = block.attr?("live")
+                document.set_attr "live", true if live && !document.attr?("live")
+                line_number = offset(block) + 1
+              end
+            elsif (is_olist_item = olist_item? block) || ulist_item?(block)
+              if is_olist_item && flat_style
+                process_flat_item! block, flat_idx
+                flat_idx += 1
+              end
+              if live
+                block.set_attr "line-number", line_number
+                line_number += 1
+              end
             elsif source_code? block
-              process_source_code! document, block.attr("language")
-            elsif ulist? block
-              process_ulist! block, bulletdepth
+              linenums = block.option?("linenums") || block.attr?("live")
+              process_source_code! document, block.attr("language"), linenums:
             end
             block.set_attr "refprocessed", true
           end

data/lib/asciidoctor/html/subnav_block_macro.rb

@@ -27,6 +27,7 @@ module Asciidoctor
             </nav>
           </div>
         HTML
+        content = Utils.wrap_live content, attrs["live"]
         create_pass_block parent, content, attrs, subs: nil
       end
     end

data/lib/asciidoctor/html/table.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
+require_relative "utils"
+
 module Asciidoctor
   module Html
     # Helpers for the table conversion
     module Table
-      def self.display_row(tsec, row)
-        result = ["<tr>"]
+      def self.display_row(tsec, row, line_number, live: false)
+        result = ["<tr#{Utils.line_number_attr line_number, live:}>"]
         row.each do |cell|
           cell_content = if tsec == :head
                            cell.text
@@ -31,10 +33,17 @@ module Asciidoctor
       end
 
       def self.display_rows(node)
+        line_number = 0
+        live = node.attr? "live"
         node.rows.to_h.map do |tsec, rows|
           next if rows.empty?
 
-          "<t#{tsec}>\n#{rows.map { |row| display_row(tsec, row) }.join("\n")}\n</t#{tsec}>"
+          result = rows.map do |row|
+            show_lineno = live && tsec != :head
+            line_number += 1 if show_lineno
+            display_row(tsec, row, line_number, live: show_lineno)
+          end
+          "<t#{tsec}>\n#{result.join "\n"}\n</t#{tsec}>"
         end.join("\n")
       end
     end

data/lib/asciidoctor/html/utils.rb

@@ -85,6 +85,24 @@ module Asciidoctor
         end
         %(<span class="title-mark">#{sectnum}</span>)
       end
+
+      def self.wrap_live(content, live_attr)
+        return content unless live_attr
+
+        /\A(?<default>normal|faded|covered)-(?<live>faded|covered)\Z/ =~ live_attr
+
+        live_class = %(live-#{live || "faded"})
+        default_class = %(live-default-#{default || "normal"})
+        <<~HTML
+          <div class="live #{default_class} #{live_class}" data-reset="#{default_class}">
+          <div class="live-select"><i class="bi bi-eye"></i></div>
+          #{content}</div> <!-- .live -->
+        HTML
+      end
+
+      def self.line_number_attr(line_number, live: false)
+        live ? %( data-line-number="#{line_number}") : ""
+      end
     end
   end
 end

data/lib/asciidoctor/html/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Html
-    VERSION = "2.0.2"
+    VERSION = "2.1.0"
   end
 end

data/lib/minitest/html_plugin.rb

@@ -35,7 +35,7 @@ module Minitest
       color = failed ? "danger" : "success"
       id = "test-#{name.tr "_", "-"}"
       title = display_result_title name, failed, color
-      pre = %([source,asciidoc]\n------\n#{adoc}\n------\n)
+      pre = %([live=normal-faded,asciidoc]\n------\n#{adoc}\n------\n)
       fail = failed ? display_failure(@results[key].join("\n")) : ""
       %([##{id}]\n== #{title}\n\n#{pre}#{fail}\n\n#{adoc}\n\n)
     end