Last active
May 13, 2026 16:46
-
-
Save atomjoy/7cfb229c84c2ac9426a47a55f5928595 to your computer and use it in GitHub Desktop.
Vue3 Highlighters and splide slider from CDN in Laravel Inertia Starter Kit (v-html code).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- Code highlight.js --}} | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/php.min.js"></script> | |
| <script> | |
| /* Required */ | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| setTimeout(() => { | |
| hljs.highlightAll(); | |
| // const all = document.querySelectorAll("pre code") | |
| // all.forEach((f) => { | |
| // hljs.highlightElement(f); | |
| // }); | |
| }, 1000); | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark'=> ($appearance ?? 'system') == 'dark', 'scrollbar-thin'])> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| {{-- Inline script to detect system dark mode preference and apply it immediately --}} | |
| <script> | |
| (function() { | |
| const appearance = '{{ $appearance ?? "system" }}'; | |
| if (appearance === 'system') { | |
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| if (prefersDark) { | |
| document.documentElement.classList.add('dark'); | |
| } | |
| } | |
| })(); | |
| </script> | |
| {{-- Inline style to set the HTML background color based on our theme in app.css --}} | |
| <style> | |
| html { | |
| background-color: oklch(1 0 0); | |
| } | |
| html.dark { | |
| background-color: oklch(0.145 0 0); | |
| } | |
| </style> | |
| <link rel="icon" href="/favicon.ico" sizes="any"> | |
| <link rel="icon" href="/favicon.svg" type="image/svg+xml"> | |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
| @vite(['resources/css/app.css', 'resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"]) | |
| <x-inertia::head> | |
| <title>{{ config('app.name', 'Laravel') }}</title> | |
| </x-inertia::head> | |
| </head> | |
| <body class="font-sans antialiased"> | |
| <x-inertia::app /> | |
| @include('head.shiki') | |
| @include('head.highlight') | |
| @include('head.splide') | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- Code shiki highlighter --}} | |
| <script type="module" defer> | |
| import { codeToHtml } from "https://esm.sh/shiki@3.23.0" | |
| /* Required */ | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| setTimeout(() => { | |
| const all = document.querySelectorAll("pre code") | |
| all.forEach(async (f) => { | |
| const theme = ["vitesse-light", "github-light"] | |
| let code = f.innerText | |
| f.innerHTML = await codeToHtml(code, { lang: "php", theme: theme[0] }) | |
| }) | |
| }, 500); | |
| }); | |
| </script> | |
| <style> | |
| /* Shiki highlighter */ | |
| .shiki { | |
| margin: 0px !important; | |
| border: 0px !important; | |
| background: var(--pre-bg) !important; | |
| } | |
| .line { | |
| padding: 3px; | |
| counter-increment: line; | |
| float: left; | |
| width: 100%; | |
| border-bottom: 1px solid var(--pre-border); | |
| } | |
| .line:before { | |
| float: left; | |
| content: counter(line); | |
| margin-right: 10px; | |
| width: 35px; | |
| color: var(--pre-border); | |
| } | |
| .line:before { | |
| --webkit-user-select: none; | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="splide"> | |
| <div class="splide__track"> | |
| <ul class="splide__list"> | |
| <li class="splide__slide"> | |
| <img | |
| src="https://img.icons8.com/bubbles/200/google-logo.jpg" | |
| data-image="1" | |
| class="splide__image splide__image__1" | |
| alt="Image" | |
| /> | |
| </li> | |
| <li class="splide__slide"> | |
| <img | |
| src="https://img.icons8.com/bubbles/200/google-logo.jpg" | |
| data-image="2" | |
| class="splide__image splide__image__2" | |
| alt="Image" | |
| /> | |
| </li> | |
| <li class="splide__slide"> | |
| <img | |
| src="https://img.icons8.com/bubbles/200/google-logo.jpg" | |
| data-image="3" | |
| class="splide__image splide__image__3" | |
| alt="Image" | |
| /> | |
| </li> | |
| <li class="splide__slide"> | |
| <img | |
| src="https://img.icons8.com/bubbles/200/google-logo.jpg" | |
| data-image="4" | |
| class="splide__image splide__image__4" | |
| alt="Image" | |
| /> | |
| </li> | |
| <li class="splide__slide"> | |
| <img | |
| src="https://img.icons8.com/bubbles/200/google-logo.jpg" | |
| data-image="5" | |
| class="splide__image splide__image__5" | |
| alt="Image" | |
| /> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- Splide slider --}} | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" | |
| rel="stylesheet" | |
| /> | |
| <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> | |
| <script> | |
| /* Required */ | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| setTimeout(() => { | |
| new Splide('.splide').mount(); | |
| }, 1000); | |
| }); | |
| </script> | |
| <style> | |
| /* Gallery Splide Slider */ | |
| .splide { | |
| background: #fafafa; | |
| width: 100%; | |
| /* height: 400px; */ | |
| aspect-ratio: 16/9; | |
| } | |
| .splide__image { | |
| object-fit: cover; | |
| width: 100%; | |
| /* height: 400px; */ | |
| aspect-ratio: 16/9; | |
| } | |
| .splide__pagination li { | |
| width: auto !important; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment