Adds initial setup of server-side syntax highlighting

composer.json

@@ -22,8 +22,9 @@
  "require": {
  "php": "^8.1",
  "filament/filament": "^3.0",
+ "illuminate/contracts": "^10.0",
  "spatie/laravel-package-tools": "^1.15.0",
- "illuminate/contracts": "^10.0"
+ "tempest/highlight": "dev-main"
  },
  "require-dev": {
  "laravel/pint": "^1.0",

resources/css/index.css

@@ -1,4 +1,5 @@
 @import '../../vendor/filament/filament/resources/css/theme.css';
+@import "../../vendor/tempest/highlight/src/Themes/highlight-light-lite.css";
 
 .filament-syntax-entry-component .grid {
  @apply block;

resources/views/syntax-entry.blade.php

@@ -6,9 +6,6 @@ class="filament-syntax-entry"
  package: 'parallax/filament-syntax-entry'
  ))]"
  >
- <div>
- {{-- <pre><code>{{ $$getState() }}</code></pre> --}}
- {{ $getState() }}
- </div>
+ <pre>{{ $getValue() }}</pre>
  </div>
 </x-dynamic-component>

src/SyntaxEntry.php

@@ -3,13 +3,17 @@
 namespace Parallax\FilamentSyntaxEntry;
 
 use Closure;
-use Filament\Infolists\Components\Concerns\HasAffixes;
+use Filament\Infolists\Components\Concerns;
 use Filament\Infolists\Components\Contracts\HasAffixActions;
 use Filament\Infolists\Components\Entry;
+use Illuminate\Support\HtmlString;
+use Illuminate\Support\Str;
+use Tempest\Highlight\Highlighter;
 
 class SyntaxEntry extends Entry implements HasAffixActions
 {
- use HasAffixes;
+ use Concerns\CanFormatState;
+ use Concerns\HasAffixes;
 
  protected string $view = 'filament-syntax-entry::syntax-entry';
 
@@ -19,6 +23,16 @@ class SyntaxEntry extends Entry implements HasAffixActions
 
  protected string | Closure | null $darkModeTheme = 'filament-dark';
 
+ public function getValue(): HtmlString
+ {
+ $state = $this->getState();
+ $language = $this->language;
+ $toParse = !is_string($state) || $language === 'json' ? json_encode($state, JSON_PRETTY_PRINT) : $state;
+ $parsed = (new Highlighter())->parse($toParse, 'json');
+
+ return Str::of($parsed)->toHtmlString();
+ }
+
  public function language(string | Closure $language): static
  {
  $this->language = $language;

tailwind.config.js

@@ -9,6 +9,6 @@ module.exports = {
  ],
  safelist: [
  /syntax-entry-.+/,
- /hljs-.+/
+ /hl-.+/
  ]
 }