diff --git a/docs/laravel.mdx b/docs/laravel.mdx
index 606c52d..721e27f 100644
--- a/docs/laravel.mdx
+++ b/docs/laravel.mdx
@@ -143,3 +143,45 @@ Str::markdown($markdown, extensions: [
new PhikiExtension(Theme::GithubLight, resolve(Phiki::class)),
]);
```
+
+## Blade component
+
+If you want to highlight code inside of a Blade view, Phiki provides a Blade component that you can use.
+
+```blade
+
+echo "Hello, world!";
+
+```
+
+This will highlight the code block using the `Grammar::Php` grammar and the `Theme::GithubLight` theme.
+
+### Enabling the gutter
+
+To enable the gutter, add the `gutter` attribute to the component.
+
+```blade
+
+echo "Hello, world!";
+
+```
+
+### Changing the starting line number
+
+To change the starting line number, add the `starting-line` attribute to the component.
+
+```blade
+
+echo "Hello, world!";
+
+```
+
+### Passing code as an attribute
+
+Since Laravel trims whitespace from the slot of a Blade component, you can also pass the code to the component using the `code` attribute.
+
+```blade
+
+```
+
+This is especially useful if you want to highlight code that is stored in a variable or preserve trailing and leading whitespace.
diff --git a/src/Adapters/Laravel/Components/Code.php b/src/Adapters/Laravel/Components/Code.php
index c92cc21..6a6b763 100644
--- a/src/Adapters/Laravel/Components/Code.php
+++ b/src/Adapters/Laravel/Components/Code.php
@@ -14,6 +14,7 @@ class Code extends Component
public function __construct(
public string|Grammar $grammar,
public string|array|Theme $theme,
+ public ?string $code = null,
public bool $gutter = false,
public int $startingLine = 1,
) {}
@@ -24,7 +25,7 @@ public function __construct(
public function render(): string
{
return <<<'BLADE'
- {!! \Phiki\Adapters\Laravel\Facades\Phiki::codeToHtml($slot->__toString(), $grammar, $theme)->withGutter($gutter)->startingLine($startingLine) !!}
+ {!! \Phiki\Adapters\Laravel\Facades\Phiki::codeToHtml($code ?? $slot->__toString(), $grammar, $theme)->withGutter($gutter)->startingLine($startingLine) !!}
BLADE;
}
}
diff --git a/tests/.pest/snapshots/Adapters/Laravel/Components/CodeTest/it_can_accept_code_through_an_attribute.snap b/tests/.pest/snapshots/Adapters/Laravel/Components/CodeTest/it_can_accept_code_through_an_attribute.snap
new file mode 100644
index 0000000..c381cb4
--- /dev/null
+++ b/tests/.pest/snapshots/Adapters/Laravel/Components/CodeTest/it_can_accept_code_through_an_attribute.snap
@@ -0,0 +1,2 @@
+
<?php echo 'Hello, world!';
+
\ No newline at end of file
diff --git a/tests/Adapters/Laravel/Components/CodeTest.php b/tests/Adapters/Laravel/Components/CodeTest.php
index 79b0d3b..bf3bad7 100644
--- a/tests/Adapters/Laravel/Components/CodeTest.php
+++ b/tests/Adapters/Laravel/Components/CodeTest.php
@@ -31,3 +31,13 @@
expect($output)->toContain('10');
});
+
+it('can accept code through an attribute', function () {
+ $output = Blade::render(<<<'BLADE'
+
+ BLADE, [
+ 'code' => "toMatchSnapshot();
+});