30:Tbe4,commentOn(md` This is a comment in the "before" \`div\`. It's entirely irrelevant to the rest of this example.`, md` Here's the "source" \`div\`. **Try clicking it!** It was named that way because originally these functions were designed for toggleable comments on source code. So, since I should show some code, here's some SVG:

\`\`\`svg \`\`\` `, md` What does it render to? ${svg``} It's a [standard Young tableau](https://en.wikipedia.org/wiki/Young_tableau#Tableaux) of shape (5,4,2)! `)31:T6f3,commentOn(md` We can even nest \`commentOn\` invocations, _provided_ they have **different** \`className\`s! >${commentOn( md`Here's a fun fact ~~(undocumented as of Nov. 6, 2018)~~:`, md`Previously, the only languages that can be highlighted in code blocks processed by Observable's \`md\` tagged template literal function were: * CSS, * JavaScript (aliases js, jsx), * JSON, and * XML (aliases: html, xhtml, rss, atom, xjb, xsd, xsl, plist) [As of Apr. 12, 2019 though](https://github.com/observablehq/stdlib/pull/88), all languages supported by \`highlight.js\` can now be highlighted! `, md`~~To confirm it, check out [the previous implementation of \`md\`](https://github.com/observablehq/notebook-stdlib/blob/37996d83ce19259c56e6c6629483159d1f0be067/src/md.js#L10) in \`notebook-stdlib\`. Note that it used \`@observablehq/highlight.js\` on npm. You can then search for \`registerLanguage\` in "\`highlight.min.js\`" from that package (either on [unpkg](https://unpkg.com/@observablehq/highlight.js@1.1.1/) or in your own browser's debugger) to find the four languages, and search for \`aliases\` to find their aliases.~~ `, 'fancy')} Now, here is a (rather inefficient) Python function, highlighted ~~as though it was JavaScript~~ properly. `, md` \`\`\`python def fibonacci(n): if (n == 0) or (n==1): return 1 return fibonacci(n-1) + fibonacci(n-2) \`\`\` `, md` It seems that if you put in an unrecognized string ~~(here "\`python\`")~~ after the "\`\`\`" denoting the start of a code block in one of Observable's markdown tagged template literals, the syntax highlighter attempts to auto-detect the language. For example, here's some CSS in a code block labeled as "\`abcd\`": \`\`\`abcd .sourceComment pre { color: currentColor; } \`\`\` `)32:[] 2e:{"title":"commentOn","cells":[{"id":0,"value":"md`# commentOn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`This little module implements toggleable HTML \\`div\\`s that hide / show themselves when a \\`div\\` between them is clicked; it's useful for displaying collapsible comments around some quoted text or code. **Import with the following**:\n\\`\\`\\`js\nimport {commentOn, commentOnToggle} from \"@bryangingechen/commenton\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`## API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`\n### \\`commentOn\\`\n\nThis function wraps three separate HTML elements into our collapsible comment gadgets:\n\n\\`\\`\\`js\ncommentOn(before, source, after, className='source', titleText='click to toggle comments on this group') \n\\`\\`\\`\n\nThe arguments \\`before\\`, \\`source\\` and \\`after\\` ought to be HTML elements. These can be conveniently created using Observable's \\`html\\` or \\`md\\` tagged template literals.\n\n\\`className\\` becomes the prefix of the HTML class attribute associated to the created \\`div\\`s:\n* \\`source\\` is wrapped in a \\`div\\` with \\`\\`class=\\`\\${className}\\` \\`\\` (\\`source\\` by default), \n* and \\`before\\` and \\`after\\` are wrapped in \\`div\\`s with \\`\\`class=\\`\\${className}Comment\\` \\`\\` (\\`sourceComment\\` by default)\n\n\\`titleText\\` becomes the \\`title\\` attribute of the \\`source\\` \\`div\\`.\n\nIn the examples below, the \\`source\\` \\`div\\`s have been given rounded borders using CSS in [a separate \\``","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"// Here's an example CSS style element that makes outlined \"fancy\" text harder to read\nfancyStyle = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}