30:T460,mdIt` ### backslash - If you want to show one backslash (${Es.Bs}) in Observable, you need to type four backslashes. - If you want to show escaped backslash (${Es.Bs}${Es.Bs}) in Observable, you need to type eight backslashes. ### special symbol - If you want to show one special symbol (e.g. ${Es.Bq}) in Observable, you need to type three backslashes and one special symbol. - If you want to show escaped special symbol (e.g. ${Es.Bs}${Es.Bq}) in Observable, you need to type seven backslashes and one special symbol. ### examples #### markdown: ~~~md *example 1-1: escape of \** _example 1-2: escape of \__ **example 2-1: escape of \*\*** __example 2-2: escape of \_\___ ~~example 3: escape of \~\~~~ ~~~ #### markdown on Observable: ~~~md *example 1-1: escape of \\\** _example 1-2: escape of \\\__ **example 2-1: escape of \\\*\\\*** __example 2-2: escape of \\\_\\\___ ~~example 3: escape of \\\~\\\~~~ ~~~ #### results: *example 1-1: escape of \\\** _example 1-2: escape of \\\__ **example 2-1: escape of \\\*\\\*** __example 2-2: escape of \\\_\\\___ ~~example 3: escape of \\\~\\\~~~ --- `31:T61e,mdIt` ## Inline Code - Use "${Es.Bq}" (${Es.Bs}${Es.Bq}) at the start and end of the inline code. - In modern markdown, the sequence of two consecutive backquote characters "${Es.Bq}${Es.Bq}" (${Es.Bs}${Es.Bq}${Es.Bs}${Es.Bq}) is the start or end charactors of inline code if the code includes some backquotes "${Es.Bq}" (${Es.Bs}${Es.Bq}) - There must be at least one space or other character between the start or end charactors and the backquote. ### markdown: ~~~md If \`abc = true\` then \`a = 1\`. If \`abc = true\` then \`\`a = \`text\` \`\`. ~~~ ### markdown in Observable: ~~~md If \\\`abc = true\\\` then \\\`a = 1\\\`. If \\\`abc = true\\\` then \\\`\\\`a = \\\`text\\\` \\\`\\\`. ~~~ ### results: If \`abc = true\` then \`a = 1\`. If \`abc = true\` then \`\`a = \`text\` \`\`. ## Fenced Code Block The sequence of at least three consecutive backquote characters "${Es.CB}" (${Es.Bs}${Es.Bq}${Es.Bs}${Es.Bq}${Es.Bs}${Es.Bq}) conflicts with the start and end charactor "${Es.Bq}" of the template literal in the Observable document, so it is highly recommended to use "~~~" at the start and end of the fenced code block. ## Syntax highlighting [highlight.js](https://highlightjs.org/) Add the language identifier to enable syntax highlighting in fenced code block. ### markdown: \`\`\`md ~~~js if (abc) { a = 1; str = \`\${sometext}\` } ~~~ \`\`\` ### markdown in Observable: \`\`\`md ~~~js if (abc) { a = 1; str = \\\`\\\${sometext}\\\` } ~~~ \`\`\` ### results: ~~~js if (abc) { a = 1; str = \`\${sometext}\` } ~~~ --- `32:T8a7,mdIt` ## Definition list [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) * A definition begins with a colon or tilde * Second or more code blocks and paragraphs can be included if these indented by four space or one tab stop. * A colon or tilde can be used instead of four space or one tab stop. ### markdown: ~~~md Term 1 : Definition 1 with lazy continuation. Term 2 with *inline markup* : Definition 2 ~~~ { some code, part of Definition 2 } ~~~ Third paragraph of definition 2. Term 3 : Definition 3 : Second paragraph of definition 2. ~~~ ### results: Term 1 : Definition 1 with lazy continuation. Term 2 with *inline markup* : Definition 2 ~~~ { some code, part of Definition 2 } ~~~ Third paragraph of definition 2. Term 3 : Definition 3 : Second paragraph of definition 2. ## Abbreviation [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) ### markdown: ~~~md *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C. ~~~ ### results: *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium The HTML specification is maintained by the W3C. ## Emoji [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) * emoji cannot be escaped by backslash. ~~~md (\\\:\\\) ~~~ (\\\:\\\) ### markdown: ~~~md :smile: :laughing: :blush: :smiley: :smirk: :heart_eyes: :kissing_heart: :kissing_closed_eyes: :flushed: :relieved: :satisfied: :grin: :wink: o:), O:), o:-), O:-), 0:), 0:-) ~~~ ### results: :smile: :laughing: :blush: :smiley: :smirk: :heart_eyes: :kissing_heart: :kissing_closed_eyes: :flushed: :relieved: :satisfied: :grin: :wink: o:), O:), o:-), O:-), 0:), 0:-) :-) :-( 8-) ;) ## Container [markdown-it-container](https://github.com/markdown-it/markdown-it-container) ### markdown: ~~~md ::: message *This is a message.* ::: ::: notice *This is a notice.* ::: ::: warning *This is a warning.* ::: ::: caution *This is a caution.* ::: ~~~ ### results: ::: message *This is a message.* ::: ::: notice *This is a notice.* ::: ::: warning *This is a warning.* ::: ::: caution *This is a caution.* ::: --- `33:T7c9,function template(render, wrapper) { const {Node, NodeFilter} = window; return function(strings) { var string = strings[0], parts = [], part, root = null, node, nodes, walker, i, n, j, m, k = -1; // Concatenate the text using comments as placeholders. for (i = 1, n = arguments.length; i < n; ++i) { part = arguments[i]; if (part instanceof Node) { parts[++k] = part; string += ""; } else if (Array.isArray(part)) { for (j = 0, m = part.length; j < m; ++j) { node = part[j]; if (node instanceof Node) { if (root === null) { parts[++k] = root = document.createDocumentFragment(); string += ""; } root.appendChild(node); } else { root = null; string += node; } } root = null; } else { string += part; } string += strings[i]; } // Render the text. root = render(string); // Walk the rendered content to replace comment placeholders. if (++k > 0) { nodes = new Array(k); walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT, null, false); while (walker.nextNode()) { node = walker.currentNode; if (/^o:/.test(node.nodeValue)) { nodes[+node.nodeValue.slice(2)] = node; } } for (i = 0; i < k; ++i) { if (node = nodes[i]) { node.parentNode.replaceChild(parts[i], node); } } } // Is the rendered content // … a parent of a single child? Detach and return the child. // … a document fragment? Replace the fragment with an element. // … some other node? Return it. return root.childNodes.length === 1 ? root.removeChild(root.firstChild) : root.nodeType === 11 ? ((node = wrapper()).appendChild(root), node) : root; }; }34:[] 2e:{"title":"Markdown-It with highlight.js and official plug-ins","cells":[{"id":0,"value":"mdIt`\n# Markdown-It with highlight.js and official plug-ins\n\nThis is a markdown-it demo, fork of [Bonus Markdown flavor](https://observablehq.com/@tmcw/bonus-markdown-flavor).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"toc({ headers: \"h1,h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"mdPlus = mdIt","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"mdIt`\n# Appendix I: Markdown-It\n\n[markdown-it](https://github.com/markdown-it/markdown-it) is a extensible modern markdown parser.\n\n## Backslash escape sequences of Observable and Markdown\n\n- In Observable, the string is interpreted as template literal.\n- In template literal, backslash (${Es.Bs}) is start charactor of escape sequence, and backquote (${Es.Bq}), and dollar sign (${Es.DS}) of template string are special symbols\n- In modern markdown, backslash (${Es.Bs}) is start charactor of escape sequence, and all symbol can be escaped by backslash\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"Es = ({\n // escaped in markdown and Observable\n Code: \"\\`\", // inline code <-> markdown: \"`\" <-> string: \"`\" <-> template literal: \"\\`\"\n CB: \"\\`\\`\\`\", // code block <-> markdown: \"```\" <-> string: \"```\" <-> template literal: \"\\`\\`\\`\"\n DS: \"\\$\", // Show dollar sign \"$\" <-> markdown: \"$\" <-> string: \"$\" <-> template literal: \"\\$\"\n Bq: \"\\\\\\`\", // Show backquote \"`\" <-> markdown: \"\\`\" <-> string: \"\\\\`\" <-> template literal: \"\\\\\\`\"\n Bs: \"\\\\\\\\\" // Show backslash \"\\\" <-> markdown: \"\\\\\" <-> string: \"\\\\\\\\\" <-> template literal: \"\\\\\\\\\"\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"mdIt`\n## Subscript\n\n[markdown-it-sub](https://github.com/markdown-it/markdown-it-sub)\n\n### markdown:\n\n~~~md\nH~2~0\n~~~\n\n### results:\n\nH~2~0\n\n## Superscript\n\n[markdown-it-sup](https://github.com/markdown-it/markdown-it-sup)\n\n### markdown:\n\n~~~md\n29^th^\n~~~\n\n### results:\n\n29^th^\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"mdIt`\n## Footnote\n\n[markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)\n\n### markdown:\n\n~~~md\nHere is a footnote reference,[^1] and another.[^longnote]\n\n[^1]: Here is the footnote.\n\n[^longnote]: Here's one with multiple blocks.\n~~~\n\n### results:\n\nHere is a footnote reference,[^1] and another.[^longnote]\n\n[^1]: Here is the footnote.\n\n[^longnote]: Here's one with multiple blocks.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"mdIt`\n## Insert\n\n[markdown-it-ins](https://github.com/markdown-it/markdown-it-ins)\n\n### markdown:\n\n~~~md\n++inserted++\n~~~\n\n### results:\n\n++inserted++\n\n## Mark\n\n[markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)\n\n### markdown:\n\n~~~md\n==Mark==\n~~~\n\n### results:\n\n==Mark==\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"mdIt`## Checkmark\n\n- [x] checked\n- [ ] unchecked`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"mdIt`\n# Appendix II: Configuration\n\n## Requiring modules\n\nRequiring module can test by [Module require debugger](https://observablehq.com/@tmcw/module-require-debugger).\n\n### Helper to require\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"require_dist = (module, options = {version: null, min: false}) => require(`${module}${options.version != null ? `@${options.version}` : ''}/dist/${module}${options.min ? '.min' : ''}.js`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"mdIt`\n### Markdown-It with highlight.js and official plug-ins\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"markdownIt = require_dist('markdown-it')","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"highlightJs = require('https://bundle.run/highlight.js@9.15.10')","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"mdSub = require_dist('markdown-it-sub')","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"mdSup = require_dist('markdown-it-sup')","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"mdFootNote = require_dist('markdown-it-footnote')","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"mdDefList = require_dist('markdown-it-deflist')","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"mdAbbr = require_dist('markdown-it-abbr')","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"mdEmoji = require_dist('markdown-it-emoji')","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"mdContainer = require_dist('markdown-it-container')","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"mdIns = require_dist('markdown-it-ins')","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"mdMark = require_dist('markdown-it-mark')","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"mdCheck = require_dist('markdown-it-task-lists')","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"mdIt`\n## Markdown parser definition\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"mdIt = template(text => {\n var mdUtils = markdownIt().utils;\n var md = markdownIt({\n html: false,\n linkify: true,\n typographer: true,\n breaks: false,\n highlight: (str, lang) => {\n if (lang && highlightJs.getLanguage(lang)) {\n try {\n return (\n '

' +\n            highlightJs.highlight(lang, str, true).value +\n            '

'\n );\n } catch (__) {}\n }\n\n return (\n '

' + mdUtils.escapeHtml(str) + '

'\n );\n }\n })\n .use(mdSub)\n .use(mdSup)\n .use(mdFootNote)\n .use(mdDefList)\n .use(mdAbbr)\n .use(mdEmoji)\n .use(mdContainer, 'message')\n .use(mdContainer, 'notice')\n .use(mdContainer, 'warning')\n .use(mdContainer, 'caution')\n .use(mdIns)\n .use(mdMark)\n .use(mdCheck)\n .render(text);\n\n var root = document.createElement('div');\n root.innerHTML = md;\n return root;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"mdIt`\n## Overwrite styles\n\n* Overwrite some Observable styles\n * Blockquote\n * Fenced Code Block\n * Inline Code\n * Custom Container\n * Mark\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`## Add TOC`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"import { toc } from \"@sgregson/utils\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}