Add support for CSS classes in code blocks

javiereguiluz · javiereguiluz · commit 6367bc321b1e · 2022-02-10T16:22:32.000+01:00
diff --git a/src/Renderers/CodeNodeRenderer.php b/src/Renderers/CodeNodeRenderer.php
@@ -84,6 +84,7 @@ public function render(): string
         return $this->templateRenderer->render(
             'code.html.twig',
             [
+                '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(' ') }}">
+<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages|map(language => "codeblock-#{language}")|join(' ') }} {{ css_classes }}">
     <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
@@ -33,3 +33,16 @@
        </pre>
    </div>
 </div>
+
+<div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-terminal codeblock-bash hide">
+    <div class="codeblock-scroll">
+        <pre class="codeblock-lines">1</pre>
+        <pre class="codeblock-code">
+            <code>
+                <span class="hljs-prompt">$ </span>
+                git branch -D sessions-in-db ||
+               <span class="hljs-literal">true</span>
+           </code>
+        </pre>
+    </div>
+</div>
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
diff --git a/tests/fixtures/source/blocks/code-blocks/terminal.rst b/tests/fixtures/source/blocks/code-blocks/terminal.rst
@@ -12,3 +12,8 @@
     C:\> CIV
 
     # Civilization for DOS - my first computer game!
+
+.. code-block:: terminal
+    :class: hide
+
+    $ git branch -D sessions-in-db || true

Original file line number	Diff line number	Diff line change
`@@ -84,6 +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`	`88`	`'languages' => $languages,`
`88`	`89`	`'line_numbers' => $lineNumbers,`
`89`	`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(' ') }}">`
	`1`	`+<div translate="no" data-loc="{{ loc }}" class="notranslate codeblock codeblock-length-{{ length }} {{ languages\|map(language => "codeblock-#{language}")\|join(' ') }} {{ css_classes }}">`
`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`