',\n apiVersion: '2021-03-25',\n useCdn: true\n})\n\n// `h` is a way to build HTML known as hyperscript\n// See https://github.com/hyperhype/hyperscript for more info\nconst h = blocksToHtml.h\n\nconst serializers = {\n types: {\n code: props => (\n h('pre', {className: props.node.language},\n h('code', props.node.code)\n )\n )\n }\n}\n\nclient.fetch('*[_type == \"article\"][0]').then(article => {\n const el = blocksToHtml({\n blocks: article.body,\n serializers: serializers\n })\n\n document.getElementById('root').appendChild(el)\n})\n```\n\n## Options\n\n- `className` - When more than one block is given, a container node has to be created. Passing a `className` will pass it on to the container. Note that if only a single block is given as input, the container node will be skipped.\n- `serializers` - Specifies the functions to use for rendering content. Merged with default serializers.\n- `serializers.types` - Serializers for block types, see example above\n- `serializers.marks` - Serializers for marks - data that annotates a text child of a block. See example usage below.\n- `serializers.list` - Function to use when rendering a list node\n- `serializers.listItem` - Function to use when rendering a list item node\n- `serializers.hardBreak` - Function to use when transforming newline characters to a hard break (`
` by default, pass `false` to render newline character)\n- `serializers.unknownType` - Override the default serializer for blocks of unknown type, if `ignoreUnknownTypes` is set to `false` (the default).\n- `serializers.unknownMark` - Override the default serializer for marks of unknown type. Defaults to a span without any styling.\n- `imageOptions` - When encountering image blocks, this defines which query parameters to apply in order to control size/crop mode etc.\n- `ignoreUnknownTypes` - By default (or when setting this property explicitly to `true`) it will output a hidden `` with a warning. By setting this property to `false`, the renderer will throw an error when encountering unknown block types. The behavior of the unknown type rendering can be customized by specifying a serializer with `serializers.unknownType`.\n\nIn addition, in order to render images without materializing the asset documents, you should also specify:\n\n- `projectId` - The ID of your Sanity project.\n- `dataset` - Name of the Sanity dataset containing the document that is being rendered.\n\n## Examples\n\n### Rendering custom marks\n\n```js\nconst input = [{\n _type: 'block',\n children: [{\n _key: 'a1ph4',\n _type: 'span',\n marks: ['s0m3k3y'],\n text: 'Sanity'\n }],\n markDefs: [{\n _key: 's0m3k3y',\n _type: 'highlight',\n color: '#E4FC5B'\n }]\n}]\n\nconst highlight = props => (\n h('span', {style: {backgroundColor: props.mark.color}}, props.children)\n)\n\nconst content = blocksToHtml({\n blocks: input,\n serializers: {marks: {highlight}}\n})\n```\n\n### Specifying image options\n\n```js\nblocksToHtml({\n blocks: input,\n imageOptions: {w: 320, h: 240, fit: 'max'},\n projectId: 'myprojectid',\n dataset: 'mydataset',\n})\n```\n\n### Customizing default serializer for `block`-type\n\n```js\nconst BlockRenderer = props => {\n const style = props.node.style || 'normal'\n\n if (/^h\\d/.test(style)) {\n const level = style.replace(/[^\\d]/g, '')\n return h('h2', {className: `my-heading level-${level}`}, props.children)\n }\n\n return style === 'blockquote'\n ? h('blockquote', {className: 'my-block-quote'}, props.children)\n : h('p', {className: 'my-paragraph'}, props.children)\n}\n\nblocksToHtml({\n blocks: input,\n serializers: {types: {block: BlockRenderer}}\n})\n```\n\n## License\n\nMIT-licensed. See LICENSE.\n","readmeFilename":"README.md"}