docs(readme): draft changes for clarifying options

[julie-ng]

Suggestions for improving the documentation on how to configure nuxt-shiki based on feedback from #25

@gxres042 - while making suggestions, I realized I don't understand how highlightOptions works. Based on types.ts, it looks like it's just a unwrap boolean? Is that it? If you can provide a reference to a doc, I can suggest something.

Feel free to edit as you see fit.

[gxres042]

@gxres042 - while making suggestions, I realized I don't understand how highlightOptions works. Based on types.ts, it looks like it's just a unwrap boolean? Is that it? If you can provide a reference to a doc, I can suggest something.

type CodeToHastOptions<Languages extends string = string, Themes extends string = string> = CodeToHastOptionsCommon<Languages> & CodeOptionsThemes<Themes> & CodeOptionsMeta;

Hmmm you may set highlight themes via highlightOptions.theme in <Shiki /> component.

[gxres042]

I make a mistake...... You can override highlight theme by setting highlightOptions.themes on <Shiki /> component.

[julie-ng]

Really? Maybe I am doing it wrong… but I have tried theme and :highlightOptions (as well as :highlight-options), and none of those work for me.

Although I am in my browser's default light mode, with the code above I would expect to see a dark themed code block. But, I still get the light theme.

<Shiki v-if="data" lang="json" :code="JSON.stringify(data, null, 2)" theme="material-theme-palenight" />

<Shiki v-if="data" lang="json" :code="JSON.stringify(data, null, 2)" :highlightOptions="{ theme: 'material-theme-palenight' }" />

What would be the correct syntax if we want to have a custom theme on a per component basis?

[gxres042]

<script setup lang="ts">
const code = ref<string>(/* js */ `
// Try editing in the left panel!
console.log('Hello, World!')
`)
const highlightOptions = ref({
  themes: {
    light: 'one-light',
    dark: 'one-dark-pro',
  },
})
</script>

<template>
  <Shiki id="shiki" lang="js" :highlight-options="highlightOptions" :code="code" />
</template>

or

<script setup lang="ts">
const code = ref<string>(/* js */ `
// Try editing in the left panel!
console.log('Hello, World!')
`)
const highlightOptions = ref({
  theme: 'one-dark-pro',
})
</script>

<template>
  <Shiki id="shiki" lang="js" :highlight-options="highlightOptions" :code="code" />
</template>