https://markdoc.dev/_next/static/chunks/pages/docs/validation-3d6cb51a1aff889d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[108],{5704:function(n,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/validation",function(){return e(9272)}])},9272:function(n,t,e){"use strict";e.r(t),e.d(t,{__N_SSG:function(){return p},default:function(){return h},markdoc:function(){return v}});var o=e(7294),a=e(1272),r=e(4211),i=e(4266),s=e(9266),c=e(8057),d=e(3695);let l={tags:(0,i.w)(s),nodes:(0,i.w)(c),functions:(0,i.w)(d),...(0,i.w)({})},u=new r.ZP.Tokenizer({allowComments:!0}).tokenize("---\ntitle: Validation\ndescription: Extend Markdoc to provide custom validation for your documents.\n---\n\n# {% $markdoc.frontmatter.title %}\n\n## Syntax validation\n\nMarkdoc supports syntax validation out of the box using the `validate` function.\n\n```ts\nvalidate(AstNode, ?Config) => ValidateError[]\n```\n\n\\\nCalling `validate` is an optional step that you can use to validate your abstract syntax tree (AST) before rendering. This is useful during testing, continuous integration, or in dev-tools like editor extensions.\n\n{% example %}\n\n```js\nconst doc = `# Heading`;\n\nconst ast = Markdoc.parse(doc);\n\nconst errors = Markdoc.validate(ast, config);\n\n// Do something with the errors\n```\n\n{% /example %}\n\nIf your document contains a syntax error, the output of `validate` looks like this:\n\n{% sideBySide %}\n\n```js\nconst doc = `{% $invalid_code %}`;\n\nconst ast = Markdoc.parse(doc);\n\nconst errors = Markdoc.validate(ast, config);\n```\n\n```js\n// errors\n[\n  {\n    type: 'tag',\n    lines: [1, 2],\n    location: {\n      start: { line: 1 },\n      end: { line: 2 }\n    },\n    error: {\n      id: 'missing-closing',\n      level: 'critical',\n      message: \"Node 'callout' is missing closing\"\n    }\n  }\n];\n```\n\n{% /sideBySide %}\n\n## Schema validation\n\nYou can also extend Markdoc with custom validation rules, by adding a `validate` function to [Node](/docs/nodes) or [Tag](/docs/tags) definitions, or to your [custom attribute types](/docs/attributes#create-a-custom-attribute).\n\n### Validating content\n\nUse `Node` or `Tag` `validate` functions to verify the contents are correct, particularly the `children`.\n\n{% example %}\n\n```js\n/** @type {import('@markdoc/markdoc').Config} */\nconst config = {\n  tags: {\n    provider: {\n      render: 'Provider',\n      // ...\n      validate(node) {\n        if (node.children.length !== 1) {\n          return [\n            {\n              id: 'provider-children',\n              level: 'critical',\n              message: 'Providers must only have one child.'\n            }\n          ];\n        }\n        return [];\n      }\n    }\n  }\n};\n```\n\n{% /example %}\n\n### Validating attributes\n\nUse [custom `Attribute` types](/docs/attributes#create-a-custom-attribute) to validate that the attributes passed to your tags and nodes are correct.\n\n{% example %}\n\n```js\nexport class ImageSrc {\n  validate(value, config) {\n    if (!value.startsWith('https://')) {\n      return [\n        {\n          id: 'image-src',\n          level: 'error',\n          message: 'All image srcs should contain fully qualified URLs.'\n        }\n      ];\n    }\n    return [];\n  }\n}\n\n/** @type {import('@markdoc/markdoc').Config} */\nconst config = {\n  image: {\n    render: 'img',\n    attributes: {\n      src: {\n        type: ImageSrc,\n        required: true\n        // ...\n      }\n      // ...\n    }\n  }\n};\n```\n\n{% /example %}\n\n## Next steps\n\n- [Render content as HTML or React](/docs/render)\n- [Check out common examples](/docs/examples)\n"),m=r.ZP.parse(u,{slots:!1}),g=m.attributes.frontmatter?a.ZP.load(m.attributes.frontmatter):{},{components:f}=(0,i.J)(l);var p=!0;let v={frontmatter:g};function h(n){let t=n.markdoc;return r.RZ.react(t.content,o,{components:{...f,...n.components}})}}},function(n){n.O(0,[126,649,60,963,888,774,179],function(){return n(n.s=5704)}),_N_E=n.O()}]);