31:T461,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 \\\~\\\~~~ --- `32: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}\` } ~~~ --- `33: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.* ::: --- `34:T936,mdIt` ## Extended Table Syntax [markdown-it-multimd-table](https://github.com/RedBug312/markdown-it-multimd-table) ### Grouping header and column span #### markdown: ~~~md [Prototype table] | | Grouping || |First Header | Second Header | Third Header | |------------ | :-----------: | -----------: | |Content | *Long Cell* || |Content | **Cell** | Cell | | | |New section | More | Data | |And more | With an escaped '\\|' || ~~~ #### markdown in Observable: ~~~md [Prototype table] | | Grouping || |First Header | Second Header | Third Header | |------------ | :-----------: | -----------: | |Content | *Long Cell* || |Content | **Cell** | Cell | | | |New section | More | Data | |And more | With an escaped '\\\\|' || ~~~ #### results: [Prototype table] | | Grouping || |First Header | Second Header | Third Header | |------------ | :-----------: | -----------: | |Content | *Long Cell* || |Content | **Cell** | Cell | | | |New section | More | Data | |And more | With an escaped '\\|' || --- ### line break and list with row span #### markdown: ~~~md First header | Second header -------------|--------------- List: | More \\ - over | data \\ - several | \\ - lines | ~~~ #### markdown in Observable: ~~~md First header | Second header -------------|--------------- List: | More \\\\ - over | data \\\\ - several | \\\\ - lines | ~~~ #### results: First header | Second header -------------|--------------- List: | More \\ - over | data \\ - several | \\ - lines | --- ### row span #### markdown: ~~~md First header | Second header -------------|--------------- Merged | Cell 1 ^^ | Cell 2 ^^ | Cell 3 ~~~ #### results: First header | Second header -------------|--------------- Merged | Cell 1 ^^ | Cell 2 ^^ | Cell 3 --- `35:T543,mdIt = template(text => { var tm = texMath.use(katex); var mdUtils = markdownIt().utils; var md = markdownIt({ html: false, linkify: true, typographer: true, breaks: false, highlight: (str, lang) => { if (lang && highlightJs.getLanguage(lang)) { try { return '

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

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

' + mdUtils.escapeHtml(str) + '

'; } }) .use(mdSub) .use(mdSup) .use(mdFootNote) .use(mdDefList) .use(mdAbbr) .use(mdEmoji) .use(mdContainer, 'message') .use(mdContainer, 'notice') .use(mdContainer, 'warning') .use(mdContainer, 'caution') .use(mdIns) .use(mdMark) .use(mdTaskCheckbox, { disabled: false, divWrap: false, divClass: 'checkbox', idPrefix: 'cbx_', ulClass: 'contains-task-list', liClass: 'task-list-item' }) //.use(mdTaskLists, { // "enable": true, // label: true, // labelAfter: true //}) .use(markdownItAttrs) .use(mdMultiTable, {enableMultilineRows: true, enableRowspan: true}) .use(tm, {delimiters:'dollars',macros:{"\\RR": "\\mathbb{R}"}}) .render(text); var root = document.createElement('div'); root.innerHTML = md; return root; })36: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; }; }37:[] 2f:{"title":"Markdown-It with some useful plug-ins Template","cells":[{"id":0,"value":"mdIt`\n# Markdown-It with some useful plug-ins Template\n\nThis is a markdown-it demo, fork of [Markdown-It with highlight.js and official plug-ins Template](https://observablehq.com/@tmori3y2/markdown-it-with-highlight-js-and-official-plug-ins-templat).\n\n(Your topics here...)\n\n---\n`","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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$32","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`","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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$33","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":399,"value":"mdIt`\n## Task List\n\n[markdown-it-task-checkbox](https://github.com/linsir/markdown-it-task-checkbox)\n\n[markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists)\n\n### markdown:\n\n~~~md\n- [ ] Task List Item\n~~~\n\n### results:\n\n- [ ] Task List Item\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"mdIt`\n## Attributes\n\n[markdown-it-attrs](https://github.com/arve0/markdown-it-attrs)\n\n### markdown:\n\n~~~md\n#### test header {.red}\n\n![](https://gist.githubusercontent.com/tmori3y2/7a15c7b06eb4a31c35b6b2ce527f6ee4/raw/test.png)\n\n![](https://gist.githubusercontent.com/tmori3y2/7a15c7b06eb4a31c35b6b2ce527f6ee4/raw/test.png){width=\"500px\" height=\"100px\"}\n~~~\n\n### results:\n\n#### test header {.red}\n\n![](https://gist.githubusercontent.com/tmori3y2/7a15c7b06eb4a31c35b6b2ce527f6ee4/raw/test.png)\n\n![](https://gist.githubusercontent.com/tmori3y2/7a15c7b06eb4a31c35b6b2ce527f6ee4/raw/test.png){width=\"500px\" height=\"100px\"}\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"mdIt`\n## TeX Math\n\n[markdown-it-texmath](https://github.com/goessner/markdown-it-texmath)\n\n### Block\n\n#### markdown:\n\n~~~\n$$f \\\\\\\\pod{T} = \\\\\\\\frac{T - T_0}{T_{abc} - T_{xyz}}$$ (1)\n~~~\n\n#### results:\n\n$$f \\\\pod{T} = \\\\frac{T - T_0}{T_{abc} - T_{xyz}}$$ (1)\n\n### Inline\n\n#### markdown:\n\n~~~\n##### expression: [$f \\\\pod{T}$]\n\nThe expression is $f \\\\pod{T} = \\\\frac{T - T_0}{T_{abc} - T_{xyz}}$.\n~~~\n\n#### results:\n\n##### expression: [$f \\\\pod{T}$]\n\nThe expression is $f \\\\pod{T} = \\\\frac{T - T_0}{T_{abc} - T_{xyz}}$.\n\n---\n`","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":false,"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":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"mdMark = require_dist('markdown-it-mark')","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"mdIt`\n### Markdown-It Task List plug-ins\n\nmarkdown-it-task-lists conflicts with markdown-it-sanitizer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"mdTaskCheckbox = require('https://bundle.run/markdown-it-task-checkbox')","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"mdTaskLists = require_dist('markdown-it-task-lists')","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"mdIt`\n### Markdown-It-Attrs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"markdownItAttrs = require('https://bundle.run/markdown-it-attrs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"mdIt`\n### Markdown-It-Multimd-Table\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"mdMultiTable = require_dist('markdown-it-multimd-table')","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"mdIt`\n### Markdown-It-TexMath plug-in with Katex\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"katex = require_dist('katex')","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"texMath = require('https://bundle.run/markdown-it-texmath')","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"mdIt`\n## Markdown parser definition\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$36","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 * Mark\n * Custom Container\n * Task List\n * Custom Attributes\n * Table Style \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"mdIt`\n## Import stylesheets\n\n* KaTex\n* TexMath\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}