asciidoctor-html 2.0.3 → 2.1.1

data/jupyterlite/repl/jupyter-lite.json

@@ -0,0 +1,12 @@
+{
+    "jupyter-lite-schema-version": 0,
+    "jupyter-config-data": {
+      "showLoadingIndicator": true,
+      "disabledExtensions": [
+        "@jupyterlab/drawio-extension",
+        "jupyterlab-kernel-spy",
+        "jupyterlab-tour"
+      ]
+    }
+  }
+  

data/jupyterlite/requirements.txt

@@ -0,0 +1,7 @@
+# Core modules (mandatory)
+jupyterlite-core==0.8.0
+jupyterlab~=4.6.0
+notebook~=7.6.0
+
+# Python kernel (optional)
+jupyterlite-pyodide-kernel==0.8.0

data/lib/asciidoctor/html/book.rb

@@ -31,6 +31,7 @@ module Asciidoctor
 
       DOCATTRS = {
         "sectids" => false,
+        "xrefstyle" => "short",
         "stem" => "latexmath",
         "hide-uri-scheme" => true,
         "source-highlighter" => "highlight.js",
@@ -59,6 +60,7 @@ module Asciidoctor
       # - short_title
       # - authors
       # - chapname
+      # - base_url
       def initialize(opts = {})
         opts = DEFAULT_OPTS.merge opts
         @title = ERB::Escape.html_escape opts[:title]
@@ -116,7 +118,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 +209,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 +261,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 +270,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/cli.rb

@@ -8,6 +8,7 @@ require "psych"
 require_relative "book"
 require_relative "webmanifest"
 require_relative "version"
+require_relative "jupyterlite"
 
 module Asciidoctor
   module Html
@@ -53,10 +54,11 @@ module Asciidoctor
             "#{config["srcdir"]}/#{f}"
           end
         end
+        config["jupyterlite"] = config["jupyterlite"] || false
         config
       end
 
-      def self.setup_outdir(srcdir, outdir)
+      def self.setup_outdir(srcdir, outdir, jupyterlite: false)
         assets_out = "#{outdir}/#{ASSETS_PATH}"
         FileUtils.mkdir_p assets_out unless File.directory?(assets_out)
         %W[#{IMG_PATH} #{CSS_PATH} #{FAVICON_PATH}].each do |p|
@@ -76,6 +78,7 @@ module Asciidoctor
           puts
           FileUtils.cp_r "#{rootdir}/#{p}", assets_out
         end
+        build_jupyterlite(rootdir, outdir) if jupyterlite
       end
 
       def self.generate_webmanifest(outdir, name, short_name)
@@ -95,6 +98,13 @@ module Asciidoctor
         book_opts
       end
 
+      def self.build_jupyterlite(rootdir, outdir)
+        jupyterlite_outdir = "#{outdir}/#{Jupyterlite::PATH}"
+        return if File.directory?(jupyterlite_outdir)
+
+        system %(#{rootdir}/bin/build-jupyterlite -o "#{jupyterlite_outdir}" "#{rootdir}/#{Jupyterlite::PATH}")
+      end
+
       def self.run(opts = nil)
         opts ||= parse_opts
         if opts[:version]
@@ -105,7 +115,7 @@ module Asciidoctor
         outdir = config["outdir"]
         srcdir = config["srcdir"]
         book_opts = generate_bookopts config
-        setup_outdir srcdir, outdir
+        setup_outdir srcdir, outdir, jupyterlite: config["jupyterlite"]
         generate_webmanifest outdir, book_opts[:title], book_opts[:short_title]
         book = Book.new book_opts
         puts "Writing book to\n  #{outdir}"

data/lib/asciidoctor/html/converter.rb

@@ -5,6 +5,7 @@ require_relative "list"
 require_relative "utils"
 require_relative "figure"
 require_relative "table"
+require_relative "jupyterlite"
 
 module Asciidoctor
   module Html
@@ -29,7 +30,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 +39,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)
@@ -118,19 +120,30 @@ module Asciidoctor
       end
 
       def convert_listing(node)
+        if node.option? "jupyter"
+          return Utils.wrap_id_classes(
+            "#{Utils.display_title node}#{Jupyterlite.html node}",
+            node.id,
+            "jupyter-cell-wrapper"
+          )
+        end
+
         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
           pre_open = %(<pre#{%( class="nowrap") if nowrap}>)
           pre_close = "</pre>"
         end
-        title = Utils.display_title(node)
+        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 +205,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 +251,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 +264,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 +279,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/cref_inline_macro.rb

@@ -28,8 +28,8 @@ module Asciidoctor
         tag = path_tag.size > 1 ? path_tag[1] : "chapref"
         doc_key = Pathname(path).sub_ext ""
         text = attrs["text"] || %(<%= refs.dig("#{doc_key}", "#{tag}") || "[#{doc_key}][#{tag}]" %>)
-        hash_tag = path_tag.size > 1 ? "##{path_tag[1]}" : ""
-        href = "#{Pathname(path).sub_ext ".html"}#{hash_tag}"
+        hashtag = "##{path_tag[1]}" if path_tag.size > 1
+        href = "#{Pathname(path).sub_ext ".html"}#{hashtag}"
         create_anchor parent, text, type: :link, target: href
       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;
@@ -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/jupyterlite.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Html
+    # Constants for the jupyterlite library
+    module Jupyterlite
+      class << self
+        attr_accessor :cell_id
+      end
+
+      PATH = "jupyterlite"
+      REPL_PATH = "repl/index.html"
+
+      CONFIG = {
+        toolbar: true,
+        kernel: "python",
+        promptCellPosition: "left",
+        clearCellsOnExecute: true,
+        hideCodeInput: true,
+        clearCodeContentOnExecute: false,
+        showBanner: false,
+        execute: false
+      }.freeze
+
+      def self.repl_path_with_options(node)
+        query_string = ["code=#{URI.encode_uri_component node.content}"]
+        query_string << CONFIG.merge(
+          { promptCellPosition: node.attr("prompt-position", "left") }
+        ).map do |k, v|
+          value = if v == true
+                    1
+                  elsif v == false
+                    0
+                  else
+                    v
+                  end
+          "#{k}=#{URI.encode_uri_component value}"
+        end
+        "#{REPL_PATH}?#{query_string.join "&"}"
+      end
+
+      def self.html(node)
+        @cell_id += 1
+        cell_id = "jupyter-cell-frame-#{@cell_id}"
+        height_attr = %( style="height: #{node.attr("height")}px;") if node.attr?("height")
+        <<~HTML
+          <div id="#{cell_id}"#{height_attr} class="jupyter-cell"></div>
+          <script>
+            (function(){
+              const cell = document.getElementById('#{cell_id}');
+              addEventListener('load', () => {
+                const frame = document.createElement('iframe');
+                frame.src = '#{PATH}/#{repl_path_with_options node}';
+                frame.width = '100%';
+                frame.height = '100%';
+                cell.appendChild(frame);
+              });
+            })();
+          </script>
+        HTML
+      end
+    end
+  end
+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