Split GLFM examples in rendered HTML

- Split GLFM examples into two separate code blocks in
  rendered HTML. This will facilitate easier formatting
  to better match the standard CommonMark HTML-rendered spec

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/102822

scripts/lib/glfm/constants.rb

@@ -42,6 +42,10 @@ module Constants
       version: alpha
       ...
     MARKDOWN
+    EXAMPLE_BACKTICKS_LENGTH = 32
+    EXAMPLE_BACKTICKS_STRING = '`' * EXAMPLE_BACKTICKS_LENGTH
+    EXAMPLE_BEGIN_STRING = "#{EXAMPLE_BACKTICKS_STRING} example"
+    EXAMPLE_END_STRING = EXAMPLE_BACKTICKS_STRING
     INTRODUCTION_HEADER_LINE_TEXT = '# Introduction'
     BEGIN_TESTS_COMMENT_LINE_TEXT = '<!-- BEGIN TESTS -->'
     END_TESTS_COMMENT_LINE_TEXT = '<!-- END TESTS -->'

scripts/lib/glfm/parse_examples.rb

 # frozen_string_literal: true
 
+require_relative 'constants'
+
 # This module contains a Ruby port of Python logic from the `get_tests` method of the
 # `spec_test.py` script (see copy of original code in a comment at the bottom of this file):
 # https://github.com/github/cmark-gfm/blob/5dfedc7/test/spec_tests.py#L82
@@ -20,11 +22,11 @@
 # in `scripts/lib/glfm/update_example_snapshots.rb`
 module Glfm
   module ParseExamples
+    include Constants
+
     REGULAR_TEXT = 0
     MARKDOWN_EXAMPLE = 1
     HTML_OUTPUT = 2
-    EXAMPLE_BACKTICKS_LENGTH = 32
-    EXAMPLE_BACKTICKS_STRING = '`' * EXAMPLE_BACKTICKS_LENGTH
 
     # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/AbcSize
     def parse_examples(spec_txt_lines)
@@ -47,11 +49,11 @@ def parse_examples(spec_txt_lines)
       spec_txt_lines.each do |line|
         line_number += 1
         stripped_line = line.strip
-        if stripped_line.start_with?("#{EXAMPLE_BACKTICKS_STRING} example")
+        if stripped_line.start_with?(EXAMPLE_BEGIN_STRING)
           # If beginning line of an example block...
           state = MARKDOWN_EXAMPLE
           extensions = stripped_line[(EXAMPLE_BACKTICKS_LENGTH + " example".length)..].split
-        elsif stripped_line == EXAMPLE_BACKTICKS_STRING
+        elsif stripped_line == EXAMPLE_END_STRING
           # Else if end line of an example block...
           state = REGULAR_TEXT
           example_number += 1

scripts/lib/glfm/update_specification.rb

@@ -171,12 +171,15 @@ def write_snapshot_spec_md(snapshot_spec_md_string)
     def generate_spec_html_files(spec_txt_string, snapshot_spec_md_string)
       output("Generating spec.html and snapshot_spec.html from spec.txt and snapshot_spec.md markdown...")
 
+      spec_txt_string_split_examples = split_examples_into_html_and_md(spec_txt_string)
+      snapshot_spec_md_string_split_examples = split_examples_into_html_and_md(snapshot_spec_md_string)
+
       input_markdown_yml_string = <<~MARKDOWN
         ---
         spec_txt: |
-        #{spec_txt_string.gsub(/^/, '  ')}
+        #{spec_txt_string_split_examples.gsub(/^/, '  ')}
         snapshot_spec_md: |
-        #{snapshot_spec_md_string.gsub(/^/, '  ')}
+        #{snapshot_spec_md_string_split_examples.gsub(/^/, '  ')}
       MARKDOWN
 
       # NOTE: We must copy the input YAML file used by the `render_static_html.rb`
@@ -209,6 +212,13 @@ def generate_spec_html_files(spec_txt_string, snapshot_spec_md_string)
       [rendered_html_hash.fetch(:spec_txt), rendered_html_hash.fetch(:snapshot_spec_md)]
     end
 
+    def split_examples_into_html_and_md(spec_md_string)
+      spec_md_string.gsub(
+        /(^#{EXAMPLE_BEGIN_STRING}.*?$(?:.|\n)*?)^\.$(\n(?:.|\n)*?^#{EXAMPLE_END_STRING}$)/mo,
+        "\\1#{EXAMPLE_BACKTICKS_STRING}\n\n#{EXAMPLE_BACKTICKS_STRING}\\2"
+      )
+    end
+
     def write_spec_html(spec_html_string)
       output("Writing #{GLFM_SPEC_TXT_PATH}...")
       FileUtils.mkdir_p(Pathname.new(GLFM_SPEC_HTML_PATH).dirname)

spec/scripts/lib/glfm/update_specification_spec.rb

@@ -55,12 +55,20 @@
     <<~MARKDOWN
       # Section with Examples
 
-      ## Strong
+      ## Emphasis and Strong
 
       ```````````````````````````````` example
-      __bold__
+      _EMPHASIS LINE 1_
+      _EMPHASIS LINE 2_
       .
-      <p><strong>bold</strong></p>
+      <p><em>EMPHASIS LINE 1</em>
+      <em>EMPHASIS LINE 2</em></p>
+      ````````````````````````````````
+
+      ```````````````````````````````` example
+      __STRONG!__
+      .
+      <p><strong>STRONG!</strong></p>
       ````````````````````````````````
 
       End of last GitHub examples section.
@@ -317,21 +325,33 @@
         </div>
         <h1 data-sourcepos="5:1-5:23" dir="auto">
         <a id="user-content-section-with-examples" class="anchor" href="#section-with-examples" aria-hidden="true"></a>Section with Examples</h1>
-        <h2 data-sourcepos="7:1-7:9" dir="auto">
-        <a id="user-content-strong" class="anchor" href="#strong" aria-hidden="true"></a>Strong</h2>
+        <h2 data-sourcepos="7:1-7:22" dir="auto">
+        <a id="user-content-emphasis-and-strong" class="anchor" href="#emphasis-and-strong" aria-hidden="true"></a>Emphasis and Strong</h2>
+        <div class="gl-relative markdown-code-block js-markdown-code">
+        <pre data-sourcepos="9:1-12:32" class="code highlight js-syntax-highlight language-plaintext" lang="plaintext" data-canonical-lang="example" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">_EMPHASIS LINE 1_</span>
+        <span id="LC2" class="line" lang="plaintext">_EMPHASIS LINE 2_</span></code></pre>
+        <copy-code></copy-code>
+        </div>
+        <div class="gl-relative markdown-code-block js-markdown-code">
+        <pre data-sourcepos="14:1-17:32" class="code highlight js-syntax-highlight language-plaintext" lang="plaintext" data-canonical-lang="" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">&lt;p&gt;&lt;em&gt;EMPHASIS LINE 1&lt;/em&gt;</span>
+        <span id="LC2" class="line" lang="plaintext">&lt;em&gt;EMPHASIS LINE 2&lt;/em&gt;&lt;/p&gt;</span></code></pre>
+        <copy-code></copy-code>
+        </div>
+        <div class="gl-relative markdown-code-block js-markdown-code">
+        <pre data-sourcepos="19:1-21:32" class="code highlight js-syntax-highlight language-plaintext" lang="plaintext" data-canonical-lang="example" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">__STRONG!__</span></code></pre>
+        <copy-code></copy-code>
+        </div>
         <div class="gl-relative markdown-code-block js-markdown-code">
-        <pre data-sourcepos="9:1-13:32" class="code highlight js-syntax-highlight language-plaintext" lang="plaintext" data-canonical-lang="example" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">__bold__</span>
-        <span id="LC2" class="line" lang="plaintext">.</span>
-        <span id="LC3" class="line" lang="plaintext">&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt;&lt;/p&gt;</span></code></pre>
+        <pre data-sourcepos="23:1-25:32" class="code highlight js-syntax-highlight language-plaintext" lang="plaintext" data-canonical-lang="" v-pre="true"><code><span id="LC1" class="line" lang="plaintext">&lt;p&gt;&lt;strong&gt;STRONG!&lt;/strong&gt;&lt;/p&gt;</span></code></pre>
         <copy-code></copy-code>
         </div>
-        <p data-sourcepos="15:1-15:36" dir="auto">End of last GitHub examples section.</p>
-        <h1 data-sourcepos="17:1-17:46" dir="auto">
+        <p data-sourcepos="27:1-27:36" dir="auto">End of last GitHub examples section.</p>
+        <h1 data-sourcepos="29:1-29:46" dir="auto">
         <a id="user-content-official-specification-section-with-examples" class="anchor" href="#official-specification-section-with-examples" aria-hidden="true"></a>Official Specification Section with Examples</h1>
-        <p data-sourcepos="19:1-19:14" dir="auto">Some examples.</p>
-        <h1 data-sourcepos="22:1-22:42" dir="auto">
+        <p data-sourcepos="31:1-31:14" dir="auto">Some examples.</p>
+        <h1 data-sourcepos="34:1-34:42" dir="auto">
         <a id="user-content-internal-extension-section-with-examples" class="anchor" href="#internal-extension-section-with-examples" aria-hidden="true"></a>Internal Extension Section with Examples</h1>
-        <p data-sourcepos="24:1-24:14" dir="auto">Some examples.</p>
+        <p data-sourcepos="36:1-36:14" dir="auto">Some examples.</p>
       RENDERED_HTML
       expect(snapshot_spec_html_contents).to be == expected_snapshot_spec_html
     end