{"componentChunkName":"component---src-templates-post-js","path":"/react-live-code-example","webpackCompilationHash":"204cd2f21dbe64876cac","result":{"data":{"mdx":{"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\": \"2018-01-05\",\n  \"title\": \"React-Live & Code example\",\n  \"categories\": [\"Coding\", \"Help\"]\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, \"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zw\\xF6lf Boxk\\xE4mpfer jagen Viktor quer \\xFCber den gro\\xDFen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd a\\xDFen M\\xE4xchens V\\xF6gel R\\xFCben, Joghurt und Quark. \\\"Fix, Schwyz! \\\" qu\\xE4kt J\\xFCrgen bl\\xF6d vom Pa\\xDF. Victor jagt zw\\xF6lf Boxk\\xE4mpfer quer \\xFCber den gro\\xDFen Sylter Deich. Falsches \\xDCben von Xylophonmusik qu\\xE4lt jeden gr\\xF6\\xDFeren Zwerg. Heiz\\xF6lr\\xFCcksto\\xDFabd\\xE4mpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zw\\xF6lf Boxk\\xE4mpfer jagen Viktor quer \\xFCber den gro\\xDFen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.\"), mdx(\"h3\", {\n    \"id\": \"a-live-code-sample\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#a-live-code-sample\",\n    \"aria-label\": \"a live code sample permalink\",\n    \"className\": \"anchor\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"A live code sample:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"react-live\",\n    \"react-live\": true\n  }), \"const onClick = () => {\\n  alert(\\\"You opened me\\\");\\n};\\nrender(<button onClick={onClick}>Alohomora!</button>);\\n\")), mdx(\"h3\", {\n    \"id\": \"just-code\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#just-code\",\n    \"aria-label\": \"just code permalink\",\n    \"className\": \"anchor\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Just code\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"(function() {\\n\\nvar cache = {};\\nvar form = $('form');\\nvar minified = true;\\n\\nvar dependencies = {};\\n\\nvar treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';\\nvar treePromise = new Promise(function(resolve) {\\n    $u.xhr({\\n        url: treeURL,\\n        callback: function(xhr) {\\n            if (xhr.status < 400) {\\n                resolve(JSON.parse(xhr.responseText).tree);\\n            }\\n        }\\n    });\\n});\\n\")), mdx(\"p\", null, \"Text between those lines\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\"\n  }), \"# asdfasdfads\\n\\n- auesufuaus\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), \"code[class*=\\\"language-\\\"],\\npre[class*=\\\"language-\\\"] {\\n  color: black;\\n  background: none;\\n  font-family: Consolas, Monaco, \\\"Andale Mono\\\", \\\"Ubuntu Mono\\\", monospace;\\n  text-align: left;\\n  white-space: pre;\\n  word-spacing: normal;\\n  word-break: normal;\\n  word-wrap: normal;\\n  line-height: 1.5;\\n\\n  -moz-tab-size: 4;\\n  -o-tab-size: 4;\\n  tab-size: 4;\\n\\n  -webkit-hyphens: none;\\n  -moz-hyphens: none;\\n  -ms-hyphens: none;\\n  hyphens: none;\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf…","frontmatter":{"title":"React-Live & Code example","date":"01/05/2018","categories":["Coding","Help"]},"timeToRead":1,"parent":{"__typename":"File","mtime":"2019-10-05T17:41:42.494Z","birthtime":"2019-10-05T17:41:42.494Z"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/react-live-code-example","prev":{"fields":{"slug":"/use-component-in-mdx"},"frontmatter":{"title":"Use component in MDX","categories":["Coding"]}},"next":{"fields":{"slug":"/using-remark-images"},"frontmatter":{"title":"Using remark-images","categories":["Remark"]}}}}}