"+a(t.message+"",!0)+"";throw t}}var u={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:l,hr:/^( *[-*_]){3,} *(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,nptable:l,lheading:/^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,blockquote:/^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,list:/^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:/^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,def:/^ *\[([^\]]+)\]: *]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,table:l,paragraph:/^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,text:/^[^\n]+/};u.bullet=/(?:[*+-]|\d+\.)/,u.item=/^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/,u.item=s(u.item,"gm")(/bull/g,u.bullet)(),u.list=s(u.list)(/bull/g,u.bullet)("hr","\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))")("def","\\n+(?="+u.def.source+")")(),u.blockquote=s(u.blockquote)("def",u.def)(),u._tag="(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b",u.html=s(u.html)("comment",//)("closed",/<(tag)[\s\S]+?<\/\1>/)("closing",/
'+(n?t:a(t,!0))+"\n"+(n?t:a(t,!0))+"\n\n"+t+"\n"},i.prototype.html=function(t){return t},i.prototype.heading=function(t,e,n){return"
\n":"
\n"},i.prototype.list=function(t,e){var n=e?"ol":"ul";return"<"+n+">\n"+t+"\n"},i.prototype.listitem=function(t){return"
"+t+"
\n"},i.prototype.table=function(t,e){return""+t+""},i.prototype.br=function(){return this.options.xhtml?"":"
"},i.prototype.del=function(t){return"
\n \n '+d+'\n Distill\n \n \n
\n',m=function(t,e){t.querySelector("dt-header").innerHTML=f},b='\n\n\n\n
\n',y=function(t,e){t.querySelector("dt-appendix").innerHTML=b},x='\n\n\nReferences
\nErrors, Reuse, and Citation
\nIf you see mistakes or want to suggest changes, please submit a pull request on github.
\nDiagrams and text are licensed under Creative Commons Attribution CC-BY 2.0, unless noted otherwise, with the source available on available on github. The figures that have been reused from other sources don\'t fall under this license and can be recognized by a note in their caption: “Figure from …”.
\nFor attribution in academic contexts, please cite this work as
\n \nBibTeX citation
\n \n\n \n '+d+"\n Distill\n is dedicated to clear explanations of machine learning\n
\n",k=function(t,e){t.querySelector("dt-footer").innerHTML=x},v=function(t,e){function n(t){if(!(t in e.citations))return"?";var n=e.citations[t],i=n.author.split(" and ");i=i.map(function(t){return t.split(",")[0].trim()});var r=n.year;return 1==i.length?i[0]+", "+r:2==i.length?i[0]+" & "+i[1]+", "+r:i.length>2?i[0]+", et al., "+r:void 0}function i(t){if(t){var e=t.author.split(" and "),n="",i=e.map(function(t){var e=t.split(",")[0].trim(),n=t.split(",")[1];if(void 0!=n){var i=n.trim().split(" ").map(function(t){return t.trim()[0]});return e+", "+i.join(".")+"."}return e});if(e.length>1?(n+=i.slice(0,e.length-1).join(", "),n+=" and "+i[e.length-1]):n+=i[0],n+=", "+t.year+". ",n+=t.title+". ",n+=t.journal||t.booktitle||"","volume"in t){var r=t.issue||t.number;r=void 0!=r?"("+r+")":"",n+=", Vol "+t.volume+r}return"pages"in t&&(n+=", pp. "+t.pages),n+=". "}return"?"}var r=Object.keys(e.citations).map(function(t){return e.citations[t]});r.sort(function(t,e){return t.author.localeCompare(e.author)});var a=[].slice.apply(t.querySelectorAll("dt-cite"));a.forEach(function(t){var e=t.textContent.split(","),i=e.map(n).join(", ");t.innerHTML=i});var o=t.querySelector("dt-bibliography"),s=t.createElement("ol");r.forEach(function(e){var n=t.createElement("li");n.textContent=i(e),s.appendChild(n)}),o.appendChild(s)},w=t(function(t,e){(function(){function e(t){this.tokens=[],this.tokens.links={},this.options=t||p.defaults,this.rules=u.normal,this.options.gfm&&(this.options.tables?this.rules=u.tables:this.rules=u.gfm)}function n(t,e){if(this.options=e||p.defaults,this.links=t,this.rules=h.normal,this.renderer=this.options.renderer||new i,this.renderer.options=this.options,!this.links)throw new Error("Tokens array requires a `links` property.");this.options.gfm?this.options.breaks?this.rules=h.breaks:this.rules=h.gfm:this.options.pedantic&&(this.rules=h.pedantic)}function i(t){this.options=t||{}}function r(t){this.tokens=[],this.token=null,this.options=t||p.defaults,this.options.renderer=this.options.renderer||new i,this.renderer=this.options.renderer,this.renderer.options=this.options}function a(t,e){return t.replace(e?/&/g:/&(?!#?\w+;)/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function o(t){return t.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g,function(t,e){return e=e.toLowerCase(),"colon"===e?":":"#"===e.charAt(0)?"x"===e.charAt(1)?String.fromCharCode(parseInt(e.substring(2),16)):String.fromCharCode(+e.substring(1)):""})}function s(t,e){return t=t.source,e=e||"",function n(i,r){return i?(r=r.source||r,r=r.replace(/(^|[^\[])\^/g,"$1"),t=t.replace(i,r),n):new RegExp(t,e)}}function l(){}function c(t){for(var e,n,i=arguments,r=1;r"+a(t.message+"",!0)+"";throw t}}var u={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:l,hr:/^( *[-*_]){3,} *(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,nptable:l,lheading:/^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,blockquote:/^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,list:/^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:/^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,def:/^ *\[([^\]]+)\]: *]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,table:l,paragraph:/^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,text:/^[^\n]+/};u.bullet=/(?:[*+-]|\d+\.)/,u.item=/^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/,u.item=s(u.item,"gm")(/bull/g,u.bullet)(),u.list=s(u.list)(/bull/g,u.bullet)("hr","\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))")("def","\\n+(?="+u.def.source+")")(),u.blockquote=s(u.blockquote)("def",u.def)(),u._tag="(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b",u.html=s(u.html)("comment",//)("closed",/<(tag)[\s\S]+?<\/\1>/)("closing",/
'+(n?t:a(t,!0))+"\n"+(n?t:a(t,!0))+"\n\n"+t+"\n"},i.prototype.html=function(t){return t},i.prototype.heading=function(t,e,n){return"
\n":"
\n"},i.prototype.list=function(t,e){var n=e?"ol":"ul";return"<"+n+">\n"+t+"\n"},i.prototype.listitem=function(t){return"
"+t+"
\n"},i.prototype.table=function(t,e){return""+t+""},i.prototype.br=function(){return this.options.xhtml?"":"
"},i.prototype.del=function(t){return"
\n \n ${logo}\n Distill\n \n
\n`\n\nexport default function(dom, data) {\n dom.querySelector('dt-header').innerHTML = html;\n}\n","const html = `\n\n\n\n
\n\n
\n`;\n\n// distill.data().then(function(data) {\n// var as = el.querySelectorAll(\"a.github\");\n// [].forEach.call(as, function(a) {\n// a.setAttribute(\"href\", data.github);\n// });\n// el.querySelector(\".citation.short\").textContent = data.concatenatedAuthors + \", \" + '\"' + data.title + '\", Distill, ' + data.firstPublishedYear + \".\";\n// var bibtex = \"@article{\" + data.slug + \",\\n\";\n// bibtex += \" author = {\" + data.bibtexAuthors + \"},\\n\";\n// bibtex += \" title = {\" + data.title + \"},\\n\";\n// bibtex += \" journal = {Distill},\\n\";\n// bibtex += \" year = {\" + data.firstPublishedYear + \"},\\n\";\n// bibtex += \" note = {\" + data.url + \"}\\n\";\n// bibtex += \"}\";\n// el.querySelector(\".citation.long\").textContent = bibtex;\n// })\n\nexport default function(dom, data) {\n dom.querySelector('dt-appendix').innerHTML = html;\n}\n","import logo from \"./distill-logo.svg\";\n\nconst html = `\n\n\nReferences
\nErrors, Reuse, and Citation
\nIf you see mistakes or want to suggest changes, please submit a pull request on github.
\nDiagrams and text are licensed under Creative Commons Attribution CC-BY 2.0, unless noted otherwise, with the source available on available on github. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.
\nFor attribution in academic contexts, please cite this work as
\n \nBibTeX citation
\n \n\n \n ${logo}\n Distill\n is dedicated to clear explanations of machine learning\n
\n`;\n\nexport default function(dom, data) {\n dom.querySelector('dt-footer').innerHTML = html;\n}\n","export default function(dom, data) {\n\n let citations = Object.keys(data.citations).map(c => data.citations[c]);\n citations.sort((a, b) => {\n return a.author.localeCompare(b.author);\n });\n\n var citeTags = [].slice.apply(dom.querySelectorAll(\"dt-cite\"));\n citeTags.forEach(el => {\n var keys = el.textContent.split(\",\");\n var cite_string = keys.map(inline_cite).join(\", \");\n el.innerHTML = cite_string;\n });\n\n let bibEl = dom.querySelector(\"dt-bibliography\");\n let ol = dom.createElement(\"ol\");\n citations.forEach(citation => {\n let el = dom.createElement(\"li\");\n el.textContent = bibliography_cite(citation);\n ol.appendChild(el);\n })\n bibEl.appendChild(ol);\n\n function inline_cite(key){\n if (key in data.citations){\n var ent = data.citations[key];\n var names = ent.author.split(\" and \");\n names = names.map(name => name.split(\",\")[0].trim())\n var year = ent.year;\n if (names.length == 1) return names[0] + \", \" + year;\n if (names.length == 2) return names[0] + \" & \" + names[1] + \", \" + year;\n if (names.length > 2) return names[0] + \", et al., \" + year;\n } else {\n return \"?\";\n }\n }\n\n function bibliography_cite(ent){\n if (ent){\n var names = ent.author.split(\" and \");\n var cite = \"\";\n let name_strings = names.map(name => {\n var last = name.split(\",\")[0].trim();\n var firsts = name.split(\",\")[1];\n if (firsts != undefined) {\n var initials = firsts.trim().split(\" \").map(s => s.trim()[0]);\n return last + \", \" + initials.join(\".\")+\".\";\n }\n return last;\n });\n if (names.length > 1) {\n cite += name_strings.slice(0, names.length-1).join(\", \");\n cite += \" and \" + name_strings[names.length-1];\n } else {\n cite += name_strings[0]\n }\n cite += \", \" + ent.year + \". \"\n cite += ent.title + \". \"\n cite += (ent.journal || ent.booktitle || \"\")\n if (\"volume\" in ent){\n var issue = ent.issue || ent.number;\n issue = (issue != undefined)? \"(\"+issue+\")\" : \"\";\n cite += \", Vol \" + ent.volume + issue;\n }\n if (\"pages\" in ent){\n cite += \", pp. \" + ent.pages\n }\n cite += \". \"\n return cite\n } else {\n return \"?\";\n }\n }\n\n\n //https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah\n function get_URL(ent){\n if (ent){\n var names = ent.author.split(\" and \");\n names = names.map(name => name.split(\",\")[0].trim())\n var title = ent.title.split(\" \")//.replace(/[,:]/, \"\")\n var url = \"http://search.labs.crossref.org/dois?\"//\"\"https://scholar.google.com/scholar?\"\n url += uris({q: names.join(\" \") + \" \" + title.join(\" \")})\n }\n\n }\n}\n","/**\n * marked - a markdown parser\n * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)\n * https://github.com/chjj/marked\n */\n\n;(function() {\n\n/**\n * Block-Level Grammar\n */\n\nvar block = {\n newline: /^\\n+/,\n code: /^( {4}[^\\n]+\\n*)+/,\n fences: noop,\n hr: /^( *[-*_]){3,} *(?:\\n+|$)/,\n heading: /^ *(#{1,6}) *([^\\n]+?) *#* *(?:\\n+|$)/,\n nptable: noop,\n lheading: /^([^\\n]+)\\n *(=|-){2,} *(?:\\n+|$)/,\n blockquote: /^( *>[^\\n]+(\\n(?!def)[^\\n]+)*\\n*)+/,\n list: /^( *)(bull) [\\s\\S]+?(?:hr|def|\\n{2,}(?! )(?!\\1bull )\\n*|\\s*$)/,\n html: /^ *(?:comment *(?:\\n|\\s*$)|closed *(?:\\n{2,}|\\s*$)|closing *(?:\\n{2,}|\\s*$))/,\n def: /^ *\\[([^\\]]+)\\]: *]+)>?(?: +[\"(]([^\\n]+)[\")])? *(?:\\n+|$)/,\n table: noop,\n paragraph: /^((?:[^\\n]+\\n?(?!hr|heading|lheading|blockquote|tag|def))+)\\n*/,\n text: /^[^\\n]+/\n};\n\nblock.bullet = /(?:[*+-]|\\d+\\.)/;\nblock.item = /^( *)(bull) [^\\n]*(?:\\n(?!\\1bull )[^\\n]*)*/;\nblock.item = replace(block.item, 'gm')\n (/bull/g, block.bullet)\n ();\n\nblock.list = replace(block.list)\n (/bull/g, block.bullet)\n ('hr', '\\\\n+(?=\\\\1?(?:[-*_] *){3,}(?:\\\\n+|$))')\n ('def', '\\\\n+(?=' + block.def.source + ')')\n ();\n\nblock.blockquote = replace(block.blockquote)\n ('def', block.def)\n ();\n\nblock._tag = '(?!(?:'\n + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'\n + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'\n + '|span|br|wbr|ins|del|img)\\\\b)\\\\w+(?!:/|[^\\\\w\\\\s@]*@)\\\\b';\n\nblock.html = replace(block.html)\n ('comment', //)\n ('closed', /<(tag)[\\s\\S]+?<\\/\\1>/)\n ('closing', /'\n + (escaped ? code : escape(code, true))\n + '\\n'\n + (escaped ? code : escape(code, true))\n + '\\n\\n' + quote + '\\n';\n};\n\nRenderer.prototype.html = function(html) {\n return html;\n};\n\nRenderer.prototype.heading = function(text, level, raw) {\n return '
\\n' : '
\\n';\n};\n\nRenderer.prototype.list = function(body, ordered) {\n var type = ordered ? 'ol' : 'ul';\n return '<' + type + '>\\n' + body + '\\n';\n};\n\nRenderer.prototype.listitem = function(text) {\n return '
' + text + '
\\n';\n};\n\nRenderer.prototype.table = function(header, body) {\n return '' + text + '';\n};\n\nRenderer.prototype.br = function() {\n return this.options.xhtml ? '' : '
';\n};\n\nRenderer.prototype.del = function(text) {\n return '
An error occured:
'\n + escape(e.message + '', true)\n + '';\n }\n throw e;\n }\n}\n\n/**\n * Options\n */\n\nmarked.options =\nmarked.setOptions = function(opt) {\n merge(marked.defaults, opt);\n return marked;\n};\n\nmarked.defaults = {\n gfm: true,\n tables: true,\n breaks: false,\n pedantic: false,\n sanitize: false,\n sanitizer: null,\n mangle: true,\n smartLists: false,\n silent: false,\n highlight: null,\n langPrefix: 'lang-',\n smartypants: false,\n headerPrefix: '',\n renderer: new Renderer,\n xhtml: false\n};\n\n/**\n * Expose\n */\n\nmarked.Parser = Parser;\nmarked.parser = Parser.parse;\n\nmarked.Renderer = Renderer;\n\nmarked.Lexer = Lexer;\nmarked.lexer = Lexer.lex;\n\nmarked.InlineLexer = InlineLexer;\nmarked.inlineLexer = InlineLexer.output;\n\nmarked.parse = marked;\n\nif (typeof module !== 'undefined' && typeof exports === 'object') {\n module.exports = marked;\n} else if (typeof define === 'function' && define.amd) {\n define(function() { return marked; });\n} else {\n this.marked = marked;\n}\n\n}).call(function() {\n return this || (typeof window !== 'undefined' ? window : global);\n}());\n","import marked from 'marked';\n\nmarked.setOptions({\n gfm: true,\n smartypants: true\n});\n\nexport default function(dom, data) {\n let markdownElements = [].slice.call(dom.querySelectorAll('[dt-markdown]'));\n markdownElements.forEach(el => {\n let content = el.innerHTML;\n let indent = \" \";\n // Set default indents to the first or second line\n\n // content.replace(\"\\n \", \"\\n\" + indent);\n el.innerHTML = marked(content);\n });\n}\n","\n/* **********************************************\n Begin prism-core.js\n********************************************** */\n\nvar _self = (typeof window !== 'undefined')\n\t? window // if in browser\n\t: (\n\t\t(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)\n\t\t? self // if in worker\n\t\t: {} // if in node js\n\t);\n\n/**\n * Prism: Lightweight, robust, elegant syntax highlighting\n * MIT license http://www.opensource.org/licenses/mit-license.php/\n * @author Lea Verou http://lea.verou.me\n */\n\nvar Prism = (function(){\n\n// Private helper vars\nvar lang = /\\blang(?:uage)?-(\\w+)\\b/i;\nvar uniqueId = 0;\n\nvar _ = _self.Prism = {\n\tutil: {\n\t\tencode: function (tokens) {\n\t\t\tif (tokens instanceof Token) {\n\t\t\t\treturn new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);\n\t\t\t} else if (_.util.type(tokens) === 'Array') {\n\t\t\t\treturn tokens.map(_.util.encode);\n\t\t\t} else {\n\t\t\t\treturn tokens.replace(/&/g, '&').replace(/ text.length) {\n\t\t\t\t\t\t// Something went terribly wrong, ABORT, ABORT!\n\t\t\t\t\t\tbreak tokenloop;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (str instanceof Token) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tpattern.lastIndex = 0;\n\n\t\t\t\t\tvar match = pattern.exec(str),\n\t\t\t\t\t delNum = 1;\n\n\t\t\t\t\t// Greedy patterns can override/remove up to two previously matched tokens\n\t\t\t\t\tif (!match && greedy && i != strarr.length - 1) {\n\t\t\t\t\t\tpattern.lastIndex = pos;\n\t\t\t\t\t\tmatch = pattern.exec(text);\n\t\t\t\t\t\tif (!match) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tvar from = match.index + (lookbehind ? match[1].length : 0),\n\t\t\t\t\t\t to = match.index + match[0].length,\n\t\t\t\t\t\t k = i,\n\t\t\t\t\t\t p = pos;\n\n\t\t\t\t\t\tfor (var len = strarr.length; k < len && p < to; ++k) {\n\t\t\t\t\t\t\tp += strarr[k].length;\n\t\t\t\t\t\t\t// Move the index i to the element in strarr that is closest to from\n\t\t\t\t\t\t\tif (from >= p) {\n\t\t\t\t\t\t\t\t++i;\n\t\t\t\t\t\t\t\tpos = p;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * If strarr[i] is a Token, then the match starts inside another Token, which is invalid\n\t\t\t\t\t\t * If strarr[k - 1] is greedy we are in conflict with another greedy pattern\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (strarr[i] instanceof Token || strarr[k - 1].greedy) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Number of tokens to delete and replace with the new match\n\t\t\t\t\t\tdelNum = k - i;\n\t\t\t\t\t\tstr = text.slice(pos, p);\n\t\t\t\t\t\tmatch.index -= pos;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!match) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif(lookbehind) {\n\t\t\t\t\t\tlookbehindLength = match[1].length;\n\t\t\t\t\t}\n\n\t\t\t\t\tvar from = match.index + lookbehindLength,\n\t\t\t\t\t match = match[0].slice(lookbehindLength),\n\t\t\t\t\t to = from + match.length,\n\t\t\t\t\t before = str.slice(0, from),\n\t\t\t\t\t after = str.slice(to);\n\n\t\t\t\t\tvar args = [i, delNum];\n\n\t\t\t\t\tif (before) {\n\t\t\t\t\t\targs.push(before);\n\t\t\t\t\t}\n\n\t\t\t\t\tvar wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);\n\n\t\t\t\t\targs.push(wrapped);\n\n\t\t\t\t\tif (after) {\n\t\t\t\t\t\targs.push(after);\n\t\t\t\t\t}\n\n\t\t\t\t\tArray.prototype.splice.apply(strarr, args);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn strarr;\n\t},\n\n\thooks: {\n\t\tall: {},\n\n\t\tadd: function (name, callback) {\n\t\t\tvar hooks = _.hooks.all;\n\n\t\t\thooks[name] = hooks[name] || [];\n\n\t\t\thooks[name].push(callback);\n\t\t},\n\n\t\trun: function (name, env) {\n\t\t\tvar callbacks = _.hooks.all[name];\n\n\t\t\tif (!callbacks || !callbacks.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfor (var i=0, callback; callback = callbacks[i++];) {\n\t\t\t\tcallback(env);\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar Token = _.Token = function(type, content, alias, matchedStr, greedy) {\n\tthis.type = type;\n\tthis.content = content;\n\tthis.alias = alias;\n\t// Copy of the full string this token was created from\n\tthis.length = (matchedStr || \"\").length|0;\n\tthis.greedy = !!greedy;\n};\n\nToken.stringify = function(o, language, parent) {\n\tif (typeof o == 'string') {\n\t\treturn o;\n\t}\n\n\tif (_.util.type(o) === 'Array') {\n\t\treturn o.map(function(element) {\n\t\t\treturn Token.stringify(element, language, o);\n\t\t}).join('');\n\t}\n\n\tvar env = {\n\t\ttype: o.type,\n\t\tcontent: Token.stringify(o.content, language, parent),\n\t\ttag: 'span',\n\t\tclasses: ['token', o.type],\n\t\tattributes: {},\n\t\tlanguage: language,\n\t\tparent: parent\n\t};\n\n\tif (env.type == 'comment') {\n\t\tenv.attributes['spellcheck'] = 'true';\n\t}\n\n\tif (o.alias) {\n\t\tvar aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];\n\t\tArray.prototype.push.apply(env.classes, aliases);\n\t}\n\n\t_.hooks.run('wrap', env);\n\n\tvar attributes = Object.keys(env.attributes).map(function(name) {\n\t\treturn name + '=\"' + (env.attributes[name] || '').replace(/\"/g, '"') + '\"';\n\t}).join(' ');\n\n\treturn '<' + env.tag + ' class=\"' + env.classes.join(' ') + '\"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '';\n\n};\n\nif (!_self.document) {\n\tif (!_self.addEventListener) {\n\t\t// in Node.js\n\t\treturn _self.Prism;\n\t}\n \t// In worker\n\t_self.addEventListener('message', function(evt) {\n\t\tvar message = JSON.parse(evt.data),\n\t\t lang = message.language,\n\t\t code = message.code,\n\t\t immediateClose = message.immediateClose;\n\n\t\t_self.postMessage(_.highlight(code, _.languages[lang], lang));\n\t\tif (immediateClose) {\n\t\t\t_self.close();\n\t\t}\n\t}, false);\n\n\treturn _self.Prism;\n}\n\n//Get current script and highlight\nvar script = document.currentScript || [].slice.call(document.getElementsByTagName(\"script\")).pop();\n\nif (script) {\n\t_.filename = script.src;\n\n\tif (document.addEventListener && !script.hasAttribute('data-manual')) {\n\t\tif(document.readyState !== \"loading\") {\n\t\t\tif (window.requestAnimationFrame) {\n\t\t\t\twindow.requestAnimationFrame(_.highlightAll);\n\t\t\t} else {\n\t\t\t\twindow.setTimeout(_.highlightAll, 16);\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tdocument.addEventListener('DOMContentLoaded', _.highlightAll);\n\t\t}\n\t}\n}\n\nreturn _self.Prism;\n\n})();\n\nif (typeof module !== 'undefined' && module.exports) {\n\tmodule.exports = Prism;\n}\n\n// hack for components to work correctly in node.js\nif (typeof global !== 'undefined') {\n\tglobal.Prism = Prism;\n}\n\n\n/* **********************************************\n Begin prism-markup.js\n********************************************** */\n\nPrism.languages.markup = {\n\t'comment': //,\n\t'prolog': /<\\?[\\w\\W]+?\\?>/,\n\t'doctype': //i,\n\t'cdata': //i,\n\t'tag': {\n\t\tpattern: /<\\/?(?!\\d)[^\\s>\\/=$<]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\\\1|\\\\?(?!\\1)[\\w\\W])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,\n\t\tinside: {\n\t\t\t'tag': {\n\t\t\t\tpattern: /^<\\/?[^\\s>\\/]+/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': /^<\\/?/,\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t},\n\t\t\t'attr-value': {\n\t\t\t\tpattern: /=(?:('|\")[\\w\\W]*?(\\1)|[^\\s>]+)/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': /[=>\"']/\n\t\t\t\t}\n\t\t\t},\n\t\t\t'punctuation': /\\/?>/,\n\t\t\t'attr-name': {\n\t\t\t\tpattern: /[^\\s>\\/]+/,\n\t\t\t\tinside: {\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t},\n\t'entity': /&#?[\\da-z]{1,8};/i\n};\n\n// Plugin to make entity title show the real entity, idea by Roman Komarov\nPrism.hooks.add('wrap', function(env) {\n\n\tif (env.type === 'entity') {\n\t\tenv.attributes['title'] = env.content.replace(/&/, '&');\n\t}\n});\n\nPrism.languages.xml = Prism.languages.markup;\nPrism.languages.html = Prism.languages.markup;\nPrism.languages.mathml = Prism.languages.markup;\nPrism.languages.svg = Prism.languages.markup;\n\n\n/* **********************************************\n Begin prism-css.js\n********************************************** */\n\nPrism.languages.css = {\n\t'comment': /\\/\\*[\\w\\W]*?\\*\\//,\n\t'atrule': {\n\t\tpattern: /@[\\w-]+?.*?(;|(?=\\s*\\{))/i,\n\t\tinside: {\n\t\t\t'rule': /@[\\w-]+/\n\t\t\t// See rest below\n\t\t}\n\t},\n\t'url': /url\\((?:([\"'])(\\\\(?:\\r\\n|[\\w\\W])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,\n\t'selector': /[^\\{\\}\\s][^\\{\\};]*?(?=\\s*\\{)/,\n\t'string': {\n\t\tpattern: /(\"|')(\\\\(?:\\r\\n|[\\w\\W])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n\t\tgreedy: true\n\t},\n\t'property': /(\\b|\\B)[\\w-]+(?=\\s*:)/i,\n\t'important': /\\B!important\\b/i,\n\t'function': /[-a-z0-9]+(?=\\()/i,\n\t'punctuation': /[(){};:]/\n};\n\nPrism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css);\n\nif (Prism.languages.markup) {\n\tPrism.languages.insertBefore('markup', 'tag', {\n\t\t'style': {\n\t\t\tpattern: /(
\n \n ${logo}\n Distill\n \n
\n`\n\nexport default function(dom, data) {\n dom.querySelector('dt-header').innerHTML = html;\n}\n","const html = `\n\n\n\n
\n\n
\n`;\n\n// distill.data().then(function(data) {\n// var as = el.querySelectorAll(\"a.github\");\n// [].forEach.call(as, function(a) {\n// a.setAttribute(\"href\", data.github);\n// });\n// el.querySelector(\".citation.short\").textContent = data.concatenatedAuthors + \", \" + '\"' + data.title + '\", Distill, ' + data.firstPublishedYear + \".\";\n// var bibtex = \"@article{\" + data.slug + \",\\n\";\n// bibtex += \" author = {\" + data.bibtexAuthors + \"},\\n\";\n// bibtex += \" title = {\" + data.title + \"},\\n\";\n// bibtex += \" journal = {Distill},\\n\";\n// bibtex += \" year = {\" + data.firstPublishedYear + \"},\\n\";\n// bibtex += \" note = {\" + data.url + \"}\\n\";\n// bibtex += \"}\";\n// el.querySelector(\".citation.long\").textContent = bibtex;\n// })\n\nexport default function(dom, data) {\n dom.querySelector('dt-appendix').innerHTML = html;\n}\n","import logo from \"./distill-logo.svg\";\n\nconst html = `\n\n\nReferences
\nErrors, Reuse, and Citation
\nIf you see mistakes or want to suggest changes, please submit a pull request on github.
\nDiagrams and text are licensed under Creative Commons Attribution CC-BY 2.0, unless noted otherwise, with the source available on available on github. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.
\nFor attribution in academic contexts, please cite this work as
\n \nBibTeX citation
\n \n\n \n ${logo}\n Distill\n is dedicated to clear explanations of machine learning\n
\n`;\n\nexport default function(dom, data) {\n dom.querySelector('dt-footer').innerHTML = html;\n}\n","export default function(dom, data) {\n\n let citations = Object.keys(data.citations).map(c => data.citations[c]);\n citations.sort((a, b) => {\n return a.author.localeCompare(b.author);\n });\n\n var citeTags = [].slice.apply(dom.querySelectorAll(\"dt-cite\"));\n citeTags.forEach(el => {\n var keys = el.textContent.split(\",\");\n var cite_string = keys.map(inline_cite).join(\", \");\n el.innerHTML = cite_string;\n });\n\n let bibEl = dom.querySelector(\"dt-bibliography\");\n let ol = dom.createElement(\"ol\");\n citations.forEach(citation => {\n let el = dom.createElement(\"li\");\n el.textContent = bibliography_cite(citation);\n ol.appendChild(el);\n })\n bibEl.appendChild(ol);\n\n function inline_cite(key){\n if (key in data.citations){\n var ent = data.citations[key];\n var names = ent.author.split(\" and \");\n names = names.map(name => name.split(\",\")[0].trim())\n var year = ent.year;\n if (names.length == 1) return names[0] + \", \" + year;\n if (names.length == 2) return names[0] + \" & \" + names[1] + \", \" + year;\n if (names.length > 2) return names[0] + \", et al., \" + year;\n } else {\n return \"?\";\n }\n }\n\n function bibliography_cite(ent){\n if (ent){\n var names = ent.author.split(\" and \");\n var cite = \"\";\n let name_strings = names.map(name => {\n var last = name.split(\",\")[0].trim();\n var firsts = name.split(\",\")[1];\n if (firsts != undefined) {\n var initials = firsts.trim().split(\" \").map(s => s.trim()[0]);\n return last + \", \" + initials.join(\".\")+\".\";\n }\n return last;\n });\n if (names.length > 1) {\n cite += name_strings.slice(0, names.length-1).join(\", \");\n cite += \" and \" + name_strings[names.length-1];\n } else {\n cite += name_strings[0]\n }\n cite += \", \" + ent.year + \". \"\n cite += ent.title + \". \"\n cite += (ent.journal || ent.booktitle || \"\")\n if (\"volume\" in ent){\n var issue = ent.issue || ent.number;\n issue = (issue != undefined)? \"(\"+issue+\")\" : \"\";\n cite += \", Vol \" + ent.volume + issue;\n }\n if (\"pages\" in ent){\n cite += \", pp. \" + ent.pages\n }\n cite += \". \"\n return cite\n } else {\n return \"?\";\n }\n }\n\n\n //https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah\n function get_URL(ent){\n if (ent){\n var names = ent.author.split(\" and \");\n names = names.map(name => name.split(\",\")[0].trim())\n var title = ent.title.split(\" \")//.replace(/[,:]/, \"\")\n var url = \"http://search.labs.crossref.org/dois?\"//\"\"https://scholar.google.com/scholar?\"\n url += uris({q: names.join(\" \") + \" \" + title.join(\" \")})\n }\n\n }\n}\n","/**\n * marked - a markdown parser\n * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)\n * https://github.com/chjj/marked\n */\n\n;(function() {\n\n/**\n * Block-Level Grammar\n */\n\nvar block = {\n newline: /^\\n+/,\n code: /^( {4}[^\\n]+\\n*)+/,\n fences: noop,\n hr: /^( *[-*_]){3,} *(?:\\n+|$)/,\n heading: /^ *(#{1,6}) *([^\\n]+?) *#* *(?:\\n+|$)/,\n nptable: noop,\n lheading: /^([^\\n]+)\\n *(=|-){2,} *(?:\\n+|$)/,\n blockquote: /^( *>[^\\n]+(\\n(?!def)[^\\n]+)*\\n*)+/,\n list: /^( *)(bull) [\\s\\S]+?(?:hr|def|\\n{2,}(?! )(?!\\1bull )\\n*|\\s*$)/,\n html: /^ *(?:comment *(?:\\n|\\s*$)|closed *(?:\\n{2,}|\\s*$)|closing *(?:\\n{2,}|\\s*$))/,\n def: /^ *\\[([^\\]]+)\\]: *]+)>?(?: +[\"(]([^\\n]+)[\")])? *(?:\\n+|$)/,\n table: noop,\n paragraph: /^((?:[^\\n]+\\n?(?!hr|heading|lheading|blockquote|tag|def))+)\\n*/,\n text: /^[^\\n]+/\n};\n\nblock.bullet = /(?:[*+-]|\\d+\\.)/;\nblock.item = /^( *)(bull) [^\\n]*(?:\\n(?!\\1bull )[^\\n]*)*/;\nblock.item = replace(block.item, 'gm')\n (/bull/g, block.bullet)\n ();\n\nblock.list = replace(block.list)\n (/bull/g, block.bullet)\n ('hr', '\\\\n+(?=\\\\1?(?:[-*_] *){3,}(?:\\\\n+|$))')\n ('def', '\\\\n+(?=' + block.def.source + ')')\n ();\n\nblock.blockquote = replace(block.blockquote)\n ('def', block.def)\n ();\n\nblock._tag = '(?!(?:'\n + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'\n + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'\n + '|span|br|wbr|ins|del|img)\\\\b)\\\\w+(?!:/|[^\\\\w\\\\s@]*@)\\\\b';\n\nblock.html = replace(block.html)\n ('comment', //)\n ('closed', /<(tag)[\\s\\S]+?<\\/\\1>/)\n ('closing', /'\n + (escaped ? code : escape(code, true))\n + '\\n'\n + (escaped ? code : escape(code, true))\n + '\\n\\n' + quote + '\\n';\n};\n\nRenderer.prototype.html = function(html) {\n return html;\n};\n\nRenderer.prototype.heading = function(text, level, raw) {\n return '
\\n' : '
\\n';\n};\n\nRenderer.prototype.list = function(body, ordered) {\n var type = ordered ? 'ol' : 'ul';\n return '<' + type + '>\\n' + body + '\\n';\n};\n\nRenderer.prototype.listitem = function(text) {\n return '
' + text + '
\\n';\n};\n\nRenderer.prototype.table = function(header, body) {\n return '' + text + '';\n};\n\nRenderer.prototype.br = function() {\n return this.options.xhtml ? '' : '
';\n};\n\nRenderer.prototype.del = function(text) {\n return '
An error occured:
'\n + escape(e.message + '', true)\n + '';\n }\n throw e;\n }\n}\n\n/**\n * Options\n */\n\nmarked.options =\nmarked.setOptions = function(opt) {\n merge(marked.defaults, opt);\n return marked;\n};\n\nmarked.defaults = {\n gfm: true,\n tables: true,\n breaks: false,\n pedantic: false,\n sanitize: false,\n sanitizer: null,\n mangle: true,\n smartLists: false,\n silent: false,\n highlight: null,\n langPrefix: 'lang-',\n smartypants: false,\n headerPrefix: '',\n renderer: new Renderer,\n xhtml: false\n};\n\n/**\n * Expose\n */\n\nmarked.Parser = Parser;\nmarked.parser = Parser.parse;\n\nmarked.Renderer = Renderer;\n\nmarked.Lexer = Lexer;\nmarked.lexer = Lexer.lex;\n\nmarked.InlineLexer = InlineLexer;\nmarked.inlineLexer = InlineLexer.output;\n\nmarked.parse = marked;\n\nif (typeof module !== 'undefined' && typeof exports === 'object') {\n module.exports = marked;\n} else if (typeof define === 'function' && define.amd) {\n define(function() { return marked; });\n} else {\n this.marked = marked;\n}\n\n}).call(function() {\n return this || (typeof window !== 'undefined' ? window : global);\n}());\n","import marked from 'marked';\n\nmarked.setOptions({\n gfm: true,\n smartypants: true\n});\n\nexport default function(dom, data) {\n let markdownElements = [].slice.call(dom.querySelectorAll('[dt-markdown]'));\n markdownElements.forEach(el => {\n let content = el.innerHTML;\n let indent = \" \";\n // Set default indents to the first or second line\n\n // content.replace(\"\\n \", \"\\n\" + indent);\n el.innerHTML = marked(content);\n });\n}\n","\n/* **********************************************\n Begin prism-core.js\n********************************************** */\n\nvar _self = (typeof window !== 'undefined')\n\t? window // if in browser\n\t: (\n\t\t(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)\n\t\t? self // if in worker\n\t\t: {} // if in node js\n\t);\n\n/**\n * Prism: Lightweight, robust, elegant syntax highlighting\n * MIT license http://www.opensource.org/licenses/mit-license.php/\n * @author Lea Verou http://lea.verou.me\n */\n\nvar Prism = (function(){\n\n// Private helper vars\nvar lang = /\\blang(?:uage)?-(\\w+)\\b/i;\nvar uniqueId = 0;\n\nvar _ = _self.Prism = {\n\tutil: {\n\t\tencode: function (tokens) {\n\t\t\tif (tokens instanceof Token) {\n\t\t\t\treturn new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);\n\t\t\t} else if (_.util.type(tokens) === 'Array') {\n\t\t\t\treturn tokens.map(_.util.encode);\n\t\t\t} else {\n\t\t\t\treturn tokens.replace(/&/g, '&').replace(/ text.length) {\n\t\t\t\t\t\t// Something went terribly wrong, ABORT, ABORT!\n\t\t\t\t\t\tbreak tokenloop;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (str instanceof Token) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tpattern.lastIndex = 0;\n\n\t\t\t\t\tvar match = pattern.exec(str),\n\t\t\t\t\t delNum = 1;\n\n\t\t\t\t\t// Greedy patterns can override/remove up to two previously matched tokens\n\t\t\t\t\tif (!match && greedy && i != strarr.length - 1) {\n\t\t\t\t\t\tpattern.lastIndex = pos;\n\t\t\t\t\t\tmatch = pattern.exec(text);\n\t\t\t\t\t\tif (!match) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tvar from = match.index + (lookbehind ? match[1].length : 0),\n\t\t\t\t\t\t to = match.index + match[0].length,\n\t\t\t\t\t\t k = i,\n\t\t\t\t\t\t p = pos;\n\n\t\t\t\t\t\tfor (var len = strarr.length; k < len && p < to; ++k) {\n\t\t\t\t\t\t\tp += strarr[k].length;\n\t\t\t\t\t\t\t// Move the index i to the element in strarr that is closest to from\n\t\t\t\t\t\t\tif (from >= p) {\n\t\t\t\t\t\t\t\t++i;\n\t\t\t\t\t\t\t\tpos = p;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * If strarr[i] is a Token, then the match starts inside another Token, which is invalid\n\t\t\t\t\t\t * If strarr[k - 1] is greedy we are in conflict with another greedy pattern\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (strarr[i] instanceof Token || strarr[k - 1].greedy) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Number of tokens to delete and replace with the new match\n\t\t\t\t\t\tdelNum = k - i;\n\t\t\t\t\t\tstr = text.slice(pos, p);\n\t\t\t\t\t\tmatch.index -= pos;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!match) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif(lookbehind) {\n\t\t\t\t\t\tlookbehindLength = match[1].length;\n\t\t\t\t\t}\n\n\t\t\t\t\tvar from = match.index + lookbehindLength,\n\t\t\t\t\t match = match[0].slice(lookbehindLength),\n\t\t\t\t\t to = from + match.length,\n\t\t\t\t\t before = str.slice(0, from),\n\t\t\t\t\t after = str.slice(to);\n\n\t\t\t\t\tvar args = [i, delNum];\n\n\t\t\t\t\tif (before) {\n\t\t\t\t\t\targs.push(before);\n\t\t\t\t\t}\n\n\t\t\t\t\tvar wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);\n\n\t\t\t\t\targs.push(wrapped);\n\n\t\t\t\t\tif (after) {\n\t\t\t\t\t\targs.push(after);\n\t\t\t\t\t}\n\n\t\t\t\t\tArray.prototype.splice.apply(strarr, args);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn strarr;\n\t},\n\n\thooks: {\n\t\tall: {},\n\n\t\tadd: function (name, callback) {\n\t\t\tvar hooks = _.hooks.all;\n\n\t\t\thooks[name] = hooks[name] || [];\n\n\t\t\thooks[name].push(callback);\n\t\t},\n\n\t\trun: function (name, env) {\n\t\t\tvar callbacks = _.hooks.all[name];\n\n\t\t\tif (!callbacks || !callbacks.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfor (var i=0, callback; callback = callbacks[i++];) {\n\t\t\t\tcallback(env);\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar Token = _.Token = function(type, content, alias, matchedStr, greedy) {\n\tthis.type = type;\n\tthis.content = content;\n\tthis.alias = alias;\n\t// Copy of the full string this token was created from\n\tthis.length = (matchedStr || \"\").length|0;\n\tthis.greedy = !!greedy;\n};\n\nToken.stringify = function(o, language, parent) {\n\tif (typeof o == 'string') {\n\t\treturn o;\n\t}\n\n\tif (_.util.type(o) === 'Array') {\n\t\treturn o.map(function(element) {\n\t\t\treturn Token.stringify(element, language, o);\n\t\t}).join('');\n\t}\n\n\tvar env = {\n\t\ttype: o.type,\n\t\tcontent: Token.stringify(o.content, language, parent),\n\t\ttag: 'span',\n\t\tclasses: ['token', o.type],\n\t\tattributes: {},\n\t\tlanguage: language,\n\t\tparent: parent\n\t};\n\n\tif (env.type == 'comment') {\n\t\tenv.attributes['spellcheck'] = 'true';\n\t}\n\n\tif (o.alias) {\n\t\tvar aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];\n\t\tArray.prototype.push.apply(env.classes, aliases);\n\t}\n\n\t_.hooks.run('wrap', env);\n\n\tvar attributes = Object.keys(env.attributes).map(function(name) {\n\t\treturn name + '=\"' + (env.attributes[name] || '').replace(/\"/g, '"') + '\"';\n\t}).join(' ');\n\n\treturn '<' + env.tag + ' class=\"' + env.classes.join(' ') + '\"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '';\n\n};\n\nif (!_self.document) {\n\tif (!_self.addEventListener) {\n\t\t// in Node.js\n\t\treturn _self.Prism;\n\t}\n \t// In worker\n\t_self.addEventListener('message', function(evt) {\n\t\tvar message = JSON.parse(evt.data),\n\t\t lang = message.language,\n\t\t code = message.code,\n\t\t immediateClose = message.immediateClose;\n\n\t\t_self.postMessage(_.highlight(code, _.languages[lang], lang));\n\t\tif (immediateClose) {\n\t\t\t_self.close();\n\t\t}\n\t}, false);\n\n\treturn _self.Prism;\n}\n\n//Get current script and highlight\nvar script = document.currentScript || [].slice.call(document.getElementsByTagName(\"script\")).pop();\n\nif (script) {\n\t_.filename = script.src;\n\n\tif (document.addEventListener && !script.hasAttribute('data-manual')) {\n\t\tif(document.readyState !== \"loading\") {\n\t\t\tif (window.requestAnimationFrame) {\n\t\t\t\twindow.requestAnimationFrame(_.highlightAll);\n\t\t\t} else {\n\t\t\t\twindow.setTimeout(_.highlightAll, 16);\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tdocument.addEventListener('DOMContentLoaded', _.highlightAll);\n\t\t}\n\t}\n}\n\nreturn _self.Prism;\n\n})();\n\nif (typeof module !== 'undefined' && module.exports) {\n\tmodule.exports = Prism;\n}\n\n// hack for components to work correctly in node.js\nif (typeof global !== 'undefined') {\n\tglobal.Prism = Prism;\n}\n\n\n/* **********************************************\n Begin prism-markup.js\n********************************************** */\n\nPrism.languages.markup = {\n\t'comment': //,\n\t'prolog': /<\\?[\\w\\W]+?\\?>/,\n\t'doctype': //i,\n\t'cdata': //i,\n\t'tag': {\n\t\tpattern: /<\\/?(?!\\d)[^\\s>\\/=$<]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\\\1|\\\\?(?!\\1)[\\w\\W])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,\n\t\tinside: {\n\t\t\t'tag': {\n\t\t\t\tpattern: /^<\\/?[^\\s>\\/]+/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': /^<\\/?/,\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t},\n\t\t\t'attr-value': {\n\t\t\t\tpattern: /=(?:('|\")[\\w\\W]*?(\\1)|[^\\s>]+)/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': /[=>\"']/\n\t\t\t\t}\n\t\t\t},\n\t\t\t'punctuation': /\\/?>/,\n\t\t\t'attr-name': {\n\t\t\t\tpattern: /[^\\s>\\/]+/,\n\t\t\t\tinside: {\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t},\n\t'entity': /&#?[\\da-z]{1,8};/i\n};\n\n// Plugin to make entity title show the real entity, idea by Roman Komarov\nPrism.hooks.add('wrap', function(env) {\n\n\tif (env.type === 'entity') {\n\t\tenv.attributes['title'] = env.content.replace(/&/, '&');\n\t}\n});\n\nPrism.languages.xml = Prism.languages.markup;\nPrism.languages.html = Prism.languages.markup;\nPrism.languages.mathml = Prism.languages.markup;\nPrism.languages.svg = Prism.languages.markup;\n\n\n/* **********************************************\n Begin prism-css.js\n********************************************** */\n\nPrism.languages.css = {\n\t'comment': /\\/\\*[\\w\\W]*?\\*\\//,\n\t'atrule': {\n\t\tpattern: /@[\\w-]+?.*?(;|(?=\\s*\\{))/i,\n\t\tinside: {\n\t\t\t'rule': /@[\\w-]+/\n\t\t\t// See rest below\n\t\t}\n\t},\n\t'url': /url\\((?:([\"'])(\\\\(?:\\r\\n|[\\w\\W])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,\n\t'selector': /[^\\{\\}\\s][^\\{\\};]*?(?=\\s*\\{)/,\n\t'string': {\n\t\tpattern: /(\"|')(\\\\(?:\\r\\n|[\\w\\W])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n\t\tgreedy: true\n\t},\n\t'property': /(\\b|\\B)[\\w-]+(?=\\s*:)/i,\n\t'important': /\\B!important\\b/i,\n\t'function': /[-a-z0-9]+(?=\\()/i,\n\t'punctuation': /[(){};:]/\n};\n\nPrism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css);\n\nif (Prism.languages.markup) {\n\tPrism.languages.insertBefore('markup', 'tag', {\n\t\t'style': {\n\t\t\tpattern: /(
How to Create a Distill Article
@@ -23,6 +23,55 @@Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks. Both are also available on Github with a permissive license, so feel free to use them independent of http://distill.pub as well.
+
Setting up a Document
+If you’re using Chrome as your development browser, here is the smallest distill post.
+However, this omits some required html tags that might cause rendering problems during development if you’re using a browser other than Chrome. These missing tags will be added during publishing, so if the above works for you, feel free to use it. If you are having issues with weird characters showing up, try adding
A typical distill post will be quite a bit longer than this though. Below is a more complete example. Don’t worry if some of the tags don’t make sense, they’re all documented further in this post.
++
Markdown
+Markdown is supported as an alternative to html for the
We use marked as the rendering engine, with github flavored markdown and smartypants enabled. In development mode the markdown is translated in the client after the dom content has loaded, but when published the translation is precompiled.
++
Data
+Layouts
The main text column is referred to as the body. It is the assumed layout of any direct descendents of the dt-article element.
.l-body
They are all floated to the right and anchored to the right-hand edge of the position you specify. By default, each will take up approximately half of the width of the standard layout position, but you can override the width with a more specific selector.
.l-gutter
The final layout is for marginalia, asides, and footnotes. It does not interrupt the normal flow of .l-body sized text except on mobile screen sizes.
-
Markdown
-
-
- <div dt-markdown>
- ###This markdown will be rendered as HTML
- For more about markdown, read this [tutorial](https://help.github.com/articles/basic-writing-and-formatting-syntax/).
- </div>
-
-
-
Any element with a `dt-markdown` attribute will be rendered with its contents replaced with a markdown processed version. We use [marked](https://github.com/chjj/marked), with [github flavored markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) and [smartypants](https://daringfireball.net/projects/smartypants/).
- Code Blocks
Syntax highlighting is provided within
Citation
Bibtex is the supported way of making academic citations. You first need have a global definition of all your possible citations. This can either be inlined in the document, or it can reference an external bibtex file.
-
+
<dt-bibliography>
@article{gregor2015draw,
title={DRAW: A recurrent neural network for image generation},
@@ -83,11 +120,11 @@
publisher={Cambridge Univ Press}
}
</dt-bibliography>
- Citations are then used with the
+
<dt-cite>gregor2015draw</dt-cite>
- Take a look at this paper
@@ -100,8 +137,7 @@
HTML Includes
Authors
--