How do I render custom html in the marks serializer for block content?

[toddpadwick]

I have a sanity block field which contains a 'pullquote' mark. What i need to do is clone the contents of this text and append it to the containing paragraph text, while leaving the original text as is. This way I can style up the pulled quote tag but leave the original text rendering as normal. Here is the desired result:

I tried something like this, but the HTML renders as a string, not HTML:

marks: {
      pullquote:(props,children) =>{return `<span class="pullquote">${children.slots.default()[0].children}</span><span class="pulledquote">${children.slots.default()[0].children}</span>`}
    }

[danielroe]

Vue render syntax works like this:

import { h } from 'vue'

export default {
  render: () => h('div', { innerHTML: '<span>hi</span>' })
}

See https://vuejs.org/api/render-function.html#render-function-apis.

[toddpadwick]

Thanks @danielroe I think thats what I need, however, I'm still struggling to interpret that in the context of the Nuxt Sanity serializer. I've tried this with no luck:

marks: {
      pullquote:( props, children ) => {
        return h('span', {class:'pullquote', innerHTML:children.slots.default()[0].children)
      }
    }

[hajiskyy]

2 years later, incase anyone else is seeking a solution for this here's a simple solution i figured

const serializers = {
	marks: {
		textColor: (props: any, children: any) =>
			h("span", { style: { color: props.value } }, children.slots),
	},
};