feat: new rendererOption: spaceToHtmlTag

convert spaces/tabs into HTML codes like `<span class="ch sp"> </span>`
and the frontend is responsible for rendering them with CSS.
when using this, "spacesToNbsp" should be false and "tabSize" is not respected.

Signed-off-by: Jack Cherng <[email protected]>

Author: jfcherng

example/demo_base.php

@@ -37,6 +37,10 @@
     'separateBlock' => true,
     // show the (table) header
     'showHeader' => true,
+    // convert spaces/tabs into HTML codes like `<span class="ch sp"> </span>`
+    // and the frontend is responsible for rendering them with CSS.
+    // when using this, "spacesToNbsp" should be false and "tabSize" is not respected.
+    'spaceToHtmlTag' => false,
     // the frontend HTML could use CSS "white-space: pre;" to visualize consecutive whitespaces
     // but if you want to visualize them in the backend with "&nbsp;", you can set this to true
     'spacesToNbsp' => false,

src/Renderer/AbstractRenderer.php

@@ -66,6 +66,10 @@ abstract class AbstractRenderer implements RendererInterface
         'separateBlock' => true,
         // show the (table) header
         'showHeader' => true,
+        // convert spaces/tabs into HTML codes like `<span class="ch sp"> </span>`
+        // and the frontend is responsible for rendering them with CSS.
+        // when using this, "spacesToNbsp" should be false and "tabSize" is not respected.
+        'spaceToHtmlTag' => false,
         // the frontend HTML could use CSS "white-space: pre;" to visualize consecutive whitespaces
         // but if you want to visualize them in the backend with "&nbsp;", you can set this to true
         'spacesToNbsp' => false,

src/Renderer/Html/AbstractHtml.php

@@ -255,13 +255,20 @@ protected function formatLines(array $lines): array
      */
     protected function formatStringFromLines(string $string): string
     {
-        $string = $this->expandTabs($string, $this->options['tabSize']);
+        if (!$this->options['spaceToHtmlTag']) {
+            $string = $this->expandTabs($string, $this->options['tabSize']);
+        }
+
         $string = $this->htmlSafe($string);
 
         if ($this->options['spacesToNbsp']) {
             $string = $this->htmlFixSpaces($string);
         }
 
+        if ($this->options['spaceToHtmlTag']) {
+            $string = $this->htmlReplaceSpacesToHtmlTag($string);
+        }
+
         return $string;
     }
 
@@ -315,6 +322,21 @@ protected function htmlFixSpaces(string $string): string
         return str_replace(' ', ' ', $string);
     }
 
+    /**
+     * Replace spaces/tabs with HTML tags, which may be styled in frontend with CSS.
+     *
+     * @param string $string the string of spaces
+     *
+     * @return string the HTML representation of the string
+     */
+    protected function htmlReplaceSpacesToHtmlTag(string $string): string
+    {
+        return strtr($string, [
+            ' ' => '<span class="ch sp"> </span>',
+            "\t" => "<span class=\"ch tab\">\t</span>",
+        ]);
+    }
+
     /**
      * Make sure the "changes" array uses int "tag".
      *