QA

README.md

@@ -8,6 +8,7 @@ You can read about why I started this package [here](https://stitcher.io/blog/a-
 - [Themes](#themes)
   - [For the web](#for-the-web)
   - [For the terminal](#for-the-terminal)
+- [Gutter](#gutter)
 - [Special highlighting tags](#special-highlighting-tags)
   - [Emphasize strong and blur](#emphasize-strong-and-blur)
   - [Additions and deletions](#additions-and-deletions)
@@ -60,6 +61,20 @@ echo $highlighter->parse($code, 'php');
 
 ![](./.github/terminal.png)
 
+## Gutter
+
+This package can render an optional gutter if needed. 
+
+```php
+$highlighter = (new Highlighter())->withGutter(startAt: 10);
+```
+
+The gutter will show additions and deletions, and can start at any given line number:
+
+![](./.github/highlight-4.png)
+
+Gutter styling is managed within your CSS theme.
+
 ## Special highlighting tags
 
 This package offers a collection of special tags that you can use within your code snippets. These tags won't be shown in the final output, but rather adjust the highlighter's default styling. All these tags work multi-line, and will still properly render its wrapped content.

UPGRADING.md

@@ -11,7 +11,6 @@ $highlighter = (new \Tempest\Highlight\Highlighter())->withGutter();
 ```css
 .hl-gutter {
     display: inline-block;
-    margin-right: 1ch;
     font-size: 0.9em;
     color: #555;
     padding: 0 1ch;

src/Escape.php

@@ -28,7 +28,11 @@ public static function injection(string $input): string
 
     public static function terminal(string $input): string
     {
-        return str_replace(self::INJECTION_TOKEN, '', $input);
+        return preg_replace(
+            ['/❷(.*?)❸/', '/❿/'],
+            '',
+            $input,
+        );
     }
 
     public static function html(string $input): string

src/Languages/Base/Injections/GutterInjection.php

@@ -61,7 +61,7 @@ public function parse(string $content, Highlighter $highlighter): string|ParsedI
             $gutterClass = 'hl-gutter ' . ($this->classes[$i + $this->startAt] ?? '');
 
             $lines[$i] = sprintf(
-                Escape::tokens('<span class="%s">%s</span>%s'),
+                Escape::tokens('<span class="%s">%s</span> %s'),
                 $gutterClass,
                 str_pad(
                     string: (string) $gutterNumber,

src/Themes/highlight-light-lite.css

@@ -59,7 +59,6 @@ pre, code {
 
 .hl-gutter {
     display: inline-block;
-    margin-right: 1ch;
     font-size: 0.9em;
     color: #555;
     padding: 0 1ch;

test-terminal.php

@@ -5,7 +5,7 @@
 
 require_once __DIR__ . '/vendor/autoload.php';
 
-$highlighter = new Highlighter(new LightTerminalTheme());
+$highlighter = (new Highlighter(new LightTerminalTheme()))->withGutter();
 
 $target = $argc > 1
     ? $argv[1]

tests/Languages/Base/Injections/GutterInjectionTest.php

@@ -6,6 +6,7 @@
 
 use PHPUnit\Framework\TestCase;
 use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Themes\LightTerminalTheme;
 
 class GutterInjectionTest extends TestCase
 {
@@ -31,25 +32,55 @@ public function test_gutter_injection(): void
 TXT;
 
         $expected = <<<'TXT'
-<span class="hl-gutter ">  10</span><span class="hl-keyword">foreach</span> (<span class="hl-variable">$lines</span> <span class="hl-keyword">as</span> <span class="hl-variable">$i</span> =&gt; <span class="hl-variable">$line</span>) {
-<span class="hl-gutter ">  11</span>    <span class="hl-variable">$gutterNumber</span> = <span class="hl-variable">$gutterNumbers</span>[<span class="hl-variable">$i</span>];
-<span class="hl-gutter ">  12</span>
-<span class="hl-gutter ">  13</span>    <span class="hl-variable">$gutterClass</span> = '<span class="hl-value">hl-gutter </span>' . (<span class="hl-variable">$this</span>-&gt;<span class="hl-property">classes</span>[<span class="hl-variable">$i</span> + 1] ?? '<span class="hl-value"></span>');
-<span class="hl-gutter hl-gutter-addition">14 +</span><span class="hl-addition"></span>
-<span class="hl-gutter hl-gutter-addition">15 +</span><span class="hl-addition">    <span class="hl-variable">$lines</span>[<span class="hl-variable">$i</span>] = <span class="hl-property">sprintf</span>(</span>
-<span class="hl-gutter hl-gutter-addition">16 +</span><span class="hl-addition">        <span class="hl-type">Escape</span>::<span class="hl-property">tokens</span>('<span class="hl-value">&lt;span class=&quot;%s&quot;&gt;%s&lt;/span&gt;%s</span>'),</span>
-<span class="hl-gutter ">  17</span>        <span class="hl-variable">$gutterClass</span>,
-<span class="hl-gutter ">  18</span>        <span class="hl-property">str_pad</span>(
-<span class="hl-gutter hl-gutter-deletion">19 -</span>            <span class="hl-property">string</span>: <span class="hl-deletion"><span class="hl-variable">$gutterNumber</span></span>,
-<span class="hl-gutter ">  20</span>            <span class="hl-property">length</span>: <span class="hl-variable">$gutterWidth</span>,
-<span class="hl-gutter ">  21</span>            <span class="hl-property">pad_type</span>: <span class="hl-property">STR_PAD_LEFT</span>,
-<span class="hl-gutter ">  22</span>        ),
-<span class="hl-gutter ">  23</span>        <span class="hl-variable">$line</span>,
-<span class="hl-gutter ">  24</span>    );
-<span class="hl-gutter ">  25</span>}
+<span class="hl-gutter ">  10</span> <span class="hl-keyword">foreach</span> (<span class="hl-variable">$lines</span> <span class="hl-keyword">as</span> <span class="hl-variable">$i</span> =&gt; <span class="hl-variable">$line</span>) {
+<span class="hl-gutter ">  11</span>     <span class="hl-variable">$gutterNumber</span> = <span class="hl-variable">$gutterNumbers</span>[<span class="hl-variable">$i</span>];
+<span class="hl-gutter ">  12</span> 
+<span class="hl-gutter ">  13</span>     <span class="hl-variable">$gutterClass</span> = '<span class="hl-value">hl-gutter </span>' . (<span class="hl-variable">$this</span>-&gt;<span class="hl-property">classes</span>[<span class="hl-variable">$i</span> + 1] ?? '<span class="hl-value"></span>');
+<span class="hl-gutter hl-gutter-addition">14 +</span> <span class="hl-addition"></span>
+<span class="hl-gutter hl-gutter-addition">15 +</span> <span class="hl-addition">    <span class="hl-variable">$lines</span>[<span class="hl-variable">$i</span>] = <span class="hl-property">sprintf</span>(</span>
+<span class="hl-gutter hl-gutter-addition">16 +</span> <span class="hl-addition">        <span class="hl-type">Escape</span>::<span class="hl-property">tokens</span>('<span class="hl-value">&lt;span class=&quot;%s&quot;&gt;%s&lt;/span&gt;%s</span>'),</span>
+<span class="hl-gutter ">  17</span>         <span class="hl-variable">$gutterClass</span>,
+<span class="hl-gutter ">  18</span>         <span class="hl-property">str_pad</span>(
+<span class="hl-gutter hl-gutter-deletion">19 -</span>             <span class="hl-property">string</span>: <span class="hl-deletion"><span class="hl-variable">$gutterNumber</span></span>,
+<span class="hl-gutter ">  20</span>             <span class="hl-property">length</span>: <span class="hl-variable">$gutterWidth</span>,
+<span class="hl-gutter ">  21</span>             <span class="hl-property">pad_type</span>: <span class="hl-property">STR_PAD_LEFT</span>,
+<span class="hl-gutter ">  22</span>         ),
+<span class="hl-gutter ">  23</span>         <span class="hl-variable">$line</span>,
+<span class="hl-gutter ">  24</span>     );
+<span class="hl-gutter ">  25</span> }
 TXT;
         $highlighter = (new Highlighter())->withGutter(10);
 
         $this->assertSame($expected, $highlighter->parse($input, 'php'));
     }
+
+    public function test_gutter_injection_terminal(): void
+    {
+        $input = <<<'TXT'
+foreach ($lines as $i => $line) {
+    $gutterNumber = $gutterNumbers[$i];
+
+    $gutterClass = 'hl-gutter ' . ($this->classes[$i + 1] ?? '');
+{+
+    $lines[$i] = sprintf(
+        Escape::tokens('<span class="%s">%s</span>%s'),+}
+        $gutterClass,
+        str_pad(
+            string: {-$gutterNumber-},
+            length: $gutterWidth,
+            pad_type: STR_PAD_LEFT,
+        ),
+        $line,
+    );
+}
+TXT;
+
+        $expected = <<<'TXT'
+ICAxMCAbWzM0bWZvcmVhY2gbWzBtICgbWzBtJGxpbmVzG1swbSAbWzM0bWFzG1swbSAbWzBtJGkbWzBtID0+IBtbMG0kbGluZRtbMG0pIHsKICAxMSAgICAgG1swbSRndXR0ZXJOdW1iZXIbWzBtID0gG1swbSRndXR0ZXJOdW1iZXJzG1swbVsbWzBtJGkbWzBtXTsKICAxMiAKICAxMyAgICAgG1swbSRndXR0ZXJDbGFzcxtbMG0gPSAnG1szMG1obC1ndXR0ZXIgG1swbScgLiAoG1swbSR0aGlzG1swbS0+G1szMm1jbGFzc2VzG1swbVsbWzBtJGkbWzBtICsgMV0gPz8gJxtbMzBtG1swbScpOwoxNCArIAoxNSArICAgICAbWzBtJGxpbmVzG1swbVsbWzBtJGkbWzBtXSA9IBtbMzJtc3ByaW50ZhtbMG0oCjE2ICsgICAgICAgICAbWzMxbUVzY2FwZRtbMG06OhtbMzJtdG9rZW5zG1swbSgnG1szMG08c3BhbiBjbGFzcz0iJXMiPiVzPC9zcGFuPiVzG1swbScpLAogIDE3ICAgICAgICAgG1swbSRndXR0ZXJDbGFzcxtbMG0sCiAgMTggICAgICAgICAbWzMybXN0cl9wYWQbWzBtKAoxOSAtICAgICAgICAgICAgIBtbMzJtc3RyaW5nG1swbTogG1swbSRndXR0ZXJOdW1iZXIbWzBtLAogIDIwICAgICAgICAgICAgIBtbMzJtbGVuZ3RoG1swbTogG1swbSRndXR0ZXJXaWR0aBtbMG0sCiAgMjEgICAgICAgICAgICAgG1szMm1wYWRfdHlwZRtbMG06IBtbMzJtU1RSX1BBRF9MRUZUG1swbSwKICAyMiAgICAgICAgICksCiAgMjMgICAgICAgICAbWzBtJGxpbmUbWzBtLAogIDI0ICAgICApOwogIDI1IH0=
+TXT;
+
+        $highlighter = (new Highlighter(new LightTerminalTheme()))->withGutter(10);
+
+        $this->assertSame(base64_decode($expected), $highlighter->parse($input, 'php'));
+    }
 }