Add missing space between style and class attributes on line elements

src/Generators/HtmlGenerator.php

@@ -691,7 +691,7 @@ private function buildLineElement(array $classes, string $content, int $currentL
     {
         $lineStyles = $this->themeResolver()->getLineStyles($classes);
         $styles = $this->themeResolver()->toStyleString($lineStyles);
-        $styleAttr = $styles !== '' ? "style=\"{$styles}\"" : '';
+        $styleAttr = $styles !== '' ? "style=\"{$styles}\" " : '';
 
         $attributes = $this->generationOptions()->lineAttributes[$currentLine] ?? [];
         $attributeString = ! empty($attributes)

tests/LineAttributeSpacingTest.php

@@ -0,0 +1,21 @@
+<?php
+
+use Torchlight\Engine\Engine;
+
+test('line elements separate the style and class attributes with a space', function (): void {
+    $code = <<<'CODE'
+$a = 1; // [tl! highlight]
+$b = 2; // [tl! ++]
+$c = 3; // [tl! --]
+CODE;
+
+    $html = (new Engine)->codeToHtml($code, 'php', 'github-light');
+
+    // Lines that carry a line style used to render as `style="..."class='...'`
+    // (no space), which HTML sanitizers like WordPress' wp_kses reject,
+    // stripping the class list from highlighted and diff lines entirely.
+    expect($html)->toContain('line-highlight')
+        ->and($html)->toContain('line-add')
+        ->and($html)->toContain('line-remove')
+        ->and($html)->not->toMatch('/["\']class=/');
+});

tests/fixtures/tests/cpp-comment-is-removed.txt

@@ -1,6 +1,6 @@
 :::config { "language": "cpp", "theme": "nord" }
 return 0; /* [tl! ~~] */
 :::expectation
-<pre><code data-theme='nord' data-lang='cpp' class='phiki language-cpp nord torchlight has-highlight-lines' style='background-color: #2e3440;color: #d8dee9;--theme-selection-background: #88c0d099'><!-- Syntax highlighted by Phiki and torchlight.dev --><div style="background: #3b4252"class='line line-highlight line-has-background'><span style="color: #d8dee9; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #81A1C1;">return</span><span class="token" style="color: #d8dee9ff;"> 0</span><span class="token" style="color: #81A1C1;">;</span><span class="token" style="color: #616E88;"> </span></div></code></pre>
+<pre><code data-theme='nord' data-lang='cpp' class='phiki language-cpp nord torchlight has-highlight-lines' style='background-color: #2e3440;color: #d8dee9;--theme-selection-background: #88c0d099'><!-- Syntax highlighted by Phiki and torchlight.dev --><div style="background: #3b4252" class='line line-highlight line-has-background'><span style="color: #d8dee9; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #81A1C1;">return</span><span class="token" style="color: #d8dee9ff;"> 0</span><span class="token" style="color: #81A1C1;">;</span><span class="token" style="color: #616E88;"> </span></div></code></pre>
 :::end
-<pre><code data-theme='nord' data-lang='cpp' class='phiki language-cpp nord torchlight has-highlight-lines' style='background-color: #2e3440;color: #d8dee9;--theme-selection-background: #88c0d099'><!-- Syntax highlighted by Phiki and torchlight.dev --><div style="background: #3b4252"class='line line-highlight line-has-background'><span style="color: #d8dee9; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #81A1C1;">return</span><span class="token" style="color: #d8dee9ff;"> 0</span><span class="token" style="color: #81A1C1;">;</span><span class="token" style="color: #616E88;"> </span></div></code></pre>
+<pre><code data-theme='nord' data-lang='cpp' class='phiki language-cpp nord torchlight has-highlight-lines' style='background-color: #2e3440;color: #d8dee9;--theme-selection-background: #88c0d099'><!-- Syntax highlighted by Phiki and torchlight.dev --><div style="background: #3b4252" class='line line-highlight line-has-background'><span style="color: #d8dee9; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #81A1C1;">return</span><span class="token" style="color: #d8dee9ff;"> 0</span><span class="token" style="color: #81A1C1;">;</span><span class="token" style="color: #616E88;"> </span></div></code></pre>

tests/fixtures/tests/diff-indicators-in-place-of-line-numbers-but-off.txt

@@ -6,9 +6,9 @@ function () {
 }
 :::expectation
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>
 :::end
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> </span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>

tests/fixtures/tests/diff-indicators-in-place-of-line-numbers.txt

@@ -6,9 +6,9 @@ function () {
 }
 :::expectation
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>
 :::end
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>

tests/fixtures/tests/diff-indicators.txt

@@ -6,9 +6,9 @@ function () {
 }
 :::expectation
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="diff-indicator diff-indicator-add" style="user-select: none;color: #C3E88D;">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="diff-indicator diff-indicator-remove" style="user-select: none;color: #f07178;">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="diff-indicator diff-indicator-add" style="user-select: none;color: #C3E88D;">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="diff-indicator diff-indicator-remove" style="user-select: none;color: #f07178;">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>
 :::end
 <pre><code data-theme='min-dark' data-lang='php' class='phiki language-php min-dark torchlight has-add-lines has-remove-lines' style='background-color: #1f1f1f;--theme-selection-background: #212121'><!-- Syntax highlighted by Phiki and torchlight.dev --><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #f97583;">function</span><span class="token" style="color: #b392f0;"> () {
-</span></div><div style="background: #3a632a4b"class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="diff-indicator diff-indicator-add" style="user-select: none;color: #C3E88D;">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852"class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="diff-indicator diff-indicator-remove" style="user-select: none;color: #f07178;">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #b392f0;">}
+</span></div><div style="background: #3a632a4b" class='line line-add line-has-background'><span style="color: #C3E88D;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="diff-indicator diff-indicator-add" style="user-select: none;color: #C3E88D;">+</span><span class="token" style="color: #C3E88D;">    return 0; </span></div><div style="background: #88063852" class='line line-remove line-has-background'><span style="color: #f07178;text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="diff-indicator diff-indicator-remove" style="user-select: none;color: #f07178;">-</span><span class="token" style="color: #f07178;">    return 1; </span></div><div class='line'><span style="color: #727272; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="diff-indicator diff-indicator-empty" style="user-select: none;color: #727272"> </span><span class="token" style="color: #b392f0;">}
 </span></div></code></pre>