minor #107 Update the attributes and classes of code blocks (javiereguiluz)

This PR was squashed before being merged into the main branch.

Discussion
----------

Update the attributes and classes of code blocks

I know I changed this lots of times ... sorry 🙏  ... but I think I finally got it right.

This adds both a semantic class related to the code length (e.g. `codeblock-length-sm`) to tweak its styling as well as an HTML attribute with the exact number of lines of code (e.g. `data-loc="17"`) which we need for very special styling (e.g. code "blocks" of just 1 line) and for dynamic JS features (e.g. hide long listings and show a message saying "click to see the other 35 lines").

Commits
-------

fc60649 Update the attributes and classes of code blocks

Author: javiereguiluz

src/Renderers/CodeNodeRenderer.php

@@ -79,18 +79,18 @@ public function render(): string
         }
 
         $numOfLines = \count(preg_split('/\r\n|\r|\n/', $highlightedCode));
-        $lines = implode("\n", range(1, $numOfLines));
+        $lineNumbers = implode("\n", range(1, $numOfLines));
 
         return $this->templateRenderer->render(
             'code.html.twig',
             [
                 'languages' => $languages,
-                'lines' => $lines,
+                'line_numbers' => $lineNumbers,
                 'code' => $highlightedCode,
-                // this is the number of digits of the codeblock lines-of-code
-                // e.g. LOC = 5, digits = 1; LOC = 18, digits = 2
-                // this is useful to tweak the code listings according to their length
-                'numLocDigits' => strlen((string) $numOfLines),
+                'loc' => $numOfLines,
+                // the length of the codeblock in a semantic way (to tweak styling)
+                // e.g. LOC = 5, length = 'sm'; LOC = 18, length = 'md'
+                'length' => [1 => 'sm', 2 => 'md', 3 => 'lg', 4 => 'xl'][strlen((string) $numOfLines)],
             ]
         );
     }

src/Templates/default/html/code.html.twig

@@ -1,6 +1,6 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-{{ numLocDigits }} {{ languages|map(language => "codeblock-#{language}")|join(' ') }}">
+<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages|map(language => "codeblock-#{language}")|join(' ') }}">
     <div class="codeblock-scroll">
-        <pre class="codeblock-lines">{{ lines }}</pre>
+        <pre class="codeblock-lines">{{ line_numbers }}</pre>
         <pre class="codeblock-code"><code>{{ code|raw }}</code></pre>
     </div>
 </div>

tests/fixtures/expected/blocks/code-blocks/bash.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-bash">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-bash">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code>git <span class="hljs-built_in">clone</span> git@github.com:symfony/symfony.git</code></pre>

tests/fixtures/expected/blocks/code-blocks/html-php.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-html+php codeblock-html">
+<div translate="no" data-loc="12" class="notranslate codeblock codeblock-length-md codeblock-html+php codeblock-html">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2

tests/fixtures/expected/blocks/code-blocks/html-twig.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-html+twig codeblock-twig">
+<div translate="no" data-loc="2" class="notranslate codeblock codeblock-length-sm codeblock-html+twig codeblock-twig">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2</pre>

tests/fixtures/expected/blocks/code-blocks/html.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-html">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-html">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment">&lt;!-- some code --&gt;</span>

tests/fixtures/expected/blocks/code-blocks/ini.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-ini">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-ini">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-attr">fetch</span> = +refs/notes/*:refs/notes/*</code></pre>

tests/fixtures/expected/blocks/code-blocks/php-annotations.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-php-annotations codeblock-php">
+<div translate="no" data-loc="14" class="notranslate codeblock codeblock-length-md codeblock-php-annotations codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2

tests/fixtures/expected/blocks/code-blocks/php.html

@@ -1,4 +1,4 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-php">
+<div translate="no" data-loc="7" class="notranslate codeblock codeblock-length-sm codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2

tests/fixtures/expected/blocks/code-blocks/terminal.html

@@ -1,11 +1,11 @@
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-terminal codeblock-bash">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-terminal codeblock-bash">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code>git <span
             class="hljs-built_in">clone</span> git@github.com:symfony/symfony.git</code></pre>
     </div>
 </div>
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-terminal codeblock-bash">
+<div translate="no" data-loc="2" class="notranslate codeblock codeblock-length-sm codeblock-terminal codeblock-bash">
    <div class="codeblock-scroll">
        <pre class="codeblock-lines">1
 2</pre>
@@ -20,7 +20,7 @@
    </div>
 </div>
 
-<div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-terminal codeblock-bash">
+<div translate="no" data-loc="3" class="notranslate codeblock codeblock-length-sm codeblock-terminal codeblock-bash">
    <div class="codeblock-scroll">
        <pre class="codeblock-lines">1
 2