Use shiki for syntax highlighting

docs/.vuepress/config.js

@@ -3,6 +3,7 @@ import * as path from 'path';
 import { defineUserConfig } from 'vuepress';
 import { docsearchPlugin } from '@vuepress/plugin-docsearch';
 import { viteBundler } from '@vuepress/bundler-vite';
+import { shikiPlugin } from '@vuepress/plugin-shiki';
 import * as dotenv from 'dotenv';
 import svgLoader from 'vite-svg-loader';
 import sidebar from './sidebar';
@@ -76,6 +77,9 @@ export default defineUserConfig({
                 facetFilters: [`tags:${DOCS_ALGOLIA_TAG}`],
             },
         }),
+        shikiPlugin({
+            theme: 'material-theme-palenight',
+        }),
         fathomPlugin({
             siteId: 'EELMENOG',
             domains: 'sharp.code16.fr',

docs/.vuepress/theme/styles/_root.scss

@@ -1,7 +1,7 @@
 
 :root {
   --c-text: #233140;
-  --code-bg-color: #282c34;
+  --code-bg-color: #292D3E; // material-palenight
 }
 
 :root, html.dark {

docs/guide/authentication.md

@@ -257,4 +257,4 @@ You can entirely override the authentication workflow (view and controller) prov
 'auth' => [
     'login_page_url' => '/my_login',
 ]
-```
+```

docs/guide/form-editor-embeds.md

@@ -176,7 +176,7 @@ protected function buildShowFields(FieldsContainer $showFields): void
 
 The embed should be treated like any regular Laravel blade component. Here's an example:
 
-```php
+```blade
 @props([
     'post',
 ])

docs/guide/form-fields/editor.md

@@ -97,7 +97,7 @@ Allow the user to crop or rotate a visual, after the upload.
 With `$transformKeepOriginal` set to true, the original file will remain unchanged, meaning the transformations will be
 stored directly in the `<x-sharp-image/>` tag. For instance:
 
-```html
+```blade
 <x-sharp-image 
     name="filename.jpg"
     filter-crop="0.1495,0,0.5625,1"
@@ -144,7 +144,7 @@ configuration.
 
 When inserting a file, the following tag is added in field text value:
 
-```html
+```blade
 <x-sharp-file 
     name="filename.pdf"
     path="data/Spaceship/10/markdown/filename.pdf"
@@ -153,7 +153,7 @@ When inserting a file, the following tag is added in field text value:
 ```
 In case of an image the inserted tag is:
 
-```html
+```blade
 <x-sharp-image
     name="filename.jpg"
     path="data/Spaceship/10/markdown/filename.jpg"
@@ -166,15 +166,15 @@ In case of an image the inserted tag is:
 You may need to display those embedded files in the public website. The idea here is to display embedded images as
 thumbnails, and other files as you need. Sharp provides a component for that:
 
-```html
+```blade
 <x-sharp-content>
     {!! $html !!}
 </x-sharp-content>
 ```
 
 To handle image thumbnails, you can pass the following props:
 
-```html
+```blade
 <x-sharp-content
     :image-thumbnail-width="600"
     :image-thumbnail-height="400"
@@ -196,7 +196,7 @@ To handle image thumbnails, you can pass the following props:
 #### Advanced usages
 
 To add custom attributes to `<x-sharp-image>` component you can use the following syntax:
-```html
+```blade
 <x-sharp-content>
     <x-sharp-content::attributes
         component="sharp-image"

docs/guide/style-visual-theme.md

@@ -40,7 +40,7 @@ You can display a custom content under the form on login page:
 
 You'll need to create a new template file:
 
-```html
+```blade
 <!-- resources/views/sharp/_login-page-message.blade.php -->
 
 <div class="alert alert-info">

docs/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "devDependencies": {
     "@vuepress/plugin-docsearch": "^2.0.0-beta.66",
+    "@vuepress/plugin-shiki": "^2.0.0-beta.66",
     "dotenv": "^10.0.0",
     "sass": "^1.20.1",
     "sass-loader": "^13.0.2",