Level 73
The same way you would use it anywhere else, but this guide might be what you need.
https://mattstrauss.dev/blog/code-syntax-highlighting-with-inertiajs-tailwind-css-and-laravel-wink
Oct 6, 2023
5
Level 6
How do I use highlightjs in inertia
How do I use highlightjs in inertia? I searched online and didn't find any good answers, if you have any solution please let me know.
Level 6
@Tray2 I tried it but it shows error
new:21 Uncaught TypeError: hljs.highlightElement is not a function
at new:21:26
at NodeList.forEach (<anonymous>)
at HTMLDocument.<anonymous> (new:20:50)
my code: (app.blade.php)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
document.addEventListener('inertia:finish', (event) => {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
});
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
<!-- Scripts -->
@routes
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
Level 73
@polashmahmud sounds to me that you aren't loading the highlight js properly
Level 70
@polashmahmud Make sure that highlight js is loaded with your page as @tray2 suggested. It should resolve your issue.
However, I can see that you have an almost identical event listener. You may tweak and optimize them this way (untested):
<script>
function highlightCodeBlocks() {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
}
document.addEventListener('DOMContentLoaded', highlightCodeBlocks);
document.addEventListener('inertia:finish', highlightCodeBlocks);
</script>
Level 6
@tisuchi I have tried many times but it doesn't work properly. I finally tried creating a new inertia app. In this when I write the code in the app.blade.php file, the code is highlighted but when I add the code to a vue file it is not highlighted anymore.
code example: app.blade.php (it's working)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- Scripts -->
@routes
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
<div>
<pre>
<code class="language-php">
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
</code>
</pre>
</div>
</body>
</html>
But it doesn't work when I add it to the vue file. example: Welcome.vue
<template>
<Head title="Welcome" />
<div>
<pre><code class="language-php">function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
</div>
</template>
I also tried with all these codes on app.blade.php
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>
document.addEventListener('inertia:finish', (event) => {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
});
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
<script>
function highlightCodeBlocks() {
document.querySelectorAll('pre').forEach((el) => {
hljs.highlightElement(el);
});
}
document.addEventListener('DOMContentLoaded', highlightCodeBlocks);
document.addEventListener('inertia:finish', highlightCodeBlocks);
</script>
Please or to participate in this conversation.