❄️ The winter sale is here. 25% off for a limited time. Join us →

How do I use highlightjs in inertia


Started this discussion 1 month ago

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.

whoami (Daryl)

Replied 1 month ago

Do you use Vue?

See highlightjs/vue-plugin for a simple Vue plugin that works great with Highlight.js.

An example of vue-plugin in action:

<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />

<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
Best answer


Replied 1 month ago

I'd personally recommend using a package like Laravel Markdown from Spatie, and then outputting the rendered markdown in a Laravel API resource (using this method) that you can output on your views.

Here's are some examples directly from the Codecourse codebase.

A line from the PostTransformer:

'body_markdown' => app(MarkdownRenderer::class)->toHtml($post->body),

Output of the markdown within Vue:

<div class="markdown" v-html="post.body_markdown"></div>

Let me know if you need any more guidance getting this implemented!


Replied 1 month ago

Not showing notifications when someone comments on the post. So I haven't seen it for a long time. Can I still use the Laravel Markdown package if I use the TipTap editor?