{"data":{"mdx":{"code":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2019-01-20\",\n  \"title\": \"Using remark-images\",\n  \"categories\": [\"Remark\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"You can also use nearly all remark plugins, such as remark-images.\"), mdx(\"p\", null, \"Here is an inline image\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"830px\"\n    }\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0px\",\n      \"left\": \"0px\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n    \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/37d786c1e9822c73413a845370e84fe3/fce69/315.webp 208w\", \"/static/37d786c1e9822c73413a845370e84fe3/20c5d/315.webp 415w\", \"/static/37d786c1e9822c73413a845370e84fe3/ec5a1/315.webp 830w\", \"/static/37d786c1e9822c73413a845370e84fe3/ea6a4/315.webp 1080w\"],\n    \"sizes\": \"(max-width: 830px) 100vw, 830px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/37d786c1e9822c73413a845370e84fe3/3dc29/315.jpg 208w\", \"/static/37d786c1e9822c73413a845370e84fe3/b98fd/315.jpg 415w\", \"/static/37d786c1e9822c73413a845370e84fe3/4d24c/315.jpg 830w\", \"/static/37d786c1e9822c73413a845370e84fe3/5792a/315.jpg 1080w\"],\n    \"sizes\": \"(max-width: 830px) 100vw, 830px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0px\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"boxShadow\": \"inset 0px 0px 0px 400px white\"\n    },\n    \"src\": \"/static/37d786c1e9822c73413a845370e84fe3/4d24c/315.jpg\",\n    \"alt\": \"315\",\n    \"title\": \"\"\n  })), \"\\n      \"), \"\\n  \")));\n}\nMDXContent.isMDXComponent = true;"},"excerpt":"You can also use nearly all remark plugins, such as remark-images. Here is an inline image","frontmatter":{"title":"Using remark-images","date":"01/20/2019","categories":["Remark"]},"timeToRead":1,"parent":{"__typename":"File","mtime":"2019-05-16T00:05:28.357Z","birthtime":"2019-05-16T00:05:28.405Z"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/using-remark-images","prev":{"fields":{"slug":"/react-live-code-example"},"frontmatter":{"title":"React-Live & Code example","categories":["Coding","Help"]}},"next":null}}