2.x

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `filament-syntax-entry` will be documented in this file.
 
+## 2.0.0 - March 26, 2024
+
+- Syntax highlighting now handled server-side using [tempestphp/highlight](https://github.com/tempestphp/highlight)
+- Highlight.js theme support dropped
+- Added documentation on how to create custom themes
+- Added support for Laravel 11
+- PHP 8.3 required for server-side highlighting
+
 ## 1.0.1 - Feb 2, 2024
 
 - General codebase housekeeping

README.md

@@ -5,7 +5,7 @@
 [![Total Downloads](https://img.shields.io/packagist/dt/parallax/filament-syntax-entry?style=flat-square)](https://packagist.org/packages/parallax/filament-syntax-entry)
 ![Stars](https://img.shields.io/github/stars/parallax/filament-syntax-entry?style=flat-square)
 
-Add a Filament [infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started) for themeable syntax highlighting using [highlight.js](https://highlightjs.org).
+Add a Filament [infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started) for themeable server-side syntax highlighting using [tempestphp/highlight](https://github.com/tempestphp/highlight).
 
 <img class="filament-hidden" src="https://github.com/parallax/filament-syntax-entry/raw/main/assets/filament-syntax-entry.jpg"/>
 
@@ -23,6 +23,14 @@ Optionally, you can publish the views using
 php artisan vendor:publish --tag="filament-syntax-entry-views"
 ```
 
+## Upgrading from 1.x
+
+There are a couple of important changes to be aware of when upgrading to version 2.x:
+
+- PHP 8.3 is required for server-side syntax highlighting
+- Highlight.js is no longer supported
+- Theme selection has been replaced with the ability to create custom themes
+
 ## Quickstart
 
 ### Add the [Infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started)
@@ -50,116 +58,43 @@ class ProductResource extends Resource
 
 ### Setting the language
 
-Automatic language detection is enabled by default so this isn't required, but if you would like to define the language used you may use the `language()` method:
+The default language value is set to `json`. To override this value you may use the `language()` method:
 
 ```php
 SyntaxEntry::make('metadata')
     ->language('json');
 ```
 
-To keep the bundle size down only the following languages are currently available:
+The following languages are currently available:
 
-- `bash`
+- `blade`
 - `css`
-- `dockerfile`
-- `graphql`
+- `gdscript`
+- `html`
 - `javascript`
 - `json`
-- `markdown`
 - `php`
-- `scss`
-- `shell`
 - `sql`
-- `typescript`
+- `twig`
 - `xml`
 - `yaml`
 
-### Setting the theme
+### Creating a custom theme
 
-You may override the default themes using the `theme()` and/or `darkModeTheme()` methods:
+You may override the default theme by using the `theme()` method:
 
 ```php
 SyntaxEntry::make('metadata')
-    ->theme('filament')
-    ->darkModeTheme('filament-dark');
+    ->theme('smudge');
+```
+
+This will wrap the syntax component with a custom class like so:
+
+```
+syntax-entry-theme-smudge
 ```
 
-The following themes are currently available:
-
-- `a11y-dark`
-- `a11y-light`
-- `agate`
-- `an-old-hope`
-- `androidstudio`
-- `arduino-light`
-- `arta`
-- `ascetic`
-- `atom-one-dark-reasonable`
-- `atom-one-dark`
-- `atom-one-light`
-- `brown-paper`
-- `codepen-embed`
-- `color-brewer`
-- `dark`
-- `default`
-- `devibeans`
-- `docco`
-- `far`
-- `felipec`
-- `filament-dark` (default dark mode theme)
-- `filament` (default theme)
-- `foundation`
-- `github-dark-dimmed`
-- `github-dark`
-- `github`
-- `gml`
-- `googlecode`
-- `gradient-dark`
-- `gradient-light`
-- `grayscale`
-- `hybrid`
-- `idea`
-- `intellij-light`
-- `ir-black`
-- `isbl-editor-dark`
-- `isbl-editor-light`
-- `kimbie-dark`
-- `kimbie-light`
-- `lightfair`
-- `lioshi`
-- `magula`
-- `mono-blue`
-- `monokai-sublime`
-- `monokai`
-- `night-owl`
-- `nnfx-dark`
-- `nnfx-light`
-- `nord`
-- `obsidian`
-- `panda-syntax-dark`
-- `panda-syntax-light`
-- `paraiso-dark`
-- `paraiso-light`
-- `pojoaque`
-- `purebasic`
-- `qtcreator-dark`
-- `qtcreator-light`
-- `rainbow`
-- `routeros`
-- `school-book`
-- `shades-of-purple`
-- `srcery`
-- `stackoverflow-dark`
-- `stackoverflow-light`
-- `sunburst`
-- `tokyo-night-dark`
-- `tokyo-night-light`
-- `tomorrow-night-blue`
-- `tomorrow-night-bright`
-- `vs`
-- `vs2015`
-- `xcode`
-- `xt256`
+The final step is to follow the [tempestphp/highlight](https://github.com/tempestphp/highlight) documentation on how to create your own theme, and use this in combination with [Filament themes](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).
 
 ## Changelog
 

composer.json

@@ -20,14 +20,15 @@
         }
     ],
     "require": {
-        "php": "^8.1",
+        "php": "^8.3",
         "filament/filament": "^3.0",
+        "illuminate/contracts": "^10.0|^11.0",
         "spatie/laravel-package-tools": "^1.15.0",
-        "illuminate/contracts": "^10.0"
+        "tempest/highlight": "dev-main"
     },
     "require-dev": {
         "laravel/pint": "^1.0",
-        "nunomaduro/collision": "^7.9",
+        "nunomaduro/collision": "^7.9|^8.1",
         "orchestra/testbench": "^8.0",
         "pestphp/pest": "^2.0",
         "pestphp/pest-plugin-arch": "^2.0",

package.json

@@ -2,9 +2,7 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev:scripts": "node bin/build.js --dev",
         "dev:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-syntax-entry.css --postcss --watch",
-        "build:scripts": "node bin/build.js",
         "build:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-syntax-entry.css --postcss --minify && yarn purge",
         "purge": "filament-purge -i resources/dist/filament-syntax-entry.css -o resources/dist/filament-syntax-entry.css -v 3.x",
         "dev": "npm-run-all --parallel dev:*",
@@ -24,8 +22,5 @@
         "prettier": "^2.7.1",
         "prettier-plugin-tailwindcss": "^0.1.13",
         "tailwindcss": "^3.3.3"
-    },
-    "dependencies": {
-        "highlight.js": "^11.9.0"
     }
 }

resources/css/index.css

@@ -1,95 +1,44 @@
-@import '../../vendor/filament/filament/resources/css/theme.css';
-@import './themes/a11y-dark.css';
-@import './themes/a11y-light.css';
-@import './themes/agate.css';
-@import './themes/an-old-hope.css';
-@import './themes/androidstudio.css';
-@import './themes/arduino-light.css';
-@import './themes/arta.css';
-@import './themes/ascetic.css';
-@import './themes/atom-one-dark-reasonable.css';
-@import './themes/atom-one-dark.css';
-@import './themes/atom-one-light.css';
-@import './themes/brown-paper.css';
-@import './themes/codepen-embed.css';
-@import './themes/color-brewer.css';
-@import './themes/dark.css';
-@import './themes/default.css';
-@import './themes/devibeans.css';
-@import './themes/docco.css';
-@import './themes/far.css';
-@import './themes/felipec.css';
-@import './themes/filament-dark.css';
-@import './themes/filament.css';
-@import './themes/foundation.css';
-@import './themes/github-dark-dimmed.css';
-@import './themes/github-dark.css';
-@import './themes/github.css';
-@import './themes/gml.css';
-@import './themes/googlecode.css';
-@import './themes/gradient-dark.css';
-@import './themes/gradient-light.css';
-@import './themes/grayscale.css';
-@import './themes/hybrid.css';
-@import './themes/idea.css';
-@import './themes/intellij-light.css';
-@import './themes/ir-black.css';
-@import './themes/isbl-editor-dark.css';
-@import './themes/isbl-editor-light.css';
-@import './themes/kimbie-dark.css';
-@import './themes/kimbie-light.css';
-@import './themes/lightfair.css';
-@import './themes/lioshi.css';
-@import './themes/magula.css';
-@import './themes/mono-blue.css';
-@import './themes/monokai-sublime.css';
-@import './themes/monokai.css';
-@import './themes/night-owl.css';
-@import './themes/nnfx-dark.css';
-@import './themes/nnfx-light.css';
-@import './themes/nord.css';
-@import './themes/obsidian.css';
-@import './themes/panda-syntax-dark.css';
-@import './themes/panda-syntax-light.css';
-@import './themes/paraiso-dark.css';
-@import './themes/paraiso-light.css';
-@import './themes/pojoaque.css';
-@import './themes/purebasic.css';
-@import './themes/qtcreator-dark.css';
-@import './themes/qtcreator-light.css';
-@import './themes/rainbow.css';
-@import './themes/routeros.css';
-@import './themes/school-book.css';
-@import './themes/shades-of-purple.css';
-@import './themes/srcery.css';
-@import './themes/stackoverflow-dark.css';
-@import './themes/stackoverflow-light.css';
-@import './themes/sunburst.css';
-@import './themes/tokyo-night-dark.css';
-@import './themes/tokyo-night-light.css';
-@import './themes/tomorrow-night-blue.css';
-@import './themes/tomorrow-night-bright.css';
-@import './themes/vs.css';
-@import './themes/vs2015.css';
-@import './themes/xcode.css';
-@import './themes/xt256.css';
-
-.filament-syntax-entry-component .grid {
-    @apply block;
+.syntax-entry-component .grid {
+    @apply grid-cols-1;
 }
 
-.filament-syntax-entry {
-    @apply font-mono rounded-xl overflow-hidden shadow-sm ring-1;
+.syntax-entry-theme-filament {
+    @apply p-6 bg-gray-50 dark:bg-gray-950 font-mono text-sm text-gray-950 dark:text-white leading-6 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10;
 
-    .hljs {
-        @apply block p-6 overflow-x-scroll;
+    .hl-keyword {
+        @apply text-blue-600;
+    }
+
+    .hl-property,
+    .hl-value,
+    .hl-variable {
+        @apply text-gray-950 dark:text-white;
+    }
+
+    .hl-type {
+        @apply text-red-600;
+    }
+
+    .hl-generic {
+        @apply text-purple-600;
+    }
+
+    .hl-comment span,
+    .hl-comment {
+        @apply text-gray-600;
+    }
+
+    .hl-blur {
+        @apply blur-sm;
+    }
+
+    .hl-strong {
+        @apply font-bold;
+    }
+
+    .hl-attribute,
+    .hl-em {
+        @apply italic;
     }
 }
 
-:is(.dark .filament-syntax-entry) {
-    @apply ring-white/10;
-}
-
-:not(.dark .filament-syntax-entry) {
-    @apply ring-gray-950/5;
-}