minor #139 Improve the handling of custom CSS classes in code blocks (javiereguiluz)

javiereguiluz · javiereguiluz · commit 4b1e49a78554 · 2022-02-10T20:50:02.000+01:00
This PR was merged into the main branch. Discussion ---------- Improve the handling of custom CSS classes in code blocks This tweaks #138 a bit to avoid unnecessary white spaces. Commits ------- 3b0db51 Improve the handling of custom CSS classes in code blocks
diff --git a/src/Renderers/CodeNodeRenderer.php b/src/Renderers/CodeNodeRenderer.php
@@ -84,7 +84,7 @@ public function render(): string
         return $this->templateRenderer->render(
             'code.html.twig',
             [
-                'css_classes' => $this->codeNode->getClassesString(),
+                'custom_css_classes' => $this->codeNode->getClassesString(),
                 'languages' => $languages,
                 'line_numbers' => $lineNumbers,
                 'code' => $highlightedCode,
diff --git a/src/Templates/default/html/code.html.twig b/src/Templates/default/html/code.html.twig
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages|map(language => "codeblock-#{language}")|join(' ') }} {{ css_classes }}">
+<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages|map(language => "codeblock-#{language}")|join(' ') }}{% if custom_css_classes %} {{ custom_css_classes }}{% endif %}">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">{{ line_numbers }}</pre>
         <pre class="codeblock-code"><code>{{ code|raw }}</code></pre>
diff --git a/tests/fixtures/expected/blocks/code-blocks/bash.html b/tests/fixtures/expected/blocks/code-blocks/bash.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm 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>
diff --git a/tests/fixtures/expected/blocks/code-blocks/diff.html b/tests/fixtures/expected/blocks/code-blocks/diff.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="5" class="notranslate codeblock codeblock-length-sm codeblock-diff ">
+<div translate="no" data-loc="5" class="notranslate codeblock codeblock-length-sm codeblock-diff">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -17,7 +17,7 @@
     </div>
 </div>
 
-<div translate="no" data-loc="6" class="notranslate codeblock codeblock-length-sm codeblock-diff ">
+<div translate="no" data-loc="6" class="notranslate codeblock codeblock-length-sm codeblock-diff">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
diff --git a/tests/fixtures/expected/blocks/code-blocks/html-php.html b/tests/fixtures/expected/blocks/code-blocks/html-php.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="12" class="notranslate codeblock codeblock-length-md 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
diff --git a/tests/fixtures/expected/blocks/code-blocks/html-twig.html b/tests/fixtures/expected/blocks/code-blocks/html-twig.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="2" class="notranslate codeblock codeblock-length-sm 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>
diff --git a/tests/fixtures/expected/blocks/code-blocks/html.html b/tests/fixtures/expected/blocks/code-blocks/html.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm 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>
diff --git a/tests/fixtures/expected/blocks/code-blocks/ini.html b/tests/fixtures/expected/blocks/code-blocks/ini.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm 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>
diff --git a/tests/fixtures/expected/blocks/code-blocks/php-annotations.html b/tests/fixtures/expected/blocks/code-blocks/php-annotations.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="14" class="notranslate codeblock codeblock-length-md 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
diff --git a/tests/fixtures/expected/blocks/code-blocks/php.html b/tests/fixtures/expected/blocks/code-blocks/php.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="7" class="notranslate codeblock codeblock-length-sm 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
diff --git a/tests/fixtures/expected/blocks/code-blocks/terminal.html b/tests/fixtures/expected/blocks/code-blocks/terminal.html
@@ -1,11 +1,11 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm 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" data-loc="2" class="notranslate codeblock codeblock-length-sm 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" data-loc="3" class="notranslate codeblock codeblock-length-sm 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
diff --git a/tests/fixtures/expected/blocks/code-blocks/text.html b/tests/fixtures/expected/blocks/code-blocks/text.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-text ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-text">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code>some text</code></pre>
diff --git a/tests/fixtures/expected/blocks/code-blocks/twig.html b/tests/fixtures/expected/blocks/code-blocks/twig.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-twig ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-twig">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment">{# some code #}</span></code></pre>
diff --git a/tests/fixtures/expected/blocks/code-blocks/xml.html b/tests/fixtures/expected/blocks/code-blocks/xml.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-xml ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-xml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment">&lt;!-- some code --&gt;</span>
diff --git a/tests/fixtures/expected/blocks/code-blocks/yaml.html b/tests/fixtures/expected/blocks/code-blocks/yaml.html
@@ -1,4 +1,4 @@
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment"># some code</span>
diff --git a/tests/fixtures/expected/blocks/directives/configuration-block.html b/tests/fixtures/expected/blocks/directives/configuration-block.html
@@ -4,15 +4,15 @@
         <li data-language="php" > <span>PHP</span> </li>
     </ul>
     <div class="configuration-codeblock" data-language="yaml" style="">
-        <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml ">
+        <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml">
             <div class="codeblock-scroll">
                 <pre class="codeblock-lines">1</pre>
                 <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span></code></pre>
             </div>
         </div>
     </div>
     <div class="configuration-codeblock" data-language="php" style="display: none">
-        <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php ">
+        <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php">
             <div class="codeblock-scroll">
                 <pre class="codeblock-lines">1</pre>
                 <pre class="codeblock-code"><code><span class="hljs-comment">// config/routes.php</span></code></pre>
diff --git a/tests/fixtures/expected/blocks/directives/note-code-block-nested.html b/tests/fixtures/expected/blocks/directives/note-code-block-nested.html
@@ -3,7 +3,7 @@
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
         <span>Note</span>
     </p><p>test</p>
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment">// code</span>
diff --git a/tests/fixtures/expected/blocks/directives/sidebar-code-block-nested.html b/tests/fixtures/expected/blocks/directives/sidebar-code-block-nested.html
@@ -1,5 +1,5 @@
 <div class="admonition-wrapper"><div class="admonition admonition-sidebar"><p class="sidebar-title"><span>The sidebar's title</span></p><p>some text before code block</p>
-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php ">
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1</pre>
         <pre class="codeblock-code"><code><span class="hljs-comment">// some code</span>
diff --git a/tests/fixtures/expected/blocks/nodes/literal.html b/tests/fixtures/expected/blocks/nodes/literal.html
@@ -1,5 +1,5 @@
 <p>here is some php code from literal:</p>
-<div translate="no" data-loc="7" class="notranslate codeblock codeblock-length-sm 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

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ public function render(): string`
`84`	`84`	`return $this->templateRenderer->render(`
`85`	`85`	`'code.html.twig',`
`86`	`86`	`[`
`87`		`- 'css_classes' => $this->codeNode->getClassesString(),`
	`87`	`+ 'custom_css_classes' => $this->codeNode->getClassesString(),`
`88`	`88`	`'languages' => $languages,`
`89`	`89`	`'line_numbers' => $lineNumbers,`
`90`	`90`	`'code' => $highlightedCode,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages\|map(language => "codeblock-#{language}")\|join(' ') }} {{ css_classes }}">`
	`1`	`+<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages\|map(language => "codeblock-#{language}")\|join(' ') }}{% if custom_css_classes %} {{ custom_css_classes }}{% endif %}">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">{{ line_numbers }}</pre>`
`4`	`4`	`<pre class="codeblock-code"><code>{{ code\|raw }}</code></pre>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-bash ">`
	`1`	`+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-bash">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1</pre>`
`4`	`4`	`<pre class="codeblock-code"><code>git <span class="hljs-built_in">clone</span> git@github.com:symfony/symfony.git</code></pre>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="5" class="notranslate codeblock codeblock-length-sm codeblock-diff ">`
	`1`	`+<div translate="no" data-loc="5" class="notranslate codeblock codeblock-length-sm codeblock-diff">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1`
`4`	`4`	`2`
`@@ -17,7 +17,7 @@`
`17`	`17`	`</div>`
`18`	`18`	`</div>`
`19`	`19`
`20`		`-<div translate="no" data-loc="6" class="notranslate codeblock codeblock-length-sm codeblock-diff ">`
	`20`	`+<div translate="no" data-loc="6" class="notranslate codeblock codeblock-length-sm codeblock-diff">`
`21`	`21`	`<div class="codeblock-scroll">`
`22`	`22`	`<pre class="codeblock-lines">1`
`23`	`23`	`2`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="12" class="notranslate codeblock codeblock-length-md codeblock-html+php codeblock-html ">`
	`1`	`+<div translate="no" data-loc="12" class="notranslate codeblock codeblock-length-md codeblock-html+php codeblock-html">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1`
`4`	`4`	`2`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="2" class="notranslate codeblock codeblock-length-sm codeblock-html+twig codeblock-twig ">`
	`1`	`+<div translate="no" data-loc="2" class="notranslate codeblock codeblock-length-sm codeblock-html+twig codeblock-twig">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1`
`4`	`4`	`2</pre>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="14" class="notranslate codeblock codeblock-length-md codeblock-php-annotations codeblock-php ">`
	`1`	`+<div translate="no" data-loc="14" class="notranslate codeblock codeblock-length-md codeblock-php-annotations codeblock-php">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1`
`4`	`4`	`2`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div translate="no" data-loc="7" class="notranslate codeblock codeblock-length-sm codeblock-php ">`
	`1`	`+<div translate="no" data-loc="7" class="notranslate codeblock codeblock-length-sm codeblock-php">`
`2`	`2`	`<div class="codeblock-scroll">`
`3`	`3`	`<pre class="codeblock-lines">1`
`4`	`4`	`2`