30:[] 2e:{"title":"Fenced code highlighter","cells":[{"id":0,"value":"md`# Fenced code highlighter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"mdh`Fenced code is the Markdown syntax that displays chunks of code between triple backticks (\\`\\`\\`) or tildes (~~~). On top of this, Observable notebooks use [highlight.js](https://highlightjs.org/) to color the code according to the language it is in. This little addition allows to mark selected parts of the code with a special background color, in order to focus the reader’s attention.\n\nPossibilities so far:\n\n- \\\\_‍\\\\_\\\\_highlight\\\\_‍\\\\_\\\\_ ⇨ \\\\_\\\\_\\\\_highlight___\n- +‍++additions+++ ⇨ +++additions+++\n- ~‍\\\\~~deletions~\\\\~~ ⇨ ~\\\\~~deletions~~~\n\n\n\nUsage:\n\n~~~js\nimport {mdh as md} from \"@fil/mdh\"\n~~~\n\nSee “[D3@6 migration guide](https://observablehq.com/@d3/d3v6-migration-guide)” for a real use-case.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"mdh`\n\n## Example\n\n~~~js\nselection.on(\"mousemove +++touchmove+++\", function(___event___) {\n … ~~~d3.event~~~ +++event+++ …\n})\n~~~\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"mdh = {\n const hljs = window.hljs || (await require(\"@observablehq/highlight.js\"));\n\n return function() {\n const node = md(...arguments);\n for (const fragment of node.querySelectorAll(\"code\")) {\n hljs.highlightBlock(fragment);\n\n fragment.innerHTML = fragment.innerHTML.replace(\n /___(.*?)___/g,\n '$1'\n );\n fragment.innerHTML = fragment.innerHTML.replace(\n /~~~(.*?)~~~/g,\n '$1'\n );\n fragment.innerHTML = fragment.innerHTML.replace(\n /[+][+][+](.*?)[+][+][+]/g,\n '$1'\n );\n }\n\n return node;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}