"+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?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('[markdown]'));\n markdownElements.forEach(el => {\n let content = el.innerHTML;\n // Set default indents\n content = content.replace(/\\n/, \"\");\n let tabs = content.match(/\\s*/);\n content = content.replace(new RegExp(\"\\n\" + tabs, \"g\"), \"\\n\");\n content = content.trim();\n\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
-A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework
- -Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than with raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks.
--
Getting Started
-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, 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.
+ + 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.
--
Front Matter
-You’ll need to describe some data about you post — title, description, authors, etc. For this use the
You can also use an external JSON file if you like. We will automatically make a request for a
You can also use an external JSON file if you like. We will automatically make a request for a
Citations
-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.
+Bibtex is the supported way of making academic citations. You first need have a global definition of all your possible citations. For this we’ll use the
Citations are then used with the
Like with the
Citations are then used in the article body with the
Take a look at this paper