{"_id":"code-surfer","_rev":"35-4bcb5899dd87a688ffcb3ea157323fca","name":"code-surfer","dist-tags":{"latest":"3.1.1","alpha":"3.0.0-alpha.3","next":"3.0.0-beta.1","beta":"3.0.0-beta.2"},"versions":{"0.0.1":{"name":"code-surfer","version":"0.0.1","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watch","release":"np"},"dependencies":{"component-raf":"^1.2.0","component-tween":"^1.2.0","glamor":"^2.20.40","prismjs":"^1.15.0","react":"^16.4.2"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","np":"^3.0.4","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.0.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-9Zl3WApj0O0ERd6HHtOWm7HN8FYZoQYbeR7ahGtuvPHHQpe/0YrLnqN3kPTWrwVuQhz5miWuAi+bTm0CDDJhqA==","shasum":"a5ef653541decdb8716d9814ea67b65e1777bdbd","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.0.1.tgz","fileCount":13,"unpackedSize":30542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbeauZCRA9TVsSAnZWagAAQHwQAJZBO2cCOnJ65QJBg6d4\nWbizYkalrIXsYgoaz3X0ALwYRxfdCbpfforgOr/VxihpHeG4owgkrKi0aGuC\noX7ytA9ARF0r+GGsnWY/JfpwUFwhZ6Ay5oI/XgPGB3qm/CYGgpNLHPFd7S0x\n/VclL8YV91gRVs4PoO61wVLgCLLLhg2uhkAwP/S7wSiI4Cm4PpaBrygzdtI6\nw6r2I2Lt2m41S99mQvZwAoo0ZIvBIqRYuscA3D1MImHdoCMKz9lhUl6I5K0v\nxm6q1KrwTJ8K2S36A13zJCRpShqeVjfcO7GFbyv52j139Ks1Sm6Yjc9QHGKL\nJrwOKpkH8cuVlcJ9us9WVAw2ZZMaKT8F1gEZQeiZNn/7VCNuYXodVV14/EYK\nrm+lHYtjtPVqqBTJdj/L/UFem9JNKCTPSTZhHpdKvfaf2nXTQQjxfhxPri03\n0zo1z77k6VfdpZzIwvQ0TrHR0mBcx+vUgzoGZ2unehdK7RRs+zRh3ufUePBZ\n/V7rDsLiqnN5aV8duo1eBE07l1Uv2xMZKJapDOxFeY4DzgVUs1K6NEhJAmDL\nD+UdCzHqb4U54OUtQzpPenkBSi3C4zQRH/N8clj5VL/SLkuWQ6wC0kpFl7Cj\n/MXxdaPUiFo/rVbpVXYyg0H5DKeuww7jAGgSTRc4IYtmi3EGLC35yrLK5bup\n68kC\r\n=L4i+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLxKj5LS/AK3KahXgtMdRPQm/Zh0Y1UmoADnulwB2hiwIgGk3BAMIUBEXwzGs4u30Ok90HsjZLiFhu7xjxQDQzSt8="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.0.1_1534700440531_0.5097535396086494"},"_hasShrinkwrap":false},"0.0.2":{"name":"code-surfer","version":"0.0.2","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watch","release":"np"},"dependencies":{"component-raf":"^1.2.0","component-tween":"^1.2.0","glamor":"^2.20.40","lodash.memoize":"^4.1.2","prismjs":"^1.15.0","react":"^16.4.2"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","np":"^3.0.4","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.0.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-SHTiFnzSC1Ph8He5w+pxsFVuSgt3j6lW22QiP60yrL7owO4dKfdB3gmF4eok8Co3iWFy/0gseyzBsp+TjYDcBg==","shasum":"fb1a3135ab32201d5473b8676910151a97239585","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.0.2.tgz","fileCount":15,"unpackedSize":36315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbegfbCRA9TVsSAnZWagAAZGIP/11H2AVzvIJyOWSihdDz\n9sSl0EKBEFQyCkobhT6hQq/9jzXYSoguGhwkZZUx43DXAv5W+oKldE8IC3xI\nlinT29AKEUnnmRWQ/S2jfscLFnaWClCjIxbgAY8TrSc4hXiuL1y3ePY3cIPo\nWo0fiG5Wn06+UBGhbfuzoWyEkB+2DEy7AjZ9C66ECPagOyCgvBfmEEcGip3/\nir/Gbe5LQ3NIKNKsQw7C3zCAik1/IMYpukc+dyZWWPZxNqtzKbp8dLjAU/Xi\nwaTEFxVrES5o7hq77xFuJZU7diK4x62oApfqT5nCSm/EFU/PiXis6F4s87M/\npqAgpL+x3+vxSd+3TN+YGVOipUHNyXjVddo8bqDEJ75bVbDRJiADvKf/aqB+\nfPu6rUOMz28ygLgMvxZQeRXQq7Jkdu6VEBTiBwIQd1w9y/+LWOxzzUEU1kGg\nMy6guCdAjTa+gZQ9tPH8FFvHqmTOoZvNgSwDRc6ULbJJ9LeSrzHhCt5eXgp6\n/irdryQN4qnvCdvK6/nFsnZXjvmuAsOpGHmXESOlBilLDR84cIedyqipujmk\nO9rMmeX6+Rzhn1NbGt2S1XRtVx3z3PdqbKVMHw7x373gPfYOpqYjy7Jtoqmk\nTlsfWRyS/wfm9fKEfWCuc5gZPwo8eJOuk2w21M6OTdWH/2ikl4/lEMih4PZZ\nCFJD\r\n=zS9W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiYLzj/MUNurQ/lKl9Q6VeAhnbial8F8oKtmhwI1i44QIgJYNGvMDmfd2EdwAT+UL7w6KZIehFMhCH8ZqU//c3VEU="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.0.2_1534724058689_0.10412906373381192"},"_hasShrinkwrap":false},"0.1.2":{"name":"code-surfer","description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism"],"version":"0.1.2","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.2"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","raw-loader":"^0.5.1","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.1.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-USiNN4QRSRBzx+mIuWRsKakx1JXG/+8swU3vFR9HIcr1RhfWKUEvbLOXIL2czl4sZvaM+LhHqebfAwuLGDlMfg==","shasum":"c3c4eb6a8d823f8ae634aa9f0abc3a41993c9046","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.1.2.tgz","fileCount":16,"unpackedSize":62724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbgh7iCRA9TVsSAnZWagAA354P/2XBGOHlFPwtO34ViBok\nFs4BmzEGQ2SF8ZZDxzfGjpGGQ7dcMW0F65IWmMAR6symSzJCb3F9/bJmDR56\n4WxFd0CPKlRF4p27BTvrIr4747YHl0YglqU1q3vepuF93SiY6DYFkcXpFOH3\nvcQgp3n0Pq81r+iQXVrzQJjO/9TXD372nyTI/jp5GmSuOqRmYRPasFOVQYfD\nJ5mzccGkz8QS2+/5W7C6sy80k2nEusnZJMXEcyt6LYwcScGn8Jn659RpMA7s\nULiyNtlLpYIYcZAN6GGJdtAEtC7zqSk78HyNMH98OhTtX24gWEXci7RN4hGw\neJrZwUJ8q7BvPO/K/JxHfIppyYp0G5wmcpJ3jcQFMWdrEZzYz6sNZ/TrrgrR\n/lQaRpeCtPsDJpNxiV4/oULTkSntPzciAlCdEZ2jpqj0WB3RzqtTMVAc9T15\ngzLlhRFy7ES8kQ3n27qjle9v9R3VtCtjPqyQuj84NMRonVYhqfL62Z0RKwOF\nks2Us3A2kFT4UOrtbWaUAZINhGSV8J2yak7e1i/VLzULG2f9pvR0vWH9e2lr\nm/9RSdaa02m9aTczvgTJ6oobBh/s4oG4RE83KgArLIJNN36EP3psFuGTq4bY\nsBIoHjyFssJNNwv1LynZdk5I2kAlys3iG6E0o9oBdI/ZdixLsmTOvJeBmLFK\n3QNZ\r\n=gDJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJVGoR1yskXpYHQ4jC/gdB5zeql19p8psY5tPCUG2UrQIhANUALHpf4+eBxI5f/tr1ESw0uIQ9OkQcP0DTCzraYZuv"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.1.2_1535254241895_0.6694731384462751"},"_hasShrinkwrap":false},"0.1.3":{"name":"code-surfer","description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism"],"version":"0.1.3","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.2"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","raw-loader":"^0.5.1","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.1.3","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-8h+Bkwar96HGvjpi/yexkns736M1iDiEi8RVBkdXhOlufPbmQ14riq64A+4D9IFni7ZdP67KJTLB4ksfOPWntw==","shasum":"75561b433e13f9d5a455e9a4fb81cdf5e2efed55","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.1.3.tgz","fileCount":16,"unpackedSize":62817,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhYF7CRA9TVsSAnZWagAAt/kP/1vw/pyjLBfupCwSEy17\nCfB6AkNMpwXYVDiAGLuwGsSZOBXJRQfsk5P+cYnKnVYlUBwT5i8GduSxQ8Nw\naruVJ9KO6ysLgd3SnDTiR1Kbg/aH6YNSUPORKpch25vDbJNDdLZNmZbEEYJO\nguwcAI+9ZOlW/uQuYHvqYufm3NrnXGShgmXjqX144Wlxm8x5Zmcc7zw83wSS\npoj5VR22z69bvINE5vMR8gYX3rdWCLJkDGJqA+/Vqs7te4+7bC5olz4/XLg6\nqPWJzgxWv8iz8HRZDMyeQVONNGhhHchcGWx2xHe4jGlpKb+z91AcQ/+jsdKZ\nfnQXzMLO5TjyXns+ai7vgipyH/RWn46YQq+vy/+StOqB7LlELzEqgyD/o4cV\nK2UZ7EmoHWk5rFhetnKi+tKkIOqAhJDJ3xLl2HXPvKhWPs69359niRa1CErW\nJ6wrGz5Ej18X6MFToyLMg91+oGEsT+WiID7pwvNPHy7NShVnZx8qm4Qd0JsH\nhG3iEOQdwOKYzvAN/KoyqoyvkNF/gZmyqQpXzT9eWxVDPUK2SCO6SQxQY6gz\nJRr51a5qkUchy/BMITnBzDoRh0bSHffsBk9AxsIGyDF8WjydJqYnrrmGoRHu\nK84T4wCPtspv5GETMB82wFhUkEcqfWbUSwU5hQAbVHKZ1K9uFStEOyPM1TZj\nyqlF\r\n=LUWM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsi4CCVP9EbhYZMkLz7+GfrcYctjWdcPoBnatmIlV4hQIhAPaq9p1boocaHaHy+TxgqiAkAnxV+TeURK/0OIJ1h337"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.1.3_1535476091222_0.6095387800739593"},"_hasShrinkwrap":false},"0.2.1":{"name":"code-surfer","description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"version":"0.2.1","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.2"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","raw-loader":"^0.5.1","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.2.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-6TQmS0UTUtNiwEiO7zJooMWs2Cx6SQNW0fW5ZATbWd7Iv5y92EygihV5G8N6VhsFC26h1+5mNpx5PK4iohu//Q==","shasum":"4deb109bba03949b5e244b3f767b7c36c7347e88","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.2.1.tgz","fileCount":16,"unpackedSize":62831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhYdMCRA9TVsSAnZWagAAReYQAJQt1FYJtjQknyt86nQY\nxrxbBSY3pED7NROLjfbizdNVwfEWgVK9RCMKOtdZAvxH03jlGEdVEoJXtJtd\nltmON0XoJwDnYlDjP5FxdBpMpPNMYNZvuNtB3mUeVOtVZqCgI0SjkzgHTNpk\nqtmcrR1dzsE8AuLhbNnt/poUursVywGUWemg1VSbJscv4QTgHkAHFgBdHAOM\n2bwoFQjY/r3TAKkewtbWY76coE6mqSgNt3YRgTcFBh+3+c45PqvJszfe1HTd\nE45APF6zbhsvFP3mG9f+ZqftNjXIxEJzU8fiOIsrs/MlGbjymuDzgmLcGVx5\n4ZUbDyDRvtrCK/1yDkuj8HC7pGf5UoEHonce9JD263KJwAF+6ngy8MvsHuwX\n7xvc5oget9eCjdmRqCsuzonrqj4VmiepipKafsUkTzFLKkZCSjrvjfE4pFIt\nOKqrjwqfQXiq12qAcEEEZn5XEhp06roj+Mk1ajaxMz+KezOJqsOBdCtKXg+g\nrQwM1TluHEZ2Pt9pimslnudOtqDIDshwtQnNsh7Xc0wWS2WiwP+7U7bsVpjV\n1XH8m8VXJbm1JtvgINAugnML0XWPXhPA9cNkVdOnrePYKiAgj9fcNhfMb2+S\nF8xpLnndC6utb9AG6XWpGUKc3Vlje8CMkKaOMAwu4X4c5ApJJSB1tmk/uhJL\nPEIq\r\n=rKRI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7wW4YDPzO3nWY/kzHMvNjjyfYzMXWsvFOm7TEnZsq7AIgEW2E/14zSZN1Jf+Ck77p8Q5Y7fll8NlTJRiT7ODyfs4="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.2.1_1535477580075_0.7537670322292822"},"_hasShrinkwrap":false},"0.2.2":{"name":"code-surfer","description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"version":"0.2.2","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","raw-loader":"^0.5.1","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.2.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-vbepnNdDehv5gPP9BZWHtrLrJsDQjzzxqIMlC77DE03MlQfwuuaSVTKABo/Upl4VskabyXBt9gZMeUMewNjJhg==","shasum":"712b7b5dc969bc8b095c3edf302a484aa36722e1","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.2.2.tgz","fileCount":16,"unpackedSize":62831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhuGlCRA9TVsSAnZWagAAOzEP/A8z7FVY6dmOeSbdby/8\ns20sAPCc/ZtEKiOzeh3YUnq4ZdqJoIqCxQPWdDgcY5Z4EHWatpsCFh4lqbFK\nfMKYzMuOD8olPwO44HHbhb7142qnT5o5GzOvYn/TNI83UUNR7YrG1wiDtLnD\n0fsXXOfZhF8zbF0DM91JemPB6OPORhhxHmQq0d20BlRmIWXi2QIy3Fu5ULNT\noGxhAdaUdvZspBkE09biEiGe3z7zKuuQ4Yctj0Nfjt8Jr+k5KmqfO7HC1Opt\nWF/sN7Jjf3gBzpkcPXiaV5Z/C4+YExY/RC8ajOYyQCb2ZhuDGzM38CJDUu4D\nm9uCyWnRCVxlw/OdOSkiCg+U4YApHQtr4rWbTDE6gHDaDLetMy+E0jAdc48f\nBIUoRuvEqMUoq1DjdWG2h/Uq8FaV5Sv2k6TWjQb797ogyt9ApeaKBIlh2UmR\nq4+VwIZalLPQURh+7Kt00s5+JL6lhYWpGs94kELJWt+rKmtqww8JqDVsGmZE\ngx0uL459PwsU99X/GkZrpOaQSb+h3ru/Tuu9WOJHFfkRyH3kelc5LZvmKMjC\n8ry82xAifKzvZAiuM8eTR8opQv/P2NckwIZ1TTNhR92tF9L0+lypFdsAgckc\nZ4OMxTXTX0Lz6cep7jYMAwhRkclNc7cDTdhl/NnKGZdQUrO8iHqjErahmzKn\nU2Me\r\n=QNEZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCadnAXfo+XxWR4TJ2mwYUJV51YvAGJbpMAJB2+ixDL1gIgYO5CZBzJN536pIjNMIz1uCi/dQL718DiHSde2kvJIdE="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.2.2_1535566244254_0.6271466596250088"},"_hasShrinkwrap":false},"0.3.0":{"name":"code-surfer","description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"version":"0.3.0","main":"dist/code-surfer.js","author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"private":false,"scripts":{"build":"babel ./src -d ./dist --ignore test.js","storybook":"start-storybook -p 9001 -c .storybook","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"@storybook/react":"^3.4.10","@types/storybook__react":"^3.0.9","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","raw-loader":"^0.5.1","react-dom":"^16.4.2"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@0.3.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-M58bd4eggob5o7Te5NW+ciVz60LXTV+AIXgZb7/gaf+4fOiv2RkT6l57r1VOlQqwt8BZTogDIN4TsYz+fowP3g==","shasum":"c8e3c57108fe8d2bf4a021af7effdb3cc414e984","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.3.0.tgz","fileCount":16,"unpackedSize":63072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh0ijCRA9TVsSAnZWagAAy4oP/iQTeDhhrW3DZzkxtDHs\nTqXZ1CwmnPpmMYVYzixZ8nMresWfW99R+zir0IJuZRg8sF6A9fKT3GY2ZmUj\nOva+zCHafklZeWCiKm6CeY8VIYrBZWnehkPCVHvGccoeIPnUSwadvoBHeiKK\nrC8jSakMQnXO5I/pOdh8ATZGPFy6MOG08cjVrsNwNHCtkGaL0/CZ9dMp5V4V\nZcfg7bGPDANwQDplOl4UdDw4BJaSwSSaGIiHadhCKfMpnwpHa68h0dqwAVQn\ns+hcQGNpNGiMxK6m9pkgzASGoC0qv8G+rTkrcfw3E0AkDwKba/yfZwQfdt2W\nU/vtFlYjSwD6FO9GCr/16IvFKBeEYuWPOSCR+WFhynDEWqu8UWg8m6ooWOqZ\nZoEOFY1xYb/vrJMOLfR1wHOQILLRJH1Q7fg5krkZINOazb71ba/fJVXUyE9O\ncPSlFd6/lmN6rsO+lUg42CQrLY9qWVTuuJ1RYaioCVjlvFYIYcKLBLiBMvMM\nPwhvxdBCraHdDmFTjG6zeQbuFWMF2x6uq09KyCQ7lFZX0RzejV64D6HmMpJG\n5xPrjiTv3Q5gIlzCZgBLF2/f865lXRyKJLBQ6LKoMMYTk+vLtUztx13eeP95\nMaW8hPm6kyY3Dp6FeP6haY9Tmp4ertLOWypthvyBZzqLM25KZUf29YQewgV6\n2Qd/\r\n=xJIv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQL6GNGIkywerHchZCgyvvORPgFJmt5MtlwaMtssDrGAIgB7h/h82RrE3hVIbdxOnsJjNv8+SDaNvoFIXla0S+LXQ="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.3.0_1535592610241_0.4773331790043456"},"_hasShrinkwrap":false},"0.4.1":{"name":"code-surfer","version":"0.4.1","private":false,"main":"dist/code-surfer.js","scripts":{"build":"babel ./src -d ./dist --ignore test.js","build:watch":"yarn build --watch","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"react":">=15.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","react":"^16.4.2"},"author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"https://github.com/pomber/code-surfer"},"description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"gitHead":"3dc44fe6e06bf0e43ce91b3fd44aab1edd90b449","_id":"code-surfer@0.4.1","dist":{"shasum":"79b5dd850229daf5361d7da2c7351b605d2f31c9","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.4.1.tgz","integrity":"sha512-yDErbnmgKUZtv0iFnvYmqWPf4lPCym/1O3W1En9VQCriGMKfT/6dEFD2pjLyQgPgFeH3yxJ8hsprCIFI+iOh+w==","fileCount":6,"unpackedSize":34651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjYHhCRA9TVsSAnZWagAAaCIP/iKw1EpozVILCH+qAMuo\nIcSc6R31XKWEXJTBCWIcfUAucTpTRZEP25uvck6idl2BvQ40v79zLY1G/VSs\n5FHYJp3zRMhb2N1UvzpNBJ8qIriLjn7CC9jvJaNtmdw5M/I123Ig/PVe0ylD\nbPuSDQN8XnKaAM+2ZFDEaVAwMPZBijKyXG1b0d1+YpiWdqB3bbW4NImRa2Lc\ng5NCzyoTwYonmHk9f0pioKbgyjkEOm9pN5QVkDndCobWppuC2pyIxqjnHa3U\nRENSFHOhNQbbjOoW7KykPQlfsupl1pEQEmC6PHZ8FWa/0k+xlXdrAzaawNKe\nvXWW0VZzulpIZsuSijM35QychXD1712/G5IVYyL/3NLfoFMuBwqm+J+Jo8+j\njJM4zym+vhB5srUdVAHjqelgVBG9QvMFhy/rgynINVfdrTGV1TG1UuB0maPK\n1jKMQblkiwh/sjVjd4NszfsCRffJyizsa9PYlX0mQ3EE0qUvmEAf5I+2pJLu\noXwr5WuavT0fSET1LeOFNAcUVkSqsApYF98RSmGYeo8wvQOVg8yqx04lpAnh\nK6yOBVw6j6YZRLxOOhLtuoHsm9eaGs4Y7wMIwWbSHlH7soXXtv2Ni/+7AbW3\nKSdHxbRscOkyyiKA1czmya5aF/5OOzLQfTX4+XYvMR1LYE8h0b+b7SkbGCt2\nIH3u\r\n=LDS9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEbw9cC+j9YnjHt8FaTlJaX1DJRnrQ15mx7lKwB9btigIgYujrTeV4qKo1m7tM/Wzefvnl2DjwWCOJsyvQjX4kXYI="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.4.1_1536000480831_0.09655573215957713"},"_hasShrinkwrap":false},"0.5.0":{"name":"code-surfer","version":"0.5.0","private":false,"main":"dist/code-surfer.js","scripts":{"build":"babel ./src -d ./dist --ignore test.js","build:watch":"yarn build --watch --source-maps","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"prop-types":">=15.0.0","react":">=15.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","react":"^16.4.2"},"author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"https://github.com/pomber/code-surfer"},"description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"gitHead":"5bb5774f6143f1b069a54c4c86c86854421ceba3","_id":"code-surfer@0.5.0","dist":{"shasum":"d3952eeae7482490054cda5f56e1d75f21c0c69c","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.5.0.tgz","integrity":"sha512-CX19Kw7rKbHjFfsoZAsGNU3ivz2UKJzLTobQ2LhfiveOsxYo/SaQSdwgSBBV7ND/Gc9PghSbhhQM8Fbbb/IQLA==","fileCount":10,"unpackedSize":101991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtTYnCRA9TVsSAnZWagAA0AEP/0v5/iK//9JljxKUFwZL\nPJtPryERl2S888AEP3eciefXJeX/ZuhekI3/iwUsK+dHdqr6/Przli8bxwre\n+dRtNs/5HGIfpdlTAFU70D2/Fkjrs7QA7nDUqjYmZcdFZLjtEEPJk3xTsjXJ\nGGG5agCJKbOwZBGpDbXXuSCPGKEktmUbeqVTrqzCiQz4ACUPmDRtE/ZU37vB\naWJoUYWGTKJHv6X3NX3VO5CmD50UQfFDDbwvi2N/sV5k1Cx3/Y/VsETnVT6I\nL73WTB7OJo/7IpN0/Eh0kuXvr34eHhkR9Z2SuCCN6BcqVBrlIVwIQjMiPW89\nIHNFaYtK09/53Xrm8Y+aS6G2MErq4WRamvJmoaG93jySHhDIY9qop14KWljG\nmfOwpRPZbOMa7mFchukDyzLR7qZY4m27IiSLB+9snVVE2hx9VkaVg1S/IlT3\nHXV2csXtZg627XXcMVkh+v7WDPLx9p0Ew8mLAGpRLn1a6K74E/xh5YB05Oqo\nY1PB70ry3rohVylhtUtbYxqUQLrarIYzxPS2ifx4VS6ks4bJC29Sj4m4ItA+\n2kjFRNrbc4zWiasQREQ06ywWsaykLizR8/if1WQHDndikpsNn3yR7ggeFY4c\nQBAbQnxX+yIV0GmRVe2vwy0LJHRMG6ExjfO/U+U2TCKxEUsdp1t+XHsIg9yu\nYYYK\r\n=QwyX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIsRNjYOqLXcbo815ogk59vUo7VZg9lz0ORns0GI9FYwIhAJ3xhcxFSmEdT8XQ/mduKysGr/VaSZJrwj4OxUjNnMZS"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.5.0_1538602534269_0.2718645415997414"},"_hasShrinkwrap":false},"0.5.2":{"name":"code-surfer","version":"0.5.2","private":false,"main":"dist/code-surfer.js","scripts":{"build":"babel ./src -d ./dist --ignore test.js","build:watch":"yarn build --watch --source-maps","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"prop-types":">=15.0.0","react":">=15.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","react":"^16.4.2"},"author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"https://github.com/pomber/code-surfer"},"description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"gitHead":"86f362b22d6b33dfbc2d522738681ec0a69ab3e4","_id":"code-surfer@0.5.2","dist":{"shasum":"7f813d72ce8ad4c5e54b7fcd7644ab88c3dc3085","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.5.2.tgz","integrity":"sha512-qGoibNJbjXh60FMaZiPwN75d2naocWTCU1cnUvevGeNko/RqR6evm/qeCW5TbuvnDrTc+XOfkqhuXrKOuV3f8Q==","fileCount":10,"unpackedSize":101991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbw3DICRA9TVsSAnZWagAAz2gP/Rh7j05xKqJSEtCnvCXC\n8SryOUjSPWAOf1oqy4DXuRwN+OiuaMrcu+zMady3KI2eDBOCHIl4No6wTkUP\n63fYETM7Hkz1d13l7uLhUqZ2cMJGsIyAmh6RfZFlW8/n1Y5IF1N/eoemyt1a\no27mBKrjcBImlct6mLjAiohyWFoGYGrSWq22x2yxw3db3EoK/p4b+7H/JRCv\nGn1FloFpyHNVNBME/s5c5bpuw6MsAX2XgQGko6DiUQeGq6+uNRvtiZ4UESNS\ndnV/heucvYI13DVCknXkEIhUoim4NGSPA9iaLiSuDPS4fChuqiom/UoRqH6n\nz1XnOuQYwqp0U4TGSnP8vVcCMAHcgsi3HIszQ+RxmFYNy5lcNzbMpRO2WEly\n0FaqBZMZSvcUmhnB2Hx+uG++8OscJrmKmguQr4aLELCA+d3pDJ60P1JJK763\nMue27sSk12qcCcuUGVBTmdOVGtPz2Fpd5Vm3JYv9B1t3B3O9VgkrGuZ6sAHz\nSuk98Y57BZTQokBLRWQeG5OMuuAECjcbhfjPmbrV6VPKg8NyudZZZOX0RLUd\nxTSrQDrKLLOBnDq/nkxPis4AzX4MbUmGXPsw6yz5xy6HDyhKSQjmNf3MxKL+\nMnkSTyC2OKqN+tsM6q1HkbmFgflYueRbxLm9BfvH+e2GDKgnVMNP4//SRGiR\nY1Iy\r\n=0rPl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiXsnDzfmnEiYFloPfUZLYV++y4d5q018GpS/0NNGqvQIgeC3aD4RNKsLz2RhZVSlUbZIFPDKX45/lmorFdiZVwUc="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.5.2_1539535047561_0.6784684929898439"},"_hasShrinkwrap":false},"0.5.3":{"name":"code-surfer","version":"0.5.3","private":false,"main":"dist/code-surfer.js","scripts":{"build":"babel ./src -d ./dist --ignore test.js","build:watch":"yarn build --watch --source-maps","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"prop-types":">=15.0.0","react":">=15.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","react":"^16.4.2"},"author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"https://github.com/pomber/code-surfer"},"description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"gitHead":"f316c3212382f27dc0f5a2c409418043b90726af","_id":"code-surfer@0.5.3","dist":{"shasum":"7e5d4c366e56d060173e82c49d85edd6c273df1d","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.5.3.tgz","integrity":"sha512-Yuls9mdaI7vofPyaoKHdkEuWddc1ReVnhuHVKWt6r8EvDkScZ6T3FwOXsAd+WLuCnKYRKLVo4DkkBo5eUi+PGw==","fileCount":10,"unpackedSize":101873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbw3VDCRA9TVsSAnZWagAAsVoQAJQ7yozRRvp+BT8AK45G\n3EsrrhlNMdB1nMfDPDcq/gXU7fDmDEoS4s/PYIDpvJ1HfK+cMLr+8mWUpsaz\n/vRFYYpwLkaN31PFBEPr4fbs+6nJCA0lLGqUq8k5FgXL9xTsR1e15LehBcjY\n2cXDeG2727uVyNdrCGk2UCUAb7xOktWAPnCIdS2Pc7dQAlc0TOH65a8q8kSm\naxf/kkezY7VE+eIHvz7LX0Yj38pe89zn92e3g2yjwF6bi3thsmI06TeNfSW6\nrSI+Cg//M06hbdstuKl1YXFcLBPmRwvagFS0UoL3/nMpP/amR013tf8+JTf8\nHcrNT7SSRyb6NZ/L0V5XE8UIabkDmQlaJXF8JReo5o9hR7nJJHEkzoX7DnRV\n5DfbhLyvTN5aLmdOggNhT/har8NR8EnQsef371CmkhL23HLnJ7QeL0UknIbO\nWvpU6EkG9eyauv/ysUWqwWJbZu1MBPfK61rDM42dV3a0cgV/Lokqw8gSX2pw\nAODs8oHoPF64Kn+9GMs7HSolGY9vJLu2qFekhiT4DXAYrRcBSbXpaRvoZXND\nMNj4kzhlTJt1mHkcF3rwqBxHjgfToVmGmx3+G1+USQAT8BOS9Vhbn1kKQL6Y\nrt099kH8+GZ7jp8TEtjcvaMcN2p2Sdk89pSFlUN6vf9/kFwBQn/cxGdBu8ZC\nVCNh\r\n=dPFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVOUxc0LsambE2lbtWaDT/pNjsGVakGbvNUFx4HX+vkAiEAywVRWqAlQVsSu9x1mUHdbIO7oJfg/yitz4/fnt8soZQ="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.5.3_1539536194719_0.3609294331018291"},"_hasShrinkwrap":false},"0.5.5":{"name":"code-surfer","version":"0.5.5","private":false,"main":"dist/code-surfer.js","scripts":{"build":"babel ./src -d ./dist --ignore test.js","build:watch":"yarn build --watch --source-maps","test":"jest","test:watch":"jest --watchAll"},"dependencies":{"glamor":"^2.20.40","prism-react-renderer":"^0.1.3"},"peerDependencies":{"prop-types":">=15.0.0","react":">=15.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-3":"^6.24.1","jest":"^23.5.0","react":"^16.4.2"},"author":{"name":"pomber"},"license":"MIT","repository":{"type":"git","url":"https://github.com/pomber/code-surfer"},"description":"React component for scrolling, zooming and highlighting code.","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","ractjs"],"gitHead":"9c8e1d9fadba8dbb0ab3bf7e4ef145cfcd26be86","_id":"code-surfer@0.5.5","dist":{"shasum":"223c7177de6f3a645a4bdfc17515d524ad88e038","integrity":"sha512-ZjGTuyC0hwq16C3WgUfOV6wJ4z5GQLBqN9enUaA0SuRDK//Z2f9BdQVVTyDh7O0/cJ0NRJsH9LJbrwVx+fruhA==","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-0.5.5.tgz","fileCount":6,"unpackedSize":39243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRhI5CRA9TVsSAnZWagAAs7UP/Ro+RcgBsyhOg31FMXRE\nD5a9+9AWitOcGM9RaF4NllunYi/Y0fi4swfvx2TD3lvgOcUOo3HsT+pc3jWy\n2r8TZGbFuuN5PVTY8oWpKRvBSiaWWCCNorKDnfJaCRDYBdzqPW4ofclTCM6c\nTDf6ouOF+CrNXsCs0KWIDIFDy7UslnhyjvuBKr90AhBSR9RpFie7hzGjcreg\nj4FKvQIt61TNH7S0kZT2kg8+wpCmJpb/qDpZ94h7bVvoayAUM19Vs/aL78IN\nDTun7NZ5ET34cbzI9P4nfhnQu/UezVBFGBU402xUKEU+X6IuJcdMb+qbueqr\nDIOKx751jGUGBGcpylVewNLCNkavDc1kr6lws21H+9574XYdatfSwofTJzf/\nHBZ6zG10NvSs1jfvMJFF/X8WrdWBhv9Q0Oma10ofeavqPt8vBYe0pXwsAQYF\nKD/8w9zikkg/wKLcQlk1YhqzVMfMTU8Q2zPfDBAdhFMrkaekVSuxBn0KO41N\n6bqRIwyitQmyE2kDasaLElyk6HMz+JPj4AXiur8hFpY8NumlaI6s79Zxmez7\no2+TWDsbGncZwDvU6H5J0pIbu5ZaUqIIusaJwZ7OJgx0S9hkt5bgpV6gx6Qd\nCUUCaC+zfas5K2M7Huc6XCUt0xEIm4HfcZM1KeChd9/oS50qhNj7kqgp4+4e\nPdaa\r\n=yJJ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX01ZDkg9nhKZhkOih2Tuj1JVxdXTExbJsV3UpWk/hbAIgVPB+DC7sCRxPH1umeAn6Wkt3DtoTcVL64reUQxdZhis="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_0.5.5_1548096056288_0.48545045507481377"},"_hasShrinkwrap":false},"2.0.0-alpha.1":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.1","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0"},"devDependencies":{"npm-run-all":"^4.1.3","prettier":"^1.17.0","@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"gitHead":"2a21393aa296d1e5c2778ce0c64cbda2aaf4fd4e","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.1","_npmVersion":"6.5.0-next.0","_nodeVersion":"11.6.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-c4SKoYfxmUwwMXKSN1A4MUwlXNKC6Ws+2XKT4FJfACltK35gJ17hQ0UJyF3m5Z5qZHSn6EC0JKUY+nWZBLJFZw==","shasum":"c25d2a49fc1f7e5a659682b5d0f92d706ba5917a","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.1.tgz","fileCount":7,"unpackedSize":533023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2J1vCRA9TVsSAnZWagAAngwP/2RQGKPXtv2B9K9uaNTH\nZABjDJDKJ6/CJXbmvmddQ5FO8ww0g6JCmNM5lrozIvu2kDSk+jcn7FZAQHOk\nfRMoSzPyHuuZuujsSL1jE/aAm8FDavw7USyF3wibZRirquet9gT45Fgzy9rD\nmMhGHSjlX0yYActqhZh3t77J12F+FXbkZcy7lPRpbVOMOXFc3X8jFtZY2sIJ\nVbKluPkVGeZ73Xa1cTkpvEF8NTwiyuN7VKUEP6WIoh5d4G4OCi64GilcZfcD\nMIcVbzQJN0VjnIIyOsdBtLYV1SrM1IM2Rp+7WvuH2lLyYjMqB53l3kCMfrt8\nL6TnbgBakoy3JIgUdpfFN83Ec49m6g7Gk4MlZ4URe+ntQPygVSJUgaUJTdlW\n6gy4DjsO/mHYS95PoGZUv1zAuaygO3tFL91Wj+6wn0H5JzGvYTk87Chd/GHH\n8YN7WiF2eUctmAR1Po1jxvvwBX9BHTXRS/TxuInbk5/K8CkyaespPPDwRfuv\nA/2ikvJnGfyP6vu5X9i7qNufGcfjwTpNbGCRYn92xyW/5BJuPCeNzjPC9Y0T\nr45bDmVBjVCVCQTdW+wPtnVtiyZbGMW8KEm2eBQ92SLEQJEBowu5qlsCLqIE\nUBXfqaNmCuIyhBRhxSBMFqx6zgEEu+pfc7IOiuaugSgtBurImFj9WF2fZkbL\nC670\r\n=93TB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaanyWGy3HsRxpnMvkFDavxgeJ6CwRwN35L2gpwvLnUAiEA/RAUaoK/7+I9H0I8AEnrc8KS8pwjfYfI+rdk4kMhX6Q="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.1_1557699950624_0.4525852323067321"},"_hasShrinkwrap":false},"2.0.0-alpha.2":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.2","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","npm-run-all":"^4.1.3","prettier":"^1.17.0","react":"^16.8.0","react-dom":"^16.8.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"e6c5e63a8f2fce70873eaaf7ead29fa74264d130","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.2","_npmVersion":"6.5.0-next.0","_nodeVersion":"11.6.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-DveyFjjebxmTyzAZzQnDOvOrWticWOJQXV9E2/Yonqv7i21RpGU1x09ClgTWAjUhUltydtEHI4K44pTiii4AuQ==","shasum":"0c1b4147a6ac48353d9971e0e68ba6ef5d5b0c44","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.2.tgz","fileCount":7,"unpackedSize":659603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3dm3CRA9TVsSAnZWagAAxjkQAJpkKqLHJrg+oRFZ7ula\nlbSZwoFX9zMXxnhM+cDunDShiMVWSkTJnyI3R44mvptPxNOYpNWvH6tjvANK\nlCZTZRFrCa+RJLl+hh0QYsEw3ZQfRqdzL3yR+0ycyQwggEsPllRymgK0o0K6\nDFLlPpkwGHx3mr/gmhSp2WNX8w7VNaBhxN957sMsrrO1LGkGGitxhh3frBAt\nphvx5J/1vW75rgWLeJ5EFMASpYgBvRHJ/egV2KFI1vOWRcn7U3q2PgkO+Ahe\nHd2J8jPh+uz2jnJJi4yTK1EhameJRnrIPQyu046nzAbaZdPinQFhGfIq2u2P\n6jZAeKJojRC1lOyRBMUzY9Os1t5sl7pzosIag9HArH5rVQwRVgTN88/DU0YM\nuEtGiCimht8aZJI88cz39ieG2ojrtqvnQVsA16h9HPgT7dh59RQGkauJ4kO+\nmeGysYAhC9Nu+hBTIasFwVpas8mjNbnR2Scfs2RIOiMjxZ8bhKW0HIcVb3v7\nQqULpv9y7PtTn+37FP0uBW0FAfEXk+DXv39kKexhO6/l9vVHPZr0hcaESt2s\ngWVXoB5v63pYj4y3AO6SGkL0ObZ4QNPukfGpYbA0fNj/i+57+GpQA/0lhF84\ncZdRe63z0gWCJ2n7eXSThDcb4gDiFEMUDtDasVFAAggU8yx7m+tCMJLLd3mV\nm8T8\r\n=lElJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6QgeCGPPII5SBoRPkOJWAd3UoLFJscVS9wKoOd1dTBAiB82Th6EmnF9G85rIxHcMAmTuUwq2RmgbwHcFSJYiXK7w=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.2_1558043062866_0.868866279422253"},"_hasShrinkwrap":false},"2.0.0-alpha.3":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.3","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","npm-run-all":"^4.1.3","prettier":"^1.17.0","react":"^16.8.0","react-dom":"^16.8.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"971f4e2a44c787624601ffc81d6e6a829e7bdfa9","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.3","_npmVersion":"6.5.0-next.0","_nodeVersion":"11.6.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-U8zRD8UF70xJp7ZWhL/fPZ7I4krRH+C0eLrsAiG+C8qxkwu7zuEqPZX19pXMFYdVO2DkSDpjshqV07wGfDo5wA==","shasum":"c8a484ebef9200f5e69db040bd67f7f16039a2cc","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.3.tgz","fileCount":12,"unpackedSize":871191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6R6oCRA9TVsSAnZWagAAF9gP/i5d+6FKjaC4NP690pe7\nKNd2L6aGzxiAIceLYkMZM7gfcUobc6rs9nZhQH4FFoHuJoNuJcTd+yi3TJfS\nIWMxj+PJ2Mm53sBQjxhJwzsrG+573Xc6bPkZ4masKnlkEIoZGwHHPfZ2uIWo\nXCdYqOcukMT7g20dER6LNgrGZLd823anOdDCdvUiYqCifMTyqgGO6O6FFAJ7\nz8+n6WDrFUmxGW+3I4aA7LbMwjOgbXKm/VC0RKHPWek+lUFlalZqtBn3c1UU\n2gP+Zq/zEd29aSDrHn5+q5YmHtVEYEsgSTV1pKRHzNGktp6xhw6f+DgqG2CT\nGC8xk/ZC95YcGZbbIm9Oa3j3qaXChV+r96FhQBqrQ5wrFAP4Gv1UmgDNCZnT\nHYUYfzTPIW68O7YtHj13TaNoGJMVk/C7HjxKHMe91XX1Z2MaQFb7wUqKkiO9\nmYT1II2kZ8hF8P6xLa1/quZgi10w3/6k1sJWIA79xxMn5NRgxaJ3mNo5HpX0\n6YhocTzCP1/lfOdKxQZrJRvexPOTQIQs0ID92F0YvIPoDoMQZAsJvFCjgoYE\nWnfk425VXulWc6kZZs8Sfg8IVFDl+jOtstk7Ouz1th2lA8/0xF/KxKgvI7dl\ndIQY1faPGETuxd5HZUeaqAY9yY0zqpdl95j//jvSHcgLh6k/0eNpPafGquUQ\naePH\r\n=p5be\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDF/dua653KVs9x0e3AMVbSPj5vfY6f5EA3a2Bkt8wJvAiEA+5qRhQgQm4k+vCvkyXNEO4TLqdf98TG+DkWosQD2I2Y="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.3_1558781608186_0.5866519630138192"},"_hasShrinkwrap":false},"2.0.0-alpha.4":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.4","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","npm-run-all":"^4.1.3","prettier":"^1.17.0","react":"^16.8.0","react-dom":"^16.8.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"236ebc98400adbb8ed7545e1eefbdf938c37a872","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.4","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-jgVanwgQlFixWmO3AVjMh0o+TD1RffveKLkVyuthaDd85AJbd8m11/shTvecqKUs9rwF8KB5vkm5/sHsRmGo9g==","shasum":"55a68473c1bebcaa62d1a3936d1870207cb35a0a","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.4.tgz","fileCount":12,"unpackedSize":1228970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8SGxCRA9TVsSAnZWagAALQ4P/1V2F53sLbpSBpMtHrFx\n37C3JoRcmWQ8MDm7saSqkluEHts+QUNObVWqQHuAMAenqGAd+j2QpQrWokUb\n7xNZZublvgj9mB4/Ll687yeWSyZZEsPZq2AHEY7MPQ/tysjSVbXpYTUvfBJV\nL9n2wf/27cPN/rJuPpRcMD754D6DKc1rzO8C0ZLDrMgrj4+qu4TTvztABbA6\nwjW83jeHtw8t8qgX9nnKmUrNkqs07hrKPWv4XaYxexn85Jf35fsBBw3fBgHH\nYQtz44eQBrLGk2JrUB7toWMLc1zBbOdOH9CNqjN6u92XiWjDKS4EFX0rIXvt\n1PjH3EQ28SEGarSk22st+ReyMzNg0cUtuodSVQnUToLfoTq3Lg9mgU18kG25\n7bNUoHEtV6A14o6+Gdf/H2ikv2NP+8+5eoAnNTOOtgwSLAziflYEDKRGnWOp\nDOoetkN9o8Nd/NVn/7Iy8zxYemc38BGOeqn+8/jNkcvd4J84LAQW9IPKcFr1\np/s1WHslCPBNp5bUncHgypS/ESuFUahShnl0JYsPXZjKZUsxsu+HsbOJgIie\nGMYOl3lKMtFCHGrTqvQ5s8GOGQ+FCZTYCfOrR183UPaRUCdb4IuQLAgEVIIH\nxn8TZ/edlONHVr3ER6bAuO3KW9MzkfA+V5PUljDLBa59Ap9C+ArVVAfgzX0I\nVVKr\r\n=S9wB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZbZWVqqVwmdwe25v1EyNQntAkgefHmZ0WYZBU2g//3wIgLen2J8mGcI1wT9O0Aexk49PZ4uF3XjtNFKY6OrsFLTQ="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.4_1559306672475_0.6801221497954049"},"_hasShrinkwrap":false},"2.0.0-alpha.5":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.5","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","npm-run-all":"^4.1.3","prettier":"^1.17.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"28cd089f532d0c49e5309a3ab0a7210bc1a1b823","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.5","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Zr2RFANBEDyiNQ1Y3u9/e5wilPHAYi9nEAkOUrENteeuruB+gVPi8m6gtC+edQNpwjdP4wGIWCaycO+JTSxAxw==","shasum":"5165821cc4d33211dcb1952f84a8e1d8e4c1b8a2","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.5.tgz","fileCount":12,"unpackedSize":1280110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAs9SCRA9TVsSAnZWagAAMDUP/1Xn/6SN/t1WvPHqneaa\n/Kjp7v6r/2HaH1s5Rasp2MsoDYTMA+Gr9n7B3KoS5osLf2wjNAJfLJMjB0ry\nn4wYs/0kI3VaPByIw0ciX4NGyyE22MxQpl6G5OlRx+FS3jHTmomPgyhTPAsm\nCcSg/ioeem51/Rvk572jjJrUaBA2OX1SuqwWoq2adf2D5wXozUyk7bUHmcv5\nFfteA/6KQh/+YtyiaVMt+cO3PucSlC9i7P9PXxM7eODa3TXZUMBb8Kk76CCN\nC1y9R8YyK6ASgOmcNaI3hNnUmMmm0sdTOMKJhlUe53cyrex/CPSoHcs3Eglz\nL1/4Xha1KMsd/ruTySpXMqw9sotkenkw8dE2/F2hVamHeUOAaj6zczs3XMZW\npHv7+0IvdCs2tOuYKZvJ1StsQpAEz3ygY5en4pm38tUcadY69ivbekjAb5U5\neosQCWR2zien7x1G2ZSqojZPCeR2Y7CTX/qNyi+9OpZgme5+D5maMhhvc5im\njoeRbPKCLC6A7jx2YaWgOQp5h07cE7Ms69wGHcYzJk18fnf2Vj3EgnekkSuE\nJBX308eW35iSZBFB8qN2Li/3llmRZrI8omPpa/zFsLjm3/EhScAZywZKXQ+i\n00n4YMvO4N9xH4gEI7079kNflV6/VoVjymvGtcDgNUbrYlGsZjI1MK10qlhT\nKhwP\r\n=zUGa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB0uqj2gyTD3RtjiAlx5zlG7aygQaDNRS5elfxlTV0+wIhAOdV/+2hn4XSS+f5n5NTRPvxzU3nUUveuQto0/O6LJ3Z"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.5_1560465234057_0.1501148557592804"},"_hasShrinkwrap":false},"2.0.0-alpha.6":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.6","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.3.2","npm-run-all":"^4.1.3","prettier":"^1.17.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"ae5703ffda0598dce8822d667944d935b9418329","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.6","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-GuCtK9e+yc6zdjnEeBsR10zBtqSF8sBjnyATCdzWqzhtcZeHEkLE9YDfQmiKDjzN7eXeSGdQb8CeBK1ZOR5ksg==","shasum":"bd403ce81f5b51931999c7fdcf206ba92af52028","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.6.tgz","fileCount":12,"unpackedSize":1287179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB6OeCRA9TVsSAnZWagAAipkP/RNMAMUcvsFSQ1FDCnUa\nfoi/JKhCGNackkkqWoRxWaloddBFgU+vx7/d3l0MQc+daAT2Petnqo2v2tYP\ntyBBTtFKGH/2joPrHV5Gg8d0UMIf5gTK5NSJZxg98qarYixxK7raxc1hzjOT\nT+5/OSOe9pvkbUjmfO6JfJpjhvtCEv3A0+I9YanOgwH97rq05GiJrcVeIFaa\nyZF1JO8ho/7u0/BMkYYvR7IJJTZJnk8HN5uKefIgVBqxXfW8UlqLuPALy8oL\n+S/TSHdkASBt9xUF7CJDTy45FeCiuClH9lOiIsdR2rmUIVnS6dwC4RWKF2VV\neVq4fnQoKCt1W8v2z+aqZ71oLPrQxt6bOZrVJzer+Mt9M8drFB5sqItVIV4A\nAEzl+aWkbUCHOeVfJeVuyYZGCvrjSFimyoByz/5PxSOB69MSE2TbvFczVA+t\n/8kUIL4gt1gjrBzpiFtdVlLFFVmyaQsbRPM1UDr4DxDqfjuDcRQzGcogyGJX\nw7p0BVzZ0b+nh5EcHfgEroSjBTAI90CUgaZ8RMmp5JvHb6my+3Yo+Y4jOSXN\npfEW0vZXWdVc/lu3e3sD6YxwZTfNkIVzGciFor/s235ZyObmIInPZq4Udb44\niwzMNa+gahfHUW3Kuq0eurW/WpGJc4S6oJXSQNDeGEc81/0nS11LAdHwORjr\nvq11\r\n=EGha\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpi5/dwWr8OnFCy3qnRbmg8VQllTziPZDeRkwg/1aocAIhAPfBP1hLxp03co3MFaPEci15dHrh2t2RdDAJqLv04LXH"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.6_1560781724661_0.11715886379924778"},"_hasShrinkwrap":false},"2.0.0-alpha.7":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.7","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.4.0","npm-run-all":"^4.1.3","prettier":"^1.17.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"aa70c00884886f23e8faa64e16635e0e4551fcde","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.7","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-pZMQPdhhOVTstps9d/oK/XUsLja7rTKxv/E4WRK+LXFy5CBH9JLuR19jj22LlKwNZQRlMAT9D2Q3MXqVkvHsIw==","shasum":"fdc8b7f846c10b25f9f3091b99ef5091a65c56c7","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.7.tgz","fileCount":7,"unpackedSize":1761748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFKGBCRA9TVsSAnZWagAAr9IQAIPMEqwTLHzilYML6f/q\nA8ilDJJ3nbo8jgqUcQY59WEkoOwO5Brbjrmdgwq6bGwbTWnAyiucOii3g/t1\nSSJcex8LLoxhWeUI+gwqfsy8Fc5xrV5hZpy0ytd55k3ZK34TFItJyup8AuSe\neMUPv/A69umlLFETCFK9vljFxDYkX+F+2jMGK9uW9vpIQtecdlX/ZI9pKejh\n4lnOn6RvYiRAVDz5MaryXhS3iLsu5ytVLWsGKNz5cRwpFn3Fqjjx+ohr0AjE\nNpRKR8g1Iq1yClEHP+tVEoxiTXRir4Bg95v+Sn0XtqKdUQsL9EEyw9XaNjp2\nBXP2xFHKQStaWAnvuf1B5wTq4v8o1PoAMnr5ECsKdFTCm6ueE6Pd54TEeMsm\nowa1zEAOxwhJOvDW5lptq0BMwZah//IozLBxqrRUHWWbsm+6RmOsFYAKfRQV\nivi52OrCPB7PhvRJQgk01Vnjd8Vd3y47kUG2LXakqPB6Rja40uAWHd6QOb3S\nZtLzbHfUQCZCejdI54PwPoBnIj4x/fjnENETlatbrNoZUXaJE0PB+5/8LHfL\n9eI18yaT5aea/9QsIQ42wI7AJ6FSuQglrlbsMr1ZzFK6e2mCbGMz1+dwzDye\nBwj2nNeIla9oP1C+ijlcZVWmoCoNFNRM6jg6YYlCHC8rWvnn9Oo4TCTnYP/x\nTEm2\r\n=Kb42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7a/LZxCh76CV17VWR2ZIlM4kZ/mEZREh/w4VtKK5vtAIhAMU8ENiyK0uaGJM9lNifC9L6ws6xvr/f1d/yKoBSr7oI"}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.7_1561633153324_0.6879799288647457"},"_hasShrinkwrap":false},"2.0.0-alpha.8":{"name":"code-surfer","description":"Code transitions for mdx-deck: scroll, zoom, highlight and morph code.","version":"2.0.0-alpha.8","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"build":"rollup -c","start":"rollup -c -w","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 react-scripts test --env=jsdom","test":"run-p format:check test:all","test:watch":"react-scripts test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && cd example && yarn install && yarn run build"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","mdx-deck":"2.4.0","npm-run-all":"^4.1.3","prettier":"^1.17.0","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"peerDependencies":{"@emotion/core":"^10.0.7","mdx-deck":"2.3.2","react":"^16.8.0","react-dom":"^16.8.0"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"230c145e7edb24bf3692d7985404cdccfeaad6cd","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.8","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-6u3LGMkFQSYbg0KNvpyp0EtBwZibBwPGIcd90Gjvb0UXjShG80lK0CTMmTWkKc1Pnoqk6UJAOPktA69aIL+GYw==","shasum":"b3c421419d1600695b8c94f10ed4a97be7023cff","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.8.tgz","fileCount":7,"unpackedSize":1761706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFKbdCRA9TVsSAnZWagAAa2MP/jLg5YR6sKfuqxBL1JvF\nn5i0eQojyB0cJN+R+hCtfWVVcVS0xXz8hFD1qz484knpvLyny/xo3qZU8dlK\nFCB5CX0aFaBeUN43r72hV5uJsjJfz4Z6FK63WpDFozqLoIDAeouU3XJ7vyf3\nWzGYJzQQoU6rhP/SDffJCzY2F9n7htZhUrhqXn56LpX6PG2UKOudVJt690ix\noC4zH3ZfTHXVkwVAeVAC2p/54I0n8bZ4wmgDkMCvsqy/AMHUUlY3kqXZsyYd\npSqYx17jAuIEGcfWtBnFQIp0Jjjsu10Zjq9tdA3/2vDCQo2XJY/VsjyPTPsJ\n5sLFu3TQEQTQW53/iiGcIG6zv+PhhV21pG6668qeQrpCn8yHvfI7P6w+1px6\n2nh/ffbsCoI4yfrYlym4gSpbr++joMFbXE4qGeidig3RNOjbhAKnEDOsR5sh\n/jowvQO8BFH6dG90X5mQBqeeLB/nJrOIvwDMXG4tdsDfilw9NAHnymbeBoYC\nLlF/ob5k/zt2GISZlPn9+2mpEyBh8oH+CGZ2O6PKJymjGBVlhNrrEov1D5vi\nIoh26SmODCRMT/KSp5E9wO8xAfwk8ForBwgQWAgnztOi6hrbWVAC5J1OzIKS\nREyOyhyDz0VYt+rIufcwr1+h2X1P8MWLIfF9ty0dbC8qZwrB0azWshShzHz0\nXkgC\r\n=v7XW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoQmI2dceksoe2aGknC5H7mCiZrrwZ+TZa7jvoojkz1AIgYFdlaEAWG4k+t01s+xVMHx5Sj5nHdaMj1gIYG2DvF3A="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.8_1561634525124_0.859589041743797"},"_hasShrinkwrap":false},"2.0.0-alpha.9":{"name":"code-surfer","description":"Rad code slides","version":"2.0.0-alpha.9","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build && tsdx build -i src/standalone/code-surfer.tsx --name standalone --format esm","start:standalone":"tsdx watch -i src/standalone/code-surfer.tsx --name standalone --format esm","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 tsdx test --env=jsdom","test":"run-p format:check test:all","test:watch":"tsdx test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && node examples/build"},"peerDependencies":{"mdx-deck":"2.4.0","react":"^16.8.0"},"dependencies":{"diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@types/diff":"^4.0.2","@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","execa":"^2.0.1","fs-extra":"^8.1.0","husky":"^2.7.0","mdx-deck":"2.4.0","npm-run-all":"^4.1.5","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"bdd65f38da001434d21b754a70e25201c2fe0e67","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.9","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-NlNssXMMdEiJXXc/1Xjbbab2prM7h9TkT0wCoRZ2ypBi2TBpURIcHtguVoWxxmtW0Qn/dMWS3fYyEFtBZRXNOA==","shasum":"af93db3a46dc9bdfc78caa24bb528e7ba103030d","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.9.tgz","fileCount":12,"unpackedSize":850322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdIctSCRA9TVsSAnZWagAASQMP/0REhlVuhwQl18LRLrOO\nI12a7diDOpa8xNFYmvkfJ09aHtYSRxcAU+0tAzhmSAijlOfveFr45JCq8CLC\ncCJCHHiOHcd8In4hGIkGuv+jir5WTb78yuhA1MCePHyP7kZqxzp/YshPma6C\n6hxPQBrvW4PhFp5rX4w4sIycc3mg73LtztCyk0dQ07xXcs25jqAp62SJnM7z\nvHk8liyeXYZ77ZVhjOSgmNEGCv6tqaTJVJlvO+HgCUl1+D1/UWLjB09oTxJJ\nZtmQbEUhA9VhRVC9UsgiEjnetvSo2EEoCZf5pbfaFOXp04mwc+119CdjuwmV\nYgUCTo0IfXIoKzNmwKgMTJhxwbvtzWlAAfKUTecIy8oC1IxQqfeFt/Jh/n8a\nHfF0QFQp80btfR626ZWPQCcKWTT6wNoOnBDetpFdtu7OfG9miVzDktKoW66F\nEACs5T8oEe8qDlchoHdtZUhKkXv/+p00btZBQzQ2Qga8l4rMhYNApyc0SNuz\nSoXwtAWBhKPA3oLxOQxTKGglinH/k8g+ayz6BgyZCy+Y/3LktZYPyDcJnTuy\nDmkQlMzeYphE6+KM8lRRfGGiFg+F7Vl9UgC0LVcOf9BBShAFVaqnuwVo0/MY\nhjAEKTstC/foRsSGyshuWlUM1jCS5ukeAUAI6HgszkfvSLDj5cGrtjeqnMqB\ndscB\r\n=McHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgJfYIGys/eqTeCmw3euyTWgIM+V7tCsT5b6E3B/s5SAiAtf6fAVLqWlMa/4fppnURHj+xfuttfTfn8IdfeEIrkPQ=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.9_1562495825132_0.2470946046791791"},"_hasShrinkwrap":false},"2.0.0-alpha.10":{"name":"code-surfer","description":"Rad code slides","version":"2.0.0-alpha.10","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build && tsdx build -i src/standalone/code-surfer.tsx --name standalone --format esm","start:standalone":"tsdx watch -i src/standalone/code-surfer.tsx --name standalone --format esm","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 tsdx test --env=jsdom","test":"run-p format:check test:all","test:watch":"tsdx test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && node examples/build"},"peerDependencies":{"mdx-deck":"2.4.0","react":"^16.8.0"},"dependencies":{"array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@types/diff":"^4.0.2","@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","execa":"^2.0.1","fs-extra":"^8.1.0","husky":"^2.7.0","mdx-deck":"2.4.0","npm-run-all":"^4.1.5","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"087cd8ee5fbd6a438d4ccdacf6a2a61bc9a8fab2","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@2.0.0-alpha.10","_npmVersion":"6.4.1","_nodeVersion":"8.16.0","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"dist":{"integrity":"sha512-djD5PJBtNjeYYw57xXUohUhn0gihQgNdwOQdseUCp5R0pOKdb3Rohj9qkprLuwSrdNjnL1OHs5R4w9b1x6Atvg==","shasum":"c75601153484c8ff06b9051aa7af8a8f6cb130a1","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-2.0.0-alpha.10.tgz","fileCount":12,"unpackedSize":850716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOZf0CRA9TVsSAnZWagAAqacQAJgHgiPXoC6LguDJmj9G\nbktVlB+xS8/9KgPR/bsQGIeV+Rk8BgQcgCJlwPtAkyOg4zMrqMSXQkqFaVva\nSYdTHerTGada0qhGw/C044PZ10BD6Bw4aS9xKNPkV/BhjTto+VbgoC7yFDMP\nws50D+j4vCzCKNxW+LY0vZdN0HEQRHvfPOpW2MlXIlNJ4kn76OjfxKcyocWs\nSmkK54x50cn1KoifpmUy5TPQXofjE+eEgC5aSmc6aLjHJyRskg8LOg+i7vkm\n436kXtcWkYnL3UZd5dJIm3k7GsJz5nNi3Oili/YuDQhesd1UGWeq/Gw1v4+M\nS2sqA2/vn6EmMwc6M4aEe/5m/LhbCf0NSj9kXUWYDEEN4vUxkDtxRzHCIn26\nZC4rWMSKoVRUTqHY8twb9RmyxwIFG9op2Tgx0yOzxKZ7LAw7M5NPSIaPqnKy\nPy5NS9o4dXDqADqUsphdN6u7P8PvIh1zhN+zn5aDRhxLe+bNpo0uBQjTCH1K\niVYD76Mz0KtxyQVbgWCsXkAmH9OKHbb47nSm0tyhEfcbYfFTA2EhpcXkuNfQ\naCkpR6eSk4vetUItPIRBNSPaBeXGt+Y8UgbWWZnhThMr7G+RahEzc0scziwl\n/MzPXPmb5XY/UmVwNo32t6JhO6rexnyJflEdKXfUIiteaOqDu3DVJmB/Kedk\nR6hR\r\n=kkG3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADX38JOSFBFDYQ9x8fXyXcB4fn/cu78LmeBDKX1d+zqAiAWDs2NL1J3Fmxq8uyeuq2+SoA/FWoHJ2y+LrQbFzm0RQ=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_2.0.0-alpha.10_1564055539614_0.6225090257462036"},"_hasShrinkwrap":false},"3.0.0-alpha.0":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-alpha.0","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build && tsdx build -i src/standalone/code-surfer.tsx --name standalone --format esm","start:standalone":"tsdx watch -i src/standalone/code-surfer.tsx --name standalone --format esm","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 tsdx test --env=jsdom","test":"run-p format:check test:all","test:watch":"tsdx test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && node examples/build","demo":"mdx-deck examples/basic/deck.mdx"},"peerDependencies":{"mdx-deck":"3.0.8","react":"^16.8.0"},"dependencies":{"@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@types/diff":"^4.0.2","@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","execa":"^2.0.1","fs-extra":"^8.1.0","husky":"^2.7.0","mdx-deck":"3.0.8","npm-run-all":"^4.1.5","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"332006cdeeb96317144edd5a8a2bcf3944de32a7","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-alpha.0","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-lgYKXAvIPg8oXsUdhIdUP7j2INZhPm3snwbYF8eVH2nbcQfjk4Ti7CMObpAQCxAU9olJT0xr4XefknRzO9FpeA==","shasum":"0cbdf2be6dd6c4aea500301f03bae094bb9a8922","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-alpha.0.tgz","fileCount":12,"unpackedSize":787007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTVzLCRA9TVsSAnZWagAAx5YP/jzgFIrpKXPKu/2HOsUs\nyGmrjSsV0sHQCsYKjJ5od20wDUzwu3AfJFbObUUDiyhVmSCSI+QDJmHKbAxf\ngNsMPBaZMwhGp4jCxdkESz18EeGsldCEJXDFjD9ff2mRcW0RtQSmdaOB0PlO\nM9MXj6ZdUSBajtNUUOed9ftcVJewFAn3NfaiXIy5TIYqcGV/1n2ASih882wx\nBhJ2297pG9Ciny8peiuLw8/PTkf8F92Za2JM2+RAL3mp7Y7/RGxMg8Ix4yj2\nY3KDXiE4NDOJYX6d9vG3QD/h8aFEDPVYi3c4SPINdN3DsAaoCQ4JRCeamewS\nbV6aozRKQ4OOIJan6nUEFIlDsJSP/Gm93NRgXnaOYOTle8l+TnBux0FLrweN\nEdcVXmCNk+/p95ctHAYuSCuPcyb/D3VQ8hCeulbLLUMAv9XJGYhmb6LPkngO\nn4xqS/Wcszx/3iRaZKWc3BlELLtKDC7j0o7r18ylk+drPzRPkkwTs61fQ+P0\nznOUQDQLwPrR1Ztq5awk3pCTfSsWRiEo6oOgdu9q0KXfvx9S55mLUnBqqY3t\nMNawqrRbxAGxLIpnYMk42OwAY0qfj4XI1q8eq1Ks4WWNTgMULbvdDvgsMdpD\n7wPwuGR62a3UxuggEim2RXKVqEqwvc9+RnoVsbSRcRB/lAaL0YsO0zbfQ41l\nH3KW\r\n=+UbG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDO0fp68YJFzDep/c/h4O2WtcqFE6+43HBeY8boNXNbGAiEAxBjSlK+RiIr34Cq1MNvD5BDv9B1KZzUqqURulR3bPK0="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-alpha.0_1565351114879_0.6650881144008058"},"_hasShrinkwrap":false},"3.0.0-alpha.1":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-alpha.1","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build && tsdx build -i src/standalone/code-surfer.tsx --name standalone --format esm","start:standalone":"tsdx watch -i src/standalone/code-surfer.tsx --name standalone --format esm","format":"prettier --ignore-path .gitignore --write '**/*.{js,jsx,css,md,mdx}'","format:check":"prettier --ignore-path .gitignore --check '**/*.{js,jsx,css,md,mdx}'","test:all":"cross-env CI=1 tsdx test --env=jsdom","test":"run-p format:check test:all","test:watch":"tsdx test --env=jsdom","prepare":"yarn run build","predeploy":"yarn build && node examples/build","demo":"mdx-deck examples/basic/deck.mdx"},"peerDependencies":{"mdx-deck":"3.0.8","react":"^16.8.0"},"dependencies":{"@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1"},"devDependencies":{"@types/diff":"^4.0.2","@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","execa":"^2.0.1","fs-extra":"^8.1.0","husky":"^2.7.0","mdx-deck":"3.0.8","npm-run-all":"^4.1.5","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer <🏄/>\n\n![](https://flat.badgen.net/npm/v/code-surfer) ![](https://flat.badgen.net/travis/pomber/code-surfer)\n\nReact component for scrolling, zooming and highlighting code.\n\n> If you like this project consider [backing my open source work on Patreon!](https://patreon.com/pomber)  \n> And follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## How to use with [mdx-deck](https://github.com/jxnblk/mdx-deck)\n\n<div align=\"center\">\n<a href=\"https://code-surfer.netlify.com/sample/\">\n<img alt=\"sample\" src=\"https://raw.githubusercontent.com/pomber/code-surfer/master/other/sample.gif\" />\n</a>\n<div><a href=\"https://code-surfer.netlify.com/sample/\">(demo)</a></div>\n</div>\n\nAdd the dependency (and `raw-loader` if you want to load the code from a file):\n\n```bash\n$ yarn add --dev mdx-deck-code-surfer raw-loader\n```\n\nAnd then use it from your `.mdx`:\n\n```jsx\n---\n\nimport { CodeSurfer } from \"mdx-deck-code-surfer\"\n\n<CodeSurfer\n  title=\"Some Title\"\n  code={require(\"!raw-loader!./my-snippet.js\")}\n  lang=\"javascript\"\n  showNumbers={false}\n  dark={false}\n  steps={[\n    { notes: \"Start with this note\"},\n    { lines: [6], notes: \"Note for the first step\" },\n    { range: [5, 9] },\n    { tokens: { 9: [3, 4, 5] }, notes: \"Note for the third step\" }\n  ]}\n/>\n\n---\n```\n\nA list of available languages can be found [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) and it will default to `jsx`\n\nMore options:\n\n- [Theming](https://code-surfer.netlify.com/theming/)\n\n## Related / Credits\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck)\n- [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [prism](https://github.com/PrismJS/prism)\n\n## Contributing\n\nRelease new versions with:\n\n```bash\n$ yarn build:packages\n$ npx lerna publish\n```\n\n## License\n\nReleased under MIT license.\n","readmeFilename":"readme.md","gitHead":"7159b74be7572befbfc3512146756a3ff683d813","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-alpha.1","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-GWQ/bnxpfQj9ca3XiiM+pFcZVazMzlC//6z5gpRgmevohSEMUCyOrHrBJsI04EiizyMrgGXKTBdpYaoTv7dpYA==","shasum":"a4d8e81259ab7c26628c32fd28c025c039caedb5","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-alpha.1.tgz","fileCount":12,"unpackedSize":799440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUHT3CRA9TVsSAnZWagAAXrwP/R3NoxCx9GBUMlY+vO55\nR3klFmDl4y5sE5ET7/8Ivu8g92RepM4abVviCDI42kelPY+5Nb0gUVgiNQ9o\nyz/a2i2yEcJlRVjPZl39razXn2aSvqeEwOt4IRMHQ0dhXBI1tXFlak3uhwP2\nUJ2FC6TJEtQsVcg5117kJG7gmut2Th1srn6VBvKeBXZFN6QPcy97CH7oiB9m\nh3fnOgOXtqhJYtNSmH1PUCLf1EIwmy0jhrZafOTrrAk6faxi4m8ym7xd5OJb\nE366O8mZeyFtG/WNsT98GwFhpwG1CvSmNSybJyHWYNbrGwyyHZTMBc1PUbvG\nENWYefK5Ldc2GeOmJZ76ICXslb9OfEun3iZmcwM2gRwEfvcDjPH65bkITzKw\nIqrdOPSX9adA/abf//1qMTDlbniu+epDHajeachlXEk/oQ0q7bsVHqoCfN14\ngXjdOuGkJZF2QoPB6dQyn7v32HKVsE12kOaXYkJNqEVRpUjaUGR8xfWLLXVJ\nEstA+3BP5j3ZTlmdD5QUa1xjlVOmL5SCwiCHNcsHffzLiVvAeMPHKvmcwqEv\nnq77Y7jnqLlkFwhKoydr+CmFs7MUpQCfhskVrmBXbDXGLLXcmkcNfEXK7Fyq\n+U1aUQw7H3ncM6xfkAVrZTDl9NJ7kiC/TjuJL1t2il48hmfP8nRjA4CDgBaa\nsSYB\r\n=WhYS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmRowkxGA6Irl7G3fH5JGUSPru2HXj0v+yGK4796MFSAiBcATuJfeCdJWgZLlHWVGhk+Qj2Vd/9NODeynVN2veK5g=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-alpha.1_1565553910708_0.8666489148598806"},"_hasShrinkwrap":false},"3.0.0-alpha.2":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-alpha.2","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"*","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer\n\nSee https://github.com/pomber/code-surfer/pull/58\n","readmeFilename":"readme.md","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-alpha.2","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Y1trZoT1xCzxKIZxNkoofktxEjs7OU3B96RTiueQlXKBy8mMOKCZ/zFscYYUviZPHxzDS6MpciovUYWGjo+mDg==","shasum":"2886d75e21be570dd1a29307d649e5b6caa98ac3","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-alpha.2.tgz","fileCount":11,"unpackedSize":277568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiAZtCRA9TVsSAnZWagAA7GMP/RpPIjbHPnS+wlCXOnTW\n8A3vaYfK/6gCq9g/lOArxQ0q43sVkxmnY6WeRI7VifaW/PoVABBCWuJ5Asog\n8hZr9yyqAtiWW5ChDNsz+kem8GTU5ZGUoInUGCl0WEU/Ba+sfQlUAACRJxWG\nax4cM9vvRRANPZTUuWVX8xXLOdiMmabYL8I9sl7XGO768zFi86WLm4biVq3G\nEBMXpEndkV36HMmopeHj555j5lUwDtukI0Qq1IJxOQfx4PGRsn83zgt/2xYx\nod6zes6ziiD5sL2Mtxd4DN1c4VrQinwOKFzFTcKpHEJZxrjuv/9zjYTLFAuw\nS4GJ043WBlSPG/5o5sZfe13cpoHYP/eaNFdHmgIhtej9QMOEekAjE2M+JkhU\nDfzdRCjxrlxZLkAYqj5+zeuJicBqO7o5X+JmxQp5cPXMau3eJG2cm/gLumbt\nrqwCtW3NPY1KVEa2jC4pKVCvk/scJjd/jcqvq1t0Zzfyi/HZq985kVgfLpui\nQUa8TIv2egNU0t1MEb3cEgZ6sxmkWPO2zDnP27qawXyqafYG+uiZy3E3KWfn\nKj8BUvZth2tnD7zmFJp3B4O0qcoOl4SUC9S/wIZ+3bXLYqoQ9LTwITYBbAqP\ntOf0Fr/kFqEMix3bh3KFj/T0FGWjJmOBj+6PkPxvnCmyJeJeYa1LDLI1ZXs7\nuiOn\r\n=NpMT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQGEGyDXp0zOPOQ47Z6vCtM3OhU+Wb6CHLIOxI9Ec9OAiBwyzfHQzBsPGHfkS104IJH/KuMsB6EKqMDy020TrLpmA=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-alpha.2_1569195629031_0.3688862217277087"},"_hasShrinkwrap":false},"3.0.0-alpha.3":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-alpha.3","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.0.0-alpha.3","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"# Code Surfer\n\nSee https://github.com/pomber/code-surfer/pull/58\n","readmeFilename":"readme.md","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-alpha.3","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-zNx3XSXrG4BwPW9jn36aRQpHXewMaQBcpUDoxASxlTUxlgMBxYe9GJzU+OFxE4mfzgduS1/dJFkFopxW9wkLQA==","shasum":"a1ca71f5156284cc6db22c048c6c3c20f05e8775","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-alpha.3.tgz","fileCount":11,"unpackedSize":277580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiDAFCRA9TVsSAnZWagAAngwQAJt+IdcbPYtjeNqUMLzN\npKl2KK5znkABgl3bQujF8lS+Q2zp3OpWjoW2JIV0Vpcr1jc3zycC7uEkVC/Z\nKPNmnFDJPTnqd2qI2JAhCtdvdjvbaTDgLRfPU1+OWD7xOyp6yQVftYoDQj6H\nem6gjv9+FP36idP5GIyepSyAXv20jsex+4UJqgrepX7GUiLNcjustLFuLGAv\ndWMOe76H6o2KKEYqxam862Sv7xxWyv7JE2h37e18kmKVN97Drbe9r1TnJLbZ\nxzv0INVzd3Pht+XY1XLgDoqoS9CGPb49FW77hoUs1PBWntg5AAUbjiitQ6Pi\nvT2WELdGJ/wcwHVj2O/w5ofcdrRVbVzGiQ0cyoLZOhX96jHkmIdeP8UZbsC2\nCYKm+A2evhsiZUvdm0V7WsLrKaKOBzoTizk4kLrJM/u7su8kxDwDh5uWJbGc\nx/RztqmjdA9QL+ozWzQX7NDuGmnWGThVkQF/jQsXoi2NfLdPGm+fA2awWkc3\nAGm6zQbonlRMxoZbQT+lcqdsngzWbpnOCWxSrplWfodVsgL+bQelwGeE0Zrr\nENol0qTftXzG45FskNQqVW3VZ0cQOfuKnoIwTnMfmFGwfD5bXIVxzk9tqo0e\nVS3Kp3T+A+ZY+WF3X0W+HT/E4pFMjT13sOZqcw5YKSJfsilHtlG6rfazN8xP\n5U1+\r\n=6/aG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjQoPUpgDV59RFKW+/Jw40unEuDdU4NSmZVTfsznRH+AiEAzfapU1zBJ2ZmyPuY33rwfJbv3dbkHS2XGUXkaXuE0DE="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-alpha.3_1569206276787_0.42724411085050384"},"_hasShrinkwrap":false},"3.0.0-beta.0":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-beta.0","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.0.0-beta.0","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"<div align=\"center\">\n<br/>\n<a href=\"https://codesurfer.pomb.us/demo/\">\n<img alt=\"demo\" src=\"https://user-images.githubusercontent.com/1911623/66186294-49bacc00-e658-11e9-8d73-e4e6d8df476b.gif\" width=\"600\" />\n</a>\n<br/>\n</div>\n\n# Code Surfer\n\n> Help to keep this project alive with your [support](https://opencollective.com/code-surfer) ❤️\n\nCode Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to [MDX Deck](https://github.com/jxnblk/mdx-deck) slides.\n\nTo create a new project run:\n\n```bash\nnpm init code-surfer-deck my-deck\ncd my-deck\nnpm start\n```\n\n## How to use Code Surfer\n\n> It may help to know how [MDX Deck](https://github.com/jxnblk/mdx-deck) works first\n\nTo use Code Surfer you need to import it and wrap the code you want to show inside `<CodeSurfer>` tags (the **empty lines before and after the codeblock are required**):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n# Deck Title\n\n---\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nFeatures:\n\n- [Focus](#focus)\n- [Steps](#steps)\n- [Title and Subtitle](#title-and-subtitle)\n- [Themes](#themes)\n- [Custom Styles](#custom-styles)\n- [Languages](#languages)\n- [Columns](#columns)\n- [Import Code](#import-code)\n- [Diffs](#diffs)\n\n> Here is a live [deck using all the features](https://codesurfer.pomb.us/full/) (and its [mdx source](https://raw.githubusercontent.com/pomber/code-surfer/code-surfer-v2/sites/docs/decks/full.mdx)) just in case you prefer to read code instead of docs.\n\n## Focus\n\nAdd a _focus string_ after the language in the first line of a codeblock to tell Code Sufer what lines and columns you want to focus.\n\nCode Surfer will fade out all the code that isn't focused and, if necessary, zoom it out to fit it in the slide.\n\n````md\n<CodeSurfer>\n\n```js 1:2,3[8:10]\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nIn the example above `1:2,3[8:10]` means: \"focus from the line 1 to line 2 and the columns 8 to 10 from line 3\". More examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Steps\n\nAdd more codeblocks to add steps to a Code Surfer slide.\n\n````md\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 1\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\nconsole.log(4);\nconsole.log(5);\n```\n\n</CodeSurfer>\n````\n\nYou can change the focus and/or the code for different steps and Code Surfer will make the transition between the steps: zooming, scrolling, fading in, fading out, adding and removing lines.\n\n## Title and Subtitle\n\n````md\n<CodeSurfer>\n\n```js 1 title=\"Title\" subtitle=\"Look at the first line\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 2 title=\"Title\" subtitle=\"and now the second\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Themes\n\n[![Code Surfer Themes](https://user-images.githubusercontent.com/1911623/66016573-97df9c00-e4ad-11e9-9095-225d5c9b46a8.png)](https://codesurfer.pomb.us/themes/)\n\nThere are many Code Surfer themes available on the [`@code-surfer/themes`](https://github.com/pomber/code-surfer/blob/code-surfer-v2/packs/themes/src/index.ts) package.\n\nYou can pass the theme as a prop `<CodeSurfer theme={someTheme}>`:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\n<CodeSurfer theme={nightOwl}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nOr set the theme for the whole deck as any other [MDX Deck theme](https://github.com/jxnblk/mdx-deck#theming):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\nexport const theme = nightOwl\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Custom Styles\n\nYou can write your own Code Surfer theme and change the style of the code, title and subtitle:\n\n> Themes use [Theme UI](https://theme-ui.com/) internally\n\n```js\n// custom-theme.js\nexport default {\n  colors: {\n    background: \"#222\",\n    text: \"#ddd\",\n    primary: \"#a66\"\n  },\n  styles: {\n    CodeSurfer: {\n      pre: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      code: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      tokens: {\n        \"comment cdata doctype\": {\n          fontStyle: \"italic\"\n        },\n        \"builtin changed keyword punctuation operator tag deleted string attr-value char number inserted\": {\n          color: \"primary\"\n        }\n      },\n      title: {\n        backgroundColor: \"background\",\n        color: \"text\"\n      },\n      subtitle: {\n        color: \"#d6deeb\",\n        backgroundColor: \"rgba(10,10,10,0.9)\"\n      }\n    }\n  }\n};\n```\n\nAnd use it in your deck like any other theme:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport customTheme from \"./custom-theme\"\n\n<CodeSurfer theme={customTheme}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Languages\n\nCode Surfer uses [Prism](https://prismjs.com/) for parsing different languages, so it supports [all the langauges supported by Prism](https://prismjs.com/#supported-languages).\n\nMost popular languages are supported out of the box, for the rest you need to import them:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport \"prismjs/components/prism-smalltalk\"\n\n<CodeSurfer>\n\n```smalltalk\nresult := a > b\n    ifTrue:[ 'greater' ]\n    ifFalse:[ 'less or equal' ]\n```\n\n</CodeSurfer>\n````\n\n## Columns\n\nIf you want to show more than one piece of code at the same time, use `<CodeSurferColumns>`:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\n\n<CodeSurferColumns>\n\n<Step subtitle=\"First Step\">\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n```js\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n<Step subtitle=\"Second Step\">\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n```js 2\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n</CodeSurferColumns>\n````\n\nEach `<Step>` can have its own `title` and `subtitle`.\n\nYou can use different themes for each column: `<CodeSurferColumns themes={[nightOwl, ultramin]}>`. And change the relative size of the columns with `<CodeSurferColumns sizes={[1,3]}>`.\n\nColumns aren't only for code, you can use them for any kind of content:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\nimport MyComponent from \"./my-component.jsx\"\n\n<CodeSurferColumns>\n\n<Step>\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n# Some Markdown\n\n</Step>\n\n<Step>\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n<MyComponent/>\n\n</Step>\n\n</CodeSurferColumns>\n````\n\n## Import Code\n\nInstead of writing the code inside codeblocks you can import it from a file:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js 5:10 file=\"./my-code.js\"\n```\n\n```js file=\"./my-other-code.js\"\n```\n\n</CodeSurfer>\n````\n\n## Diffs\n\nCodeblocks can also be diffs. This is particularly useful when using empty diffs for code that doesn't change:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```diff 1 subtitle=\"log 1\"\n\n```\n\n```diff 2 subtitle=\"log 2\"\n\n```\n\n```diff 3 subtitle=\"log 3\"\n\n```\n\n</CodeSurfer>\n````\n\n## Examples\n\n- [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)\n\n## Related\n\n- [MDX Deck](https://github.com/jxnblk/mdx-deck)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [Prism](https://github.com/PrismJS/prism)\n- [create-code-surfer-deck](https://github.com/pomber/create-code-surfer-deck)\n- [Gatsby Waves](https://github.com/pomber/gatsby-waves)\n\n## Support Code Surfer\n\nYou can help keep this project alive.\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/code-surfer#sponsor)]\n\n<a href=\"https://opencollective.com/code-surfer/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/sponsor/0/avatar.svg\"></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/code-surfer#backer)]\n\n<a href=\"https://opencollective.com/code-surfer#backers\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/backers.svg?width=890\"></a>\n\n### Contributors\n\nThis project exists thanks to all the people who contribute.\n<img src=\"https://opencollective.com/code-surfer/contributors.svg?width=890&button=false\" />\n","readmeFilename":"readme.md","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-beta.0","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-yZUHrJCG7uIUJyYONz33ULbbCo8J2pD3mN2rLpmbTYqZ6mADNjW6s7Hxg6FZlYZeRFO/ZOndcoG5uKlYKXwAww==","shasum":"9ab7a2409953a53f3cf5faf3e1764f49e07c3be2","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-beta.0.tgz","fileCount":11,"unpackedSize":274498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl6ToCRA9TVsSAnZWagAAipYP/iMhyX2tGdwBcg+q7PxY\nUgcZiph60XQudzMw8A/crB0G9m41IauiRcJZNt0N9jyNCqaRZbhl+QFGaHhr\n7StXBOMovUlD4sjbQi9EdlcDOtQc5hAQvvykO9BisBD+5nqyV/mdZRRpklV3\nNQTxrVucSQvxCy7BkVo1sXfAKcBkAAMLxeTy38ZUVrGvoVNrbgzRnU8dwn+D\nT1nift1r3F3M6unQ2NKkXQibX3l/dKn9vUzM2Vzs+sM6PblNbqMcuGgto2uH\n9aI+yEtnSrW2w3UXwdi+RSXtzV3sTP6OWkhjuFYd6dfI+fC2GzRwOcWe3020\nhirWCs5sAAchh0nGmCAxFaiVD86/vSoFf15sxHOjcqUmuPB7lXnHsKq3wPWJ\nIybOGMjoqZiFrTIV5iD8QQsgc0pZFfduQ+4BIAP3PcynOElyF4k0GJDxUA1N\nIx/Cbu6MZLk0AUZ5bYfZpOplgl9MWz+4WJyoABMa3c9EJkssDYMd6JPf6Zqi\nADCDaIvYHJHqtKMIKFN47M3alT8OXphY/ISEOf7nFeA5fantoUpp7UBGEmIh\n16x2H2MoP+Jo2s/AOkZqyuRWPM/92vgtsVQXO/zQ1XtEZy4OPKB8KC3+QSHh\ngshpSMHo+Kzy2hww1i59l9L63RnU0JGhGy9RIqo0BT5JIFW3sQ0Cv2gljgqY\nrMFx\r\n=wCaI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEIZDZOu+83OPzEOl4+LLZ+FyyJf5SmECcWTaD1NRhWwIgAr0mBbG9cev8Z5hyADCMeGsuoQ6QiOcGVFhDXVqmQ28="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-beta.0_1570219239366_0.4299356746678997"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-beta.1","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.0.0-beta.1","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"<div align=\"center\">\n<br/>\n<a href=\"https://codesurfer.pomb.us/demo/\">\n<img alt=\"demo\" src=\"https://user-images.githubusercontent.com/1911623/66186294-49bacc00-e658-11e9-8d73-e4e6d8df476b.gif\" width=\"600\" />\n</a>\n<br/>\n</div>\n\n# Code Surfer\n\n> Help to keep this project alive with your [support](https://opencollective.com/code-surfer) ❤️\n\nCode Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to [MDX Deck](https://github.com/jxnblk/mdx-deck) slides.\n\nTo create a new project run:\n\n```bash\nnpm init code-surfer-deck my-deck\ncd my-deck\nnpm start\n```\n\n## How to use Code Surfer\n\n> It may help to know how [MDX Deck](https://github.com/jxnblk/mdx-deck) works first\n\nTo use Code Surfer you need to import it and wrap the code you want to show inside `<CodeSurfer>` tags (the **empty lines before and after the codeblock are required**):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n# Deck Title\n\n---\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nFeatures:\n\n- [Focus](#focus)\n- [Steps](#steps)\n- [Title and Subtitle](#title-and-subtitle)\n- [Themes](#themes)\n- [Custom Styles](#custom-styles)\n- [Languages](#languages)\n- [Columns](#columns)\n- [Import Code](#import-code)\n- [Diffs](#diffs)\n\n> Here is a live [deck using all the features](https://codesurfer.pomb.us/full/) (and its [mdx source](https://raw.githubusercontent.com/pomber/code-surfer/code-surfer-v2/sites/docs/decks/full.mdx)) just in case you prefer to read code instead of docs.\n\n## Focus\n\nAdd a _focus string_ after the language in the first line of a codeblock to tell Code Sufer what lines and columns you want to focus.\n\nCode Surfer will fade out all the code that isn't focused and, if necessary, zoom it out to fit it in the slide.\n\n````md\n<CodeSurfer>\n\n```js 1:2,3[8:10]\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nIn the example above `1:2,3[8:10]` means: \"focus from the line 1 to line 2 and the columns 8 to 10 from line 3\". More examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Steps\n\nAdd more codeblocks to add steps to a Code Surfer slide.\n\n````md\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 1\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\nconsole.log(4);\nconsole.log(5);\n```\n\n</CodeSurfer>\n````\n\nYou can change the focus and/or the code for different steps and Code Surfer will make the transition between the steps: zooming, scrolling, fading in, fading out, adding and removing lines.\n\n## Title and Subtitle\n\n````md\n<CodeSurfer>\n\n```js 1 title=\"Title\" subtitle=\"Look at the first line\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 2 title=\"Title\" subtitle=\"and now the second\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Themes\n\n[![Code Surfer Themes](https://user-images.githubusercontent.com/1911623/66016573-97df9c00-e4ad-11e9-9095-225d5c9b46a8.png)](https://codesurfer.pomb.us/themes/)\n\nThere are many Code Surfer themes available on the [`@code-surfer/themes`](https://github.com/pomber/code-surfer/blob/code-surfer-v2/packs/themes/src/index.ts) package.\n\nYou can pass the theme as a prop `<CodeSurfer theme={someTheme}>`:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\n<CodeSurfer theme={nightOwl}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nOr set the theme for the whole deck as any other [MDX Deck theme](https://github.com/jxnblk/mdx-deck#theming):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\nexport const theme = nightOwl\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n> Exporting the theme like this will also change the text and background colors for slides that aren't using Code Surfer. If you want to keep the colors from a different mdx deck theme you can [compose both themes](https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#composing-themes) together: `export const themes = [codeSurferTheme, mdxDeckTheme]`\n\n## Custom Styles\n\nYou can write your own Code Surfer theme and change the style of the code, title and subtitle:\n\n> Themes use [Theme UI](https://theme-ui.com/) internally\n\n```js\n// custom-theme.js\nexport default {\n  colors: {\n    background: \"#222\",\n    text: \"#ddd\",\n    primary: \"#a66\"\n  },\n  styles: {\n    CodeSurfer: {\n      pre: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      code: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      tokens: {\n        \"comment cdata doctype\": {\n          fontStyle: \"italic\"\n        },\n        \"builtin changed keyword punctuation operator tag deleted string attr-value char number inserted\": {\n          color: \"primary\"\n        }\n      },\n      title: {\n        backgroundColor: \"background\",\n        color: \"text\"\n      },\n      subtitle: {\n        color: \"#d6deeb\",\n        backgroundColor: \"rgba(10,10,10,0.9)\"\n      },\n      unfocused: {\n        // only the opacity of unfocused code can be changed\n        opacity: 0.1\n      }\n    }\n  }\n};\n```\n\nAnd use it in your deck like any other theme:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport customTheme from \"./custom-theme\"\n\n<CodeSurfer theme={customTheme}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Languages\n\nCode Surfer uses [Prism](https://prismjs.com/) for parsing different languages, so it supports [all the langauges supported by Prism](https://prismjs.com/#supported-languages).\n\nMost popular languages are supported out of the box, for the rest you need to import them:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport \"prismjs/components/prism-smalltalk\"\n\n<CodeSurfer>\n\n```smalltalk\nresult := a > b\n    ifTrue:[ 'greater' ]\n    ifFalse:[ 'less or equal' ]\n```\n\n</CodeSurfer>\n````\n\n## Columns\n\nIf you want to show more than one piece of code at the same time, use `<CodeSurferColumns>`:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\n\n<CodeSurferColumns>\n\n<Step subtitle=\"First Step\">\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n```js\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n<Step subtitle=\"Second Step\">\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n```js 2\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n</CodeSurferColumns>\n````\n\nEach `<Step>` can have its own `title` and `subtitle`.\n\nYou can use different themes for each column: `<CodeSurferColumns themes={[nightOwl, ultramin]}>`. And change the relative size of the columns with `<CodeSurferColumns sizes={[1,3]}>`.\n\nColumns aren't only for code, you can use them for any kind of content:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\nimport MyComponent from \"./my-component.jsx\"\n\n<CodeSurferColumns>\n\n<Step>\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n# Some Markdown\n\n</Step>\n\n<Step>\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n<MyComponent/>\n\n</Step>\n\n</CodeSurferColumns>\n````\n\n## Import Code\n\nInstead of writing the code inside codeblocks you can import it from a file:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js 5:10 file=./my-code.js\n```\n\n```js file=./my-other-code.js\n```\n\n</CodeSurfer>\n````\n\n## Diffs\n\nCodeblocks can also be diffs. This is particularly useful when using empty diffs for code that doesn't change:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```diff 1 subtitle=\"log 1\"\n\n```\n\n```diff 2 subtitle=\"log 2\"\n\n```\n\n```diff 3 subtitle=\"log 3\"\n\n```\n\n</CodeSurfer>\n````\n\n## Examples\n\n- [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)\n\n## Related\n\n- [MDX Deck](https://github.com/jxnblk/mdx-deck)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [Prism](https://github.com/PrismJS/prism)\n- [create-code-surfer-deck](https://github.com/pomber/create-code-surfer-deck)\n- [Gatsby Waves](https://github.com/pomber/gatsby-waves)\n\n## Support Code Surfer\n\nYou can help keep this project alive.\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/code-surfer#sponsor)]\n\n<a href=\"https://opencollective.com/code-surfer/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/sponsor/0/avatar.svg\"></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/code-surfer#backer)]\n\n<a href=\"https://opencollective.com/code-surfer#backers\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/backers.svg?width=890\"></a>\n\n### Contributors\n\nThis project exists thanks to all the people who contribute.\n<img src=\"https://opencollective.com/code-surfer/contributors.svg?width=890&button=false\" />\n","readmeFilename":"readme.md","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-beta.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vBJC/rhRMZcbASTrnc8D7T+7Fu/K3opgkeYq2FYX+aiOYW7bYfxVd5TKwDrPOVnBh2O0gTrZkecRNmEgDLgiIg==","shasum":"a7f9aba02808722cd9efce0d73eae059c1c2c316","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-beta.1.tgz","fileCount":11,"unpackedSize":277348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm5cBCRA9TVsSAnZWagAAUnAP/iIQvt2ElOV+vSwSwoUF\nEPjYQ0/53q8uAj9+hoEufqI7IiskIY5v9hfwnjC9hcp6hSbBceesiLQv1sY0\nKWqpme5ZZZeRouAjYhHKp2Ugnvp89I0Qe92VK+/JKpCod7TIDeScJakUG8A6\nXSf8CDW78Y0ZDsRy78I8bHOaP1Ro3RSPuNoVV9rCEJxg17ELZmveo7o3q7S0\nZWIqkrbbNU5jPgLWbG21EKdaCT6XIHZevFajVO67WeQ+is4hnZ+0MopDMs5v\nTNh5ETRXlqlk/hmllA3NLszFgDSAeFy44EoJIVbxwklshr7cBGbmfBl/pySe\nx1DuPj2v3cKHwWmW0nDpVdtQszKDFYSzS+dstiKjUx6uSlSDdayfTZ+PybL7\nQtHwnAOFGbqRmc5SaqfOSVpg1ah5u8+zZA8c7zYW9p1qwHf/91P30ZKIu9JZ\nS0yZ6SG8ml/00MFvloXTvNxw3uRtvrBbNqh/edE4t55YQ2Kc4Ko42/FEDRZr\nkPgHttgw0FM61pTJ5xxV+j1GRUge2WrL4al0yBgb9PaO+qL8UUhxHDdvwkX0\nsU5kUYMuvxM4Sb7jPnOVUGvetxUWE7K2JmQH8yrFVNk9X5fdqSJ5OUwg3eGe\nWdjV4xj0TBObOZ+5IYK0DHQsRNT9MbhuScC8PiButqspWOcDY1XEhduo7B9U\nWE6U\r\n=zbxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBo6OoGv4ooAbXuchi2qubzNL0mx5wlowE/DaDPKr3F+AiEA4Q2C5IdjwZA5/Ut1zmz/Gl6phsrm8QL4fGdjd2y/2ls="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-beta.1_1570477825105_0.6481889631049023"},"_hasShrinkwrap":false},"3.0.0-beta.2":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0-beta.2","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.0.0-beta.2","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"readme":"<div align=\"center\">\n<br/>\n<a href=\"https://codesurfer.pomb.us/demo/\">\n<img alt=\"demo\" src=\"https://user-images.githubusercontent.com/1911623/66186294-49bacc00-e658-11e9-8d73-e4e6d8df476b.gif\" width=\"600\" />\n</a>\n<br/>\n</div>\n\n# Code Surfer\n\n> Help to keep this project alive with your [support](https://opencollective.com/code-surfer) ❤️\n\nCode Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to [MDX Deck](https://github.com/jxnblk/mdx-deck) slides.\n\nTo create a new project run:\n\n```bash\nnpm init code-surfer-deck my-deck\ncd my-deck\nnpm start\n```\n\n## How to use Code Surfer\n\n> It may help to know how [MDX Deck](https://github.com/jxnblk/mdx-deck) works first\n\nTo use Code Surfer you need to import it and wrap the code you want to show inside `<CodeSurfer>` tags (the **empty lines before and after the codeblock are required**):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n# Deck Title\n\n---\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nFeatures:\n\n- [Focus](#focus)\n- [Steps](#steps)\n- [Title and Subtitle](#title-and-subtitle)\n- [Themes](#themes)\n- [Custom Styles](#custom-styles)\n- [Languages](#languages)\n- [Columns](#columns)\n- [Import Code](#import-code)\n- [Diffs](#diffs)\n\n> Here is a live [deck using all the features](https://codesurfer.pomb.us/full/) (and its [mdx source](https://raw.githubusercontent.com/pomber/code-surfer/code-surfer-v2/sites/docs/decks/full.mdx)) just in case you prefer to read code instead of docs.\n\n## Focus\n\nAdd a _focus string_ after the language in the first line of a codeblock to tell Code Sufer what lines and columns you want to focus.\n\nCode Surfer will fade out all the code that isn't focused and, if necessary, zoom it out to fit it in the slide.\n\n````md\n<CodeSurfer>\n\n```js 1:2,3[8:10]\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nIn the example above `1:2,3[8:10]` means: \"focus from the line 1 to line 2 and the columns 8 to 10 from line 3\". More examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Steps\n\nAdd more codeblocks to add steps to a Code Surfer slide.\n\n````md\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 1\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\nconsole.log(4);\nconsole.log(5);\n```\n\n</CodeSurfer>\n````\n\nYou can change the focus and/or the code for different steps and Code Surfer will make the transition between the steps: zooming, scrolling, fading in, fading out, adding and removing lines.\n\n## Title and Subtitle\n\n````md\n<CodeSurfer>\n\n```js 1 title=\"Title\" subtitle=\"Look at the first line\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 2 title=\"Title\" subtitle=\"and now the second\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Themes\n\n[![Code Surfer Themes](https://user-images.githubusercontent.com/1911623/66016573-97df9c00-e4ad-11e9-9095-225d5c9b46a8.png)](https://codesurfer.pomb.us/themes/)\n\nThere are many Code Surfer themes available on the [`@code-surfer/themes`](https://github.com/pomber/code-surfer/blob/code-surfer-v2/packs/themes/src/index.ts) package.\n\nYou can pass the theme as a prop `<CodeSurfer theme={someTheme}>`:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\n<CodeSurfer theme={nightOwl}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nOr set the theme for the whole deck as any other [MDX Deck theme](https://github.com/jxnblk/mdx-deck#theming):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\nexport const theme = nightOwl\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n> Exporting the theme like this will also change the text and background colors for slides that aren't using Code Surfer. If you want to keep the colors from a different mdx deck theme you can [compose both themes](https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#composing-themes) together: `export const themes = [codeSurferTheme, mdxDeckTheme]`\n\n## Custom Styles\n\nYou can write your own Code Surfer theme and change the style of the code, title and subtitle:\n\n> Themes use [Theme UI](https://theme-ui.com/) internally\n\n```js\n// custom-theme.js\nexport default {\n  colors: {\n    background: \"#222\",\n    text: \"#ddd\",\n    primary: \"#a66\"\n  },\n  styles: {\n    CodeSurfer: {\n      pre: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      code: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      tokens: {\n        \"comment cdata doctype\": {\n          fontStyle: \"italic\"\n        },\n        \"builtin changed keyword punctuation operator tag deleted string attr-value char number inserted\": {\n          color: \"primary\"\n        }\n      },\n      title: {\n        backgroundColor: \"background\",\n        color: \"text\"\n      },\n      subtitle: {\n        color: \"#d6deeb\",\n        backgroundColor: \"rgba(10,10,10,0.9)\"\n      },\n      unfocused: {\n        // only the opacity of unfocused code can be changed\n        opacity: 0.1\n      }\n    }\n  }\n};\n```\n\nAnd use it in your deck like any other theme:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport customTheme from \"./custom-theme\"\n\n<CodeSurfer theme={customTheme}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Languages\n\nCode Surfer uses [Prism](https://prismjs.com/) for parsing different languages, so it supports [all the langauges supported by Prism](https://prismjs.com/#supported-languages).\n\nMost popular languages are supported out of the box, for the rest you need to import them:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport \"prismjs/components/prism-smalltalk\"\n\n<CodeSurfer>\n\n```smalltalk\nresult := a > b\n    ifTrue:[ 'greater' ]\n    ifFalse:[ 'less or equal' ]\n```\n\n</CodeSurfer>\n````\n\n## Columns\n\nIf you want to show more than one piece of code at the same time, use `<CodeSurferColumns>`:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\n\n<CodeSurferColumns>\n\n<Step subtitle=\"First Step\">\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n```js\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n<Step subtitle=\"Second Step\">\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n```js 2\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n</CodeSurferColumns>\n````\n\nEach `<Step>` can have its own `title` and `subtitle`.\n\nYou can use different themes for each column: `<CodeSurferColumns themes={[nightOwl, ultramin]}>`. And change the relative size of the columns with `<CodeSurferColumns sizes={[1,3]}>`.\n\nColumns aren't only for code, you can use them for any kind of content:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\nimport MyComponent from \"./my-component.jsx\"\n\n<CodeSurferColumns>\n\n<Step>\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n# Some Markdown\n\n</Step>\n\n<Step>\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n<MyComponent/>\n\n</Step>\n\n</CodeSurferColumns>\n````\n\n## Import Code\n\nInstead of writing the code inside codeblocks you can import it from a file:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js 5:10 file=./my-code.js\n```\n\n```js file=./my-other-code.js\n```\n\n</CodeSurfer>\n````\n\n## Diffs\n\nCodeblocks can also be diffs. This is particularly useful when using empty diffs for code that doesn't change:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```diff 1 subtitle=\"log 1\"\n\n```\n\n```diff 2 subtitle=\"log 2\"\n\n```\n\n```diff 3 subtitle=\"log 3\"\n\n```\n\n</CodeSurfer>\n````\n\n## Examples\n\n- [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)\n\n## Related\n\n- [MDX Deck](https://github.com/jxnblk/mdx-deck)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [Prism](https://github.com/PrismJS/prism)\n- [create-code-surfer-deck](https://github.com/pomber/create-code-surfer-deck)\n- [Gatsby Waves](https://github.com/pomber/gatsby-waves)\n\n## Support Code Surfer\n\nYou can help keep this project alive.\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/code-surfer#sponsor)]\n\n<a href=\"https://opencollective.com/code-surfer/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/sponsor/0/avatar.svg\"></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/code-surfer#backer)]\n\n<a href=\"https://opencollective.com/code-surfer#backers\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/backers.svg?width=890\"></a>\n\n### Contributors\n\nThis project exists thanks to all the people who contribute.\n<img src=\"https://opencollective.com/code-surfer/contributors.svg?width=890&button=false\" />\n","readmeFilename":"readme.md","bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0-beta.2","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-+oDR9xtyZm/jgCcl+JYGWqg8Him/R10l4gCzdzQfHu2hX+fmfr3xh3frRJA9xhHBWE9xoLbGqKGFK5BeWn1t/g==","shasum":"0338b1b0cd8a1bb8d4cca6768a8817f4b9e4672a","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0-beta.2.tgz","fileCount":11,"unpackedSize":277348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7pydCRA9TVsSAnZWagAAIyQP/jcmR8XkCD7B81FPo7l4\nlsbwFVNMmke0EzBuFicbTfW1HH6QjJdu8C2gsppF7z7N9ulfPdLS7Wy6kGjI\nUpycyeubfxBC8yALbL64+FT10xoqxOQXcIgsq4ECl/m5ERUlx1LDSIolsHgp\n2YFrCgs84zBjDJALOfRId1jqWfb19TaW9H1QhS6GklBGZtEeKSOjRSKEqqUu\n8x9W8mzs3hUKB2ALS4y4WbY4pnm0RPlkirtJhUaj7Koi+JDbsbDyxsyWUhHi\nkFoXhdhKxu2PISiwvfcGxrNYR3QCOaM6EgpZT91LiaM/jF0FwuYpD9d+iTSV\ncPLgNW0/iSdRrYPe6Xs1bZxLs5gDP9sVUbSa2IFviLVDrZciJjKSWmCD+iJD\n/mOkrEw0KTTob386/eroeQZ3Ny0roiKYv0+4DB/jLGMW4ScMPSq8l2sGV11f\n9Q6/SpDRxgsEYz7qOUw0EXlxPT4zZZVGzA6gHby/0IY13vzPkZPR7h7M+Oq3\nLUZKuYf2bAAL2wUVqjuue8wMQl7tHDJZsYymxYRRE1TCsSt8PrPGkyddN6No\nym06eitk5xcaF7120ei06VCjLglnaWzAfUXgimqmxp0SfX6BeenWAo2x2FVZ\nxQ92Zm3MosYsZkTZjAJ7DpHYtfLdeKSGvJbqWf8G/FWM5FHzC2T3KsgyXaT6\n9LG6\r\n=cpcO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA0CwZJXK5dd4wGxgVXXSPAvvMmcsSQ4f+MUEla/lSdAiEA9KtYODdCXfR19umZU126kRJxvZS5bc1NWzee7ylSDhg="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0-beta.2_1575918749154_0.49759448870575085"},"_hasShrinkwrap":false},"3.0.0":{"name":"code-surfer","description":"Rad code slides","version":"3.0.0","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.0.0","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.0.0","_nodeVersion":"11.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-sIhKTfDpZUVvD3TvxtM65rP6RYptF3gzPwfYsRH9qCbc5FBk+bUW09QhmU8J5ZWOaTUbnmimTB5pQi8T+nAP3Q==","shasum":"827083f41e685a9284f45010c0603592cabde4f8","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.0.0.tgz","fileCount":11,"unpackedSize":277465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd76YYCRA9TVsSAnZWagAAf7EQAKK6fmhoyGno3scGTsKy\nm6zBeDK0o1RDDZIomraCDMWI91ASx/6Fk9HIeoact+1oFGY7D+aCRDzybfaH\nP9r3LGWrFP0+LLRZ+ox8JMGpdNxi5Tj8UZ+pJAlmGauuXIUZ4FOBzi7LWeU/\nb0u8iryrHgmmxOJ+W2uq7b7FFlYewVCk5VpcCou5DGVYa5OjiIX0xNf8+mfh\ncoEjnjQeozMr/jGt+skBECoMV4hvkfpIsyNeM3c1ThXhdM/HbvuBkzQboMTX\nJCql5o1q8nubauZUCwUBhdUeS6gB+0RwbQoF6gU3bWPuZnEOgN3gcv+MmwWm\nX5e2IvRPkB/IiY2wQTCc3B0y4HNdohn3TNYtiW4HgGGrgpWlmandfYS/tD1k\nAPZnjbnRyUxH+h1YOHIcfYjHfxOPgA7lkRadcEYazasefTRZzPP0WVq26H1t\ngTgF61PRevMreh8mSKuqEuwH8xBBSyqlF/Aj5ASNQVQv1tRhBnnRH6rxACXO\nuKZJkaOsSzb27y0GGiaXWUEcmPXbuI6724O3sf9QXJFWhmfzGKqAm2qtm9vO\nhXwfgDgTYSX/5a9xS6ZezIHulczZJKp25R9xtW3qLEpHENLntn5oeAZ3QE3r\nfDrgbA0P/tjnR7ixCTBaLju2UeqDHtoq2cq+/z/HdTzVBYzNEEsOlaKqw2b2\nQq9B\r\n=jw0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdVOcfdgYPdoewwhvKMkGSRCepHGQlWYqSWVnQmZbzIAiEAlJZ8h4sN+KjPAQ1m1MKnGlZJz2xS/aX0n+50vEGvryE="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.0.0_1575986711973_0.1482074136712841"},"_hasShrinkwrap":false},"3.1.0":{"name":"code-surfer","description":"Rad code slides","version":"3.1.0","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.1.0","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.1.1"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"funding":{"type":"opencollective","url":"https://opencollective.com/code-surfer"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.1.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-usJZc73Uc2ISgQ2ebX88bVPgc+N1MjiMWZJK9zJRzBXzX9NG3okWVCro9Vcfs8aft0hBkUv/SPxOgLY6bzHu9Q==","shasum":"524e1f05e264f173545c3a69cc47098a444df87e","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.1.0.tgz","fileCount":11,"unpackedSize":278926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRXvtCRA9TVsSAnZWagAA8B4P/0chHTor+gse5wstP5YO\ny8h4NwM1iI+agRwOPSMSUChx6slFdqxrSDXSoKR3JE8vs5xK5yKiw0FFiGOi\nBaOGofV9G6sFunPkvhBqde1pUXdvqEhE9AKTbuQ0UyIC3co0beE43rQJer4H\nn/CAHpZ/12tpg+JEqbE1j9liZSVd4rtt1+1sI7xZmboescW6SMh4LW4Xw6Ht\nUj+N2XgBZfoLkW26wCkwdj6vrQZT5/kVUQgPba2dMyWBpLZ+rD533oOCXzaI\nTTVTNF0J3VtfrsvKnKLiJO1P/r0oLKe8KL95odwHd5f2VLUgqHP3mWzIsDpS\nPgK8Suyw31BCn8/fzRy4CQlKFphMKnDIDcvpm2zjBiAZisgUh0/Z1sUF6P/Q\nFfs/vTN5kOCYAeFgy6iRr8CfeKyiRxFYrCytsaPxWRR+C5V6j0Y66GQrRQXt\n63Z8nsd1uNX7Y8r45iOgym4RPBjz37/f4/xSSUn17z6HGi5tWlKk9IcNSRMN\nE8E/0IWg5CfXIysN7a9Isg3FNgoC05BLX6J5GqQpyjVX9QKyatY9ebTqYO7G\n9fTIgJVBDzDDbY/Ayz8pHQGlTevZwWUDuppYdZg8P30hLGwIzQ6snEemz6aE\nZViSkvLxMz0EM96o293fxIwQvT7zvQr324gmGAm4kXAcdetwTjRH8TiyNTaQ\n4FPJ\r\n=rEMD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPM6Sa7CbQTjZfq/QOfOiv71hJNXqn0Q8D/+ju0FhKIAiBXIxxF1rpucEoDsbuhR4Zh/n7JThUO3FYshdpldtL+kw=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.1.0_1581612011084_0.33585009871613813"},"_hasShrinkwrap":false},"3.1.1":{"name":"code-surfer","description":"Rad code slides","version":"3.1.1","license":"MIT","author":{"name":"pomber"},"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"main":"dist/index.js","module":"dist/code-surfer.esm.js","typings":"dist/index.d.ts","engines":{"node":">=8","npm":">=5"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"cross-env CI=1 tsdx test --env=jsdom","test:watch":"tsdx test --env=jsdom"},"peerDependencies":{"mdx-deck":"3.0.10","react":"^16.8.0"},"dependencies":{"@code-surfer/standalone":"3.1.1","@types/theme-ui":"^0.2.0","array.prototype.flat":"^1.2.1","diff":"^4.0.1","prismjs":"^1.16.0","rebound":"^0.1.0","shell-quote":"^1.6.1","use-spring":"^0.2.2"},"devDependencies":{"@types/jest":"^24.0.15","@types/prismjs":"^1.16.0","@types/react":"^16.8.22","@types/react-dom":"^16.8.4","cross-env":"^5.2.0","husky":"^2.7.0","mdx-deck":"3.0.10","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.8.6","react-dom":"^16.8.6","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.2"},"keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"funding":{"type":"opencollective","url":"https://opencollective.com/code-surfer"},"bugs":{"url":"https://github.com/pomber/code-surfer/issues"},"homepage":"https://github.com/pomber/code-surfer#readme","_id":"code-surfer@3.1.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-qYMY6CnRKjKSyJIGwv2cp2QjYWqsRsmWm37FJpZkAcxF4EyOjKqReQR7ivzz5Ztm22lfwXhFdlcgZ290AALQlg==","shasum":"f716145a87bcbf8ec09ddcd0db50a6bfe4bbe2f9","tarball":"https://registry.npmjs.org/code-surfer/-/code-surfer-3.1.1.tgz","fileCount":11,"unpackedSize":279009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee+P0CRA9TVsSAnZWagAAW1EP/0i10+B8mw7Vh+om41nr\nA9MZfWMfuBnBj70OfWpf03slmvgntVIJuI28sr2uwjTmysH5H39njJs1CNxR\n/3wEOAj8tPMzRvb2SkXprUhaOV26buRL4eV7+UM0UFLDMflVL3uZl2jzwk/F\ncPat3qwKE8noc+fdtnSR7g+FmLhM8+zAH8GfDRYP/FmvV43i0psmwfyRIEYD\nqeCX/Y4SimB3JRDECClmUo2tXuWKcmIDQM1aHzf+8TH5yDYe+NE0c2pmjfP6\nrvNtv3OgrESEN0MHRDjoze042dMIV6yJ4LbGaMQKghFnlW8xp2XY9zSxefgj\nOYJw2lhwQ5MgNca6MXbZNapTaRV3JC0KuAj3yG0+or80pi3hCUylyooxYQDi\n0rEBwAZaD5w03bKyTkbhZIZe6jLJpLwO+xK2qmj5Me/u6F6SS8yMPt+SdAsG\n2u4dB1mJDdhxJIj+Sop/NV7gGylu9VcsDWH330UmagVPkTSrP9j/+wYLCzID\nwvv7ev6LTKL45/tUhn4ggwgPWxrLM95ygAPu07WXoRnft9fX0SYDoFmolov3\n/kKQ9Ne9I9qHbBRr9XLhlFvL7XUrLSaj1JcUsWfx423RmbGK+PJaMoH0uf6a\ndfqt1DdstMZw7L7HOsP3iNE3V+CdpZwKOq9+6Uk3r4gl8ss4UJg7XfdfyD+q\nPGNB\r\n=uw7q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKKr+8eN9CPqlrdaf+yYi+haUHAtdqNTVr8TlEYIx4uAiBkonKpCTJfwgDwwBA/5Ur1jncUkIfRLpKVcutVmOUNBw=="}]},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/code-surfer_3.1.1_1585177588043_0.3798920917898112"},"_hasShrinkwrap":false}},"time":{"created":"2018-08-19T17:40:40.530Z","0.0.1":"2018-08-19T17:40:40.626Z","modified":"2022-04-27T12:53:44.127Z","0.0.2":"2018-08-20T00:14:18.778Z","0.1.2":"2018-08-26T03:30:41.979Z","0.1.3":"2018-08-28T17:08:11.350Z","0.2.1":"2018-08-28T17:33:00.191Z","0.2.2":"2018-08-29T18:10:44.643Z","0.3.0":"2018-08-30T01:30:10.381Z","0.4.1":"2018-09-03T18:48:00.914Z","0.5.0":"2018-10-03T21:35:34.388Z","0.5.2":"2018-10-14T16:37:27.782Z","0.5.3":"2018-10-14T16:56:34.883Z","0.5.5":"2019-01-21T18:40:56.436Z","2.0.0-alpha.1":"2019-05-12T22:25:50.833Z","2.0.0-alpha.2":"2019-05-16T21:44:23.064Z","2.0.0-alpha.3":"2019-05-25T10:53:28.323Z","2.0.0-alpha.4":"2019-05-31T12:44:32.674Z","2.0.0-alpha.5":"2019-06-13T22:33:54.349Z","2.0.0-alpha.6":"2019-06-17T14:28:45.118Z","2.0.0-alpha.7":"2019-06-27T10:59:13.563Z","2.0.0-alpha.8":"2019-06-27T11:22:05.331Z","2.0.0-alpha.9":"2019-07-07T10:37:05.304Z","2.0.0-alpha.10":"2019-07-25T11:52:19.717Z","3.0.0-alpha.0":"2019-08-09T11:45:15.068Z","3.0.0-alpha.1":"2019-08-11T20:05:10.864Z","3.0.0-alpha.2":"2019-09-22T23:40:29.161Z","3.0.0-alpha.3":"2019-09-23T02:37:56.989Z","3.0.0-beta.0":"2019-10-04T20:00:39.545Z","3.0.0-beta.1":"2019-10-07T19:50:25.305Z","3.0.0-beta.2":"2019-12-09T19:12:29.371Z","3.0.0":"2019-12-10T14:05:12.130Z","3.1.0":"2020-02-13T16:40:11.199Z","3.1.1":"2020-03-25T23:06:28.222Z"},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/pomber/code-surfer.git"},"author":{"name":"pomber"},"license":"MIT","readme":"<div align=\"center\">\n<br/>\n<a href=\"https://codesurfer.pomb.us/demo/\">\n<img alt=\"demo\" src=\"https://user-images.githubusercontent.com/1911623/66186294-49bacc00-e658-11e9-8d73-e4e6d8df476b.gif\" width=\"600\" />\n</a>\n<br/>\n</div>\n\n# Code Surfer\n\n> Help to keep this project alive with your [support](https://opencollective.com/code-surfer) ❤️\n\nCode Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to [MDX Deck](https://github.com/jxnblk/mdx-deck) slides.\n\nTo create a new project run:\n\n```bash\nnpm init code-surfer-deck my-deck\ncd my-deck\nnpm start\n```\n\n## Examples\n\n- [Formidable's GraphQL Workshop](https://advanced-graphql-workshop.netlify.com/) by [Phil Pluckthun](https://twitter.com/_philpl)\n- [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)\n\n## How to use Code Surfer\n\n> It may help to know how [MDX Deck](https://github.com/jxnblk/mdx-deck) works first\n\nTo use Code Surfer you need to import it and wrap the code you want to show inside `<CodeSurfer>` tags (the **empty lines before and after the codeblock are required**):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n# Deck Title\n\n---\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nFeatures:\n\n- [Focus](#focus)\n- [Steps](#steps)\n- [Title and Subtitle](#title-and-subtitle)\n- [Themes](#themes)\n- [Custom Styles](#custom-styles)\n- [Languages](#languages)\n- [Columns](#columns)\n- [Import Code](#import-code)\n- [Diffs](#diffs)\n\n> Here is a live [deck using all the features](https://codesurfer.pomb.us/full/) (and its [mdx source](https://raw.githubusercontent.com/pomber/code-surfer/code-surfer-v2/sites/docs/decks/full.mdx)) just in case you prefer to read code instead of docs.\n\n## Focus\n\nAdd a _focus string_ after the language in the first line of a codeblock to tell Code Sufer what lines and columns you want to focus.\n\nCode Surfer will fade out all the code that isn't focused and, if necessary, zoom it out to fit it in the slide.\n\n````md\n<CodeSurfer>\n\n```js 1:2,3[8:10]\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nIn the example above `1:2,3[8:10]` means: \"focus from the line 1 to line 2 and the columns 8 to 10 from line 3\". More examples:\n\n- `5:10` focus lines 5,6,7,8,9 and 10\n- `1,3:5,7` focus lines 1,3,4,5 and 7\n- `2[5]` focus column 5 in line 2\n- `2[5:8]` focus columns 5, 6, 7 and 8 in line 2\n- `1,2[1,3:5,7],3` focus line 1, columns 1, 3, 4, 5 and 7 in line 2 and line 3\n\n## Steps\n\nAdd more codeblocks to add steps to a Code Surfer slide.\n\n````md\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 1\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\nconsole.log(4);\nconsole.log(5);\n```\n\n</CodeSurfer>\n````\n\nYou can change the focus and/or the code for different steps and Code Surfer will make the transition between the steps: zooming, scrolling, fading in, fading out, adding and removing lines.\n\n## Title and Subtitle\n\n````md\n<CodeSurfer>\n\n```js 1 title=\"Title\" subtitle=\"Look at the first line\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```js 2 title=\"Title\" subtitle=\"and now the second\"\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Themes\n\n[![Code Surfer Themes](https://user-images.githubusercontent.com/1911623/66016573-97df9c00-e4ad-11e9-9095-225d5c9b46a8.png)](https://codesurfer.pomb.us/themes/)\n\nThere are many Code Surfer themes available on the [`@code-surfer/themes`](https://github.com/pomber/code-surfer/blob/code-surfer-v2/packs/themes/src/index.ts) package.\n\nYou can pass the theme as a prop `<CodeSurfer theme={someTheme}>`:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\n<CodeSurfer theme={nightOwl}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\nOr set the theme for the whole deck as any other [MDX Deck theme](https://github.com/jxnblk/mdx-deck#theming):\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport { nightOwl } from \"@code-surfer/themes\"\n\nexport const theme = nightOwl\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n> Exporting the theme like this will also change the text and background colors for slides that aren't using Code Surfer. If you want to keep the colors from a different mdx deck theme you can [compose both themes](https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#composing-themes) together: `export const themes = [codeSurferTheme, mdxDeckTheme]`\n\n## Custom Styles\n\nYou can write your own Code Surfer theme and change the style of the code, title and subtitle:\n\n> Themes use [Theme UI](https://theme-ui.com/) internally\n\n```js\n// custom-theme.js\nexport default {\n  colors: {\n    background: \"#222\",\n    text: \"#ddd\",\n    primary: \"#a66\"\n  },\n  styles: {\n    CodeSurfer: {\n      pre: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      code: {\n        color: \"text\",\n        backgroundColor: \"background\"\n      },\n      tokens: {\n        \"comment cdata doctype\": {\n          fontStyle: \"italic\"\n        },\n        \"builtin changed keyword punctuation operator tag deleted string attr-value char number inserted\": {\n          color: \"primary\"\n        }\n      },\n      title: {\n        backgroundColor: \"background\",\n        color: \"text\"\n      },\n      subtitle: {\n        color: \"#d6deeb\",\n        backgroundColor: \"rgba(10,10,10,0.9)\"\n      },\n      unfocused: {\n        // only the opacity of unfocused code can be changed\n        opacity: 0.1\n      }\n    }\n  }\n};\n```\n\nAnd use it in your deck like any other theme:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport customTheme from \"./custom-theme\"\n\n<CodeSurfer theme={customTheme}>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n</CodeSurfer>\n````\n\n## Languages\n\nCode Surfer uses [Prism](https://prismjs.com/) for parsing different languages, so it supports [all the langauges supported by Prism](https://prismjs.com/#supported-languages).\n\nMost popular languages are supported out of the box, for the rest you need to import them:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\nimport \"prismjs/components/prism-smalltalk\"\n\n<CodeSurfer>\n\n```smalltalk\nresult := a > b\n    ifTrue:[ 'greater' ]\n    ifFalse:[ 'less or equal' ]\n```\n\n</CodeSurfer>\n````\n\n## Columns\n\nIf you want to show more than one piece of code at the same time, use `<CodeSurferColumns>`:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\n\n<CodeSurferColumns>\n\n<Step subtitle=\"First Step\">\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n```js\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n<Step subtitle=\"Second Step\">\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n```js 2\nconsole.log(\"a\");\nconsole.log(\"b\");\n```\n\n</Step>\n\n</CodeSurferColumns>\n````\n\nEach `<Step>` can have its own `title` and `subtitle`.\n\nYou can use different themes for each column: `<CodeSurferColumns themes={[nightOwl, ultramin]}>`. And change the relative size of the columns with `<CodeSurferColumns sizes={[1,3]}>`.\n\nColumns aren't only for code, you can use them for any kind of content:\n\n````md\nimport { CodeSurferColumns, Step } from \"code-surfer\"\nimport MyComponent from \"./my-component.jsx\"\n\n<CodeSurferColumns>\n\n<Step>\n\n```js\nconsole.log(1);\nconsole.log(2);\n```\n\n# Some Markdown\n\n</Step>\n\n<Step>\n\n```js 2\nconsole.log(1);\nconsole.log(2);\n```\n\n<MyComponent/>\n\n</Step>\n\n</CodeSurferColumns>\n````\n\n## Import Code\n\nInstead of writing the code inside codeblocks you can import it from a file:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js 5:10 file=./my-code.js\n```\n\n```js file=./my-other-code.js\n```\n\n</CodeSurfer>\n````\n\n## Diffs\n\nCodeblocks can also be diffs. This is particularly useful when using empty diffs for code that doesn't change:\n\n````md\nimport { CodeSurfer } from \"code-surfer\"\n\n<CodeSurfer>\n\n```js\nconsole.log(1);\nconsole.log(2);\nconsole.log(3);\n```\n\n```diff 1 subtitle=\"log 1\"\n\n```\n\n```diff 2 subtitle=\"log 2\"\n\n```\n\n```diff 3 subtitle=\"log 3\"\n\n```\n\n</CodeSurfer>\n````\n\n## Related\n\n- [MDX Deck](https://github.com/jxnblk/mdx-deck)\n- [spectacle-code-slide](https://github.com/jamiebuilds/spectacle-code-slide)\n- [Prism](https://github.com/PrismJS/prism)\n- [create-code-surfer-deck](https://github.com/pomber/create-code-surfer-deck)\n- [Gatsby Waves](https://github.com/pomber/gatsby-waves)\n\n## Support Code Surfer\n\nYou can help keep this project alive.\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/code-surfer#sponsor)]\n\n<a href=\"https://opencollective.com/code-surfer/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/sponsor/0/avatar.svg\"></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/code-surfer#backer)]\n\n<a href=\"https://opencollective.com/code-surfer#backers\" target=\"_blank\"><img src=\"https://opencollective.com/code-surfer/backers.svg?width=890\"></a>\n\n### Contributors\n\nThis project exists thanks to all the people who contribute.\n<img src=\"https://opencollective.com/code-surfer/contributors.svg?width=890&button=false\" />\n","readmeFilename":"readme.md","description":"Rad code slides","keywords":["mdx","mdx-deck","slides","react","code","highlight","token","prism","animation","transition","reactjs"],"homepage":"https://github.com/pomber/code-surfer#readme","bugs":{"url":"https://github.com/pomber/code-surfer/issues"}}