I'm working on a blog and I'm now wanting to share...

# kobweb

[Ryan Scott]

I'm working on a blog and I'm now wanting to share some kotlin code. Does anyone know of a good source for code styles for Kotlin and toml?

[Ayfri]

Checkout how I've done it with Kore's website https://kore.ayfri.com/
I'm using Prism with a custom theme

[Ryan Scott]

@David Herman actually used your site as an example for me. Nice! Where did you get these styles from?

[David Herman]

I used highlight.js, although I have been planning to evaluate prism.js at some point, since I believe it has support for highlighting exact line numbers

[Ryan Scott]

You'll have to forgive me if I'm asking the wrong questions. I'm rather new.

[Ayfri]

It's from CSS, you have a documentation on each token available for each language

[David Herman]

https://github.com/bitspittle/bitspittle.dev/blob/ca86bd38c0123a197c5bbb27fee4304ec3710001/site/build.gradle.kts#L48

https://github.com/bitspittle/bitspittle.dev/blob/ca86bd38c0123a197c5bbb27fee4304e[…]ain/kotlin/dev/bitspittle/site/components/layouts/BlogLayout.kt

https://github.com/bitspittle/bitspittle.dev/blob/ca86bd38c0123a197c5bbb27fee4304e[…]ain/kotlin/dev/bitspittle/site/components/layouts/BlogLayout.kt

https://github.com/bitspittle/bitspittle.dev/blob/ca86bd38c0123a197c5bbb27fee4304ec3710001/site/build.gradle.kts#L62

https://github.com/bitspittle/bitspittle.dev/tree/main/site/src/jsMain/resources/public/highlight.js

https://github.com/bitspittle/bitspittle.dev/blob/ca86bd38c0123a197c5bbb27fee4304e[…]kotlin/dev/bitspittle/site/components/widgets/code/CodeBlock.kt

I think those are all the relevant places I used to get code highlighting working

[Ayfri]

And I used the colors from my current IDE theme

[Ryan Scott]

Thanks!

[Ayfri]

From what I've seen Prism is far better than Highlight.js for Kotlin, you still don't have semantic highlighting which would be very sick, but it's more customisable

[David Herman]

Note that I didn't create those styles myself. The JS library automatically does all that stuff for you (probably when I called the "highlightAll" method).

[Ryan Scott]

I think that gives me enough to push forward. I just noticed my Kotlin code snippits looking rather . . . bland.

[Ayfri]

https://github.com/Ayfri/Kore/blob/master/website%2Fsrc%2FjsMain%2Fkotlin%2Fio%2Fgithub%2Fayfri%2Fkore%2Fwebsite%2FCodeThemeStyle.kt here's the theme

[David Herman]

The biggest trick to realize in a Kobweb site is that when you jump around between pages, the page does not completely reload, like a normal HTML page does. That's why official highlight.js examples are usually as simple as just putting a script in your html head block, but for Kobweb, we need to re-run highlight requests in a LaunchedEffect for every new page we visit.

[Ryan Scott]

I see. Okay. Thanks @David Herman and @Ayfri

[David Herman]

You're welcome. Good luck and let us know if you run into any issues!

[Ryan Scott]

Had to take a break, but I THINK I just got prism working.

[Ryan Scott]

I had some issues with light/dark color modes and with manually highlighting, but I figured it out.

[Ryan Scott]

Specifically, I needed to use the color mode as the LaunchedEffect key for when to highlight rather than the route.

[Ryan Scott]

You can see an example here:
https://www.fsryan.com/blogs/ryan/en/making_a_compose_multiplatform_ui_library#add-a-sample-composable