{"id":28578146,"url":"https://github.com/digitalocean/do-markdownit","last_synced_at":"2025-06-11T01:08:57.368Z","repository":{"id":37910934,"uuid":"463681933","full_name":"digitalocean/do-markdownit","owner":"digitalocean","description":"Markdown-It plugin for the DigitalOcean Community.","archived":false,"fork":false,"pushed_at":"2025-06-02T08:23:46.000Z","size":1412,"stargazers_count":98,"open_issues_count":6,"forks_count":19,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-02T18:54:46.339Z","etag":null,"topics":["digitalocean","hacktoberfest","markdown","markdown-it","markdown-it-plugin","markdown-it-plugins"],"latest_commit_sha":null,"homepage":"https://www.digitalocean.com/community/markdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digitalocean.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-02-25T21:35:57.000Z","updated_at":"2025-06-02T07:00:44.000Z","dependencies_parsed_at":"2024-01-19T02:48:06.686Z","dependency_job_id":"9c0a4b13-5a33-4275-8d3e-18cc391ff89a","html_url":"https://github.com/digitalocean/do-markdownit","commit_stats":{"total_commits":86,"total_committers":10,"mean_commits":8.6,"dds":"0.40697674418604646","last_synced_commit":"05e3a54bbcb51c67ddb9e6d86347f1f3d5ab1356"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalocean%2Fdo-markdownit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalocean%2Fdo-markdownit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalocean%2Fdo-markdownit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalocean%2Fdo-markdownit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitalocean","download_url":"https://codeload.github.com/digitalocean/do-markdownit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalocean%2Fdo-markdownit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259178491,"owners_count":22817387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["digitalocean","hacktoberfest","markdown","markdown-it","markdown-it-plugin","markdown-it-plugins"],"created_at":"2025-06-11T01:08:56.474Z","updated_at":"2025-06-11T01:08:57.348Z","avatar_url":"https://github.com/digitalocean.png","language":"JavaScript","readme":"# do-markdownit\n\nMarkdown-It plugin for the DigitalOcean Community.\n\nThis plugin is what we use across the\n[DigitalOcean Community](https://www.digitalocean.com/community) site to extend the standard\nfunctionality of Markdown with additional features, such as automatic code syntax highlighting,\nvideo embeds, and more.\n\nYou can see this plugin in action and try it out on our\n[Markdown sandbox page](https://www.digitalocean.com/community/markdown).\n\n\n## Getting Started\n\nInstall Markdown-It and the plugin:\n\n```shell\nnpm install markdown-it @digitalocean/do-markdownit\n```\n\nInstantiate Markdown-It and the plugin, and render some Markdown:\n\n```js\nconst md = require('markdown-it')({}).use(require('@digitalocean/do-markdownit'), {});\n\nmd.render('# Hello, world!\\n\\n\u003c$\u003e[info]do-markdownit is loaded!\u003c$\u003e');\n```\n\n\n## Plugin Features \u0026 Options\n\ndo-markdownit is composed of a set of individual plugins, with the ability to disable each if\nneeded, and many having specific options that can be set. All plugins are enabled by default, except limit_tokens.\n\n\u003c!--\nThe headings below should match the order they are loaded in the plugin.\nThe information under each heading should match the main JSDoc comment for each plugin.\n--\u003e\n\n### highlight\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for highlight markup across all Markdown, including inside code.\u003c/summary\u003e\n\nThe syntax for highlighting text is `\u003c^\u003e`. E.g. `\u003c^\u003ehello world\u003c^\u003e`.\nThis syntax is treated as regular inline syntax, similar to bold or italics.\nHowever, when used within code the opening and closing tags must be on the same line.\n\n**Example Markdown input:**\n\n    \u003c^\u003etest\u003c^\u003e\n\n    ```\n    hello\n    world\n    \u003c^\u003etest\u003c^\u003e\n    ```\n\n**Example HTML output:**\n\n    \u003cp\u003e\u003cmark\u003etest\u003c/mark\u003e\u003c/p\u003e\n\n    \u003cpre\u003e\u003ccode\u003ehello\n    world\n    \u003cmark\u003etest\u003c/mark\u003e\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `highlight` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### user_mention\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for mentioning users, using an `@` symbol. Wraps the mention in a link to the user.\u003c/summary\u003e\n\nBy default, any characters that are not a space or newline after an `@` symbol will be treated as a mention.\n\n**Example Markdown input:**\n\n    Hello @test\n\n**Example HTML output:**\n\n    \u003cp\u003eHello \u003ca href=\"/users/test\"\u003e@test\u003c/a\u003e\u003c/p\u003e\n\n**Options:**\n\nPass options for this plugin as the `user_mention` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `pattern` (`RexExp`, optional): A pattern to match user mentions, applied to the string after the `@` symbol.\n- `path` (`function(string): string`, optional): A function to get the URL path for a user mention.\n\u003c/details\u003e\n\n### html_comment\n\n\u003cdetails\u003e\n\u003csummary\u003eRemoves all HTML comments from Markdown.\u003c/summary\u003e\n\nThis treats HTML comments as Markdown syntax, so expects them to either be inline, or a full block.\nComments that start inline and then span a block will not be removed.\n\nBy default, removal is loose, meaning that it does not need to explicitly find the end of a comment to remove it.\nIf no closing mark is found, the end of the line or block is assumed.\nThis behaviour can be disabled with the `strict` setting, which will require finding the end of the comment.\n\n**Example Markdown input:**\n\n    Hello \u003c!-- comment --\u003e world\n\n**Example HTML output:**\n\n    \u003cp\u003eHello  world\u003c/p\u003e\n\n**Options:**\n\nPass options for this plugin as the `html_comment` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `strict` (`boolean`, optional, defaults to `false`): If the end of a comment must be explicitly found.\n\u003c/details\u003e\n\n### image_caption\n\n\u003cdetails\u003e\n\u003csummary\u003eWrap singleton images that have title text in a figure with a rendered caption.\u003c/summary\u003e\n\n**Example Markdown input:**\n\n    ![alt text](test.png \"title text\")\n\n    ![alt text](test.png \"title text _with Markdown_\")\n\n**Example HTML output:**\n\n    \u003cfigure\u003e\u003cimg src=\"test.png\" alt=\"alt text\"\u003e\u003cfigcaption\u003etitle text\u003c/figcaption\u003e\u003c/figure\u003e\n\n    \u003cfigure\u003e\u003cimg src=\"test.png\" alt=\"alt text\"\u003e\u003cfigcaption\u003etitle text \u003cem\u003ewith Markdown\u003c/em\u003e\u003c/figcaption\u003e\u003c/figure\u003e\n\n**Options:**\n\nPass options for this plugin as the `image_caption` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### table_wrapper\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd wrapper element around Markdown `tables` for better controlled overflow.\u003c/summary\u003e\n\nNo new syntax added. This just wraps normal Markdown `| a |` tables with a `div` that has a default\nclass of `table-wrapper`.\n\n**Example Markdown input:**\n\n    | a |\n    |---|\n\n**Example HTML output:**\n\n    \u003cdiv class=\"table-wrapper\"\u003e\n        \u003ctable\u003e\n            \u003cthead\u003e\n                \u003ctr\u003e\n                    \u003cth\u003ea\u003c/th\u003e\n                \u003c/tr\u003e\n            \u003c/thead\u003e\n        \u003c/table\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `table_wrapper` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `className` (`string`, optional, defaults to `'table-wrapper'`): Class to use for the table wrapper.\n\u003c/details\u003e\n\n### collapsible_heading\n\n\u003cdetails\u003e\n\u003csummary\u003eWrap specific headings in detail tag and make the content collapsible\u003c/summary\u003e\n\nIf an array of heading tags is provided, all those tags and the related content will be wrapped in a details tag, with the heading as the summary.\n\nNesting multiple collapsible sections is supported.\n\n**Example Markdown input:**\n\n    # H1 header\n    Test row\n\n**Example HTML output:**\n\n    \u003cdetails class=\"collapsible\"\u003e\n        \u003csummary\u003e\n            \u003ch1\u003eH1 header\u003c/h1\u003e\n        \u003c/summary\u003e\n        \u003cp\u003eTest row\u003c/p\u003e\n    \u003c/details\u003e\n\n**Options:**\n\nPass options for this plugin as the `collapsible_heading` property of the `do-markdownit` plugin options.\nThis plugin is disabled by default, pass an object to enable it.\n\n- `levels` (`number[]`, optional, defaults to `[ 1, 2, 3, 4, 5, 6 ]`): List of heading tags to wrap (ex: `2`).\n- `open` (`boolean`, optional, defaults to `true`): Flag indicating if the wrapped sections should be expanded by default.\n- `className` (`string`, optional, defaults to `'collapsible'`): Class name to use on the collapsed section.\n\n\u003c/details\u003e\n\n### callout\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for callout embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `\u003c$\u003e[\u003cclass\u003e]\u003ctext\u003e\u003c$\u003e`. E.g. `\u003c$\u003e[hello]world\u003c$\u003e`.\nThe class must be in square brackets, and must come immediately after the opening `\u003c$\u003e`.\nNewlines are allowed in the text, as is any other Markdown syntax (both block and inline).\n\nCallouts can also have a label set within them. The label should be in the format `[label \u003ctext\u003e]`.\nThe label must be on the first newline after the opening `\u003c$\u003e`.\nThe label cannot contain any newlines, but does support inline Markdown syntax.\n\n**Example Markdown input:**\n\n    \u003c$\u003e[info]\n    test\n    \u003c$\u003e\n\n    \u003c$\u003e[info]\n    [label hello]\n    world\n    \u003c$\u003e\n\n**Example HTML output:**\n\n    \u003cdiv class=\"callout info\"\u003e\n    \u003cp\u003etest\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"callout info\"\u003e\n    \u003cp class=\"callout-label\"\u003ehello\u003c/p\u003e\n    \u003cp\u003eworld\u003c/p\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `callout` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `allowedClasses` (`string[]`, optional): List of case-sensitive classes that are allowed. If not an array, all classes are allowed.\n- `extraClasses` (`string[]`, optional, defaults to `['callout']`): List of extra classes to apply to a callout div, alongside the given class.\n- `labelClass` (`string`, optional, defaults to `'callout-label'`): Class to use for the label.\n\u003c/details\u003e\n\n### rsvp_button\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for RSVP buttons in Markdown, as inline syntax.\u003c/summary\u003e\n\nThe basic syntax is `[rsvp_button \u003cmarketo id\u003e]`. E.g. `[rsvp_button 12345]`.\nOptionally, a title can be set for the button in double quotes after the id. E.g. `[rsvp_button 12345 \"My Button\"]`.\nThe button title is limited to 50 characters, and can contain spaces.\n\nThe buttons are disabled by default and do not have any event listeners.\nOnce rendered, you should bind your own event listeners and enable the buttons.\n\nYou can find all the buttons in the DOM by looking for the `data-js` attribute being set to `rsvp-button`.\nThe Marketo form Id will be set as the `data-form-id` attribute.\n\n**Example Markdown input:**\n\n    [rsvp_button 12345 \"button title\"]\n\n**Example HTML output:**\n\n    \u003cp\u003e\u003cbutton data-js=\"rsvp-button\" data-form-id=\"12345\" disabled=\"disabled\" class=\"rsvp\"\u003ebutton title\u003c/button\u003e\u003c/p\u003e\n\n**Options:**\n\nPass options for this plugin as the `rsvp_button` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `className` (`string`, optional, defaults to `'rsvp'`): Class to use for the button.\n\u003c/details\u003e\n\n### terminal_button\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for terminal buttons in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[terminal \u003cimage name\u003e]`. E.g. `[terminal ubuntu:focal]`.\nAn optional button title can be provided after the image name. E.g. `[terminal ubuntu:focal Start Terminal]`.\n\nThe buttons are disabled by default and do not have any event listeners.\nOnce rendered, you should bind your own event listeners and enable the buttons.\n\nYou can find all the buttons in the DOM by looking for the `data-js` attribute being set to `terminal`.\nThe image name will be set as the `data-docker-image` attribute.\n\n**Example Markdown input:**\n\n    [terminal ubuntu:focal button title]\n\n**Example HTML output:**\n\n    \u003cbutton data-js=\"terminal\" data-docker-image=\"ubuntu:focal\" disabled=\"disabled\" class=\"terminal\"\u003e\n        button title\n    \u003c/button\u003e\n\n**Options:**\n\nPass options for this plugin as the `terminal_button` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### columns\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for columns in Markdown, as block syntax.\u003c/summary\u003e\n\nTo declare a column, wrap content with `[column` on the line before, and `]` on a new line at the end.\nTwo or more columns must be adjacent to each other to be parsed as a set of columns.\n\n**Example Markdown input:**\n\n    [column\n    Content for the first column\n    ]\n    [column\n    Content for the second column\n    ]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"columns\"\u003e\n    \u003cdiv class=\"column\"\u003e\n    \u003cp\u003eContent for the first column\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"column\"\u003e\n    \u003cp\u003eContent for the second column\u003c/p\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `columns` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `outerClassName` (`string`, optional, defaults to `'columns'`): Class to use for the outer columns container.\n- `innerClassName` (`string`, optional, defaults to `'column'`): Class to use for the inner column container.\n\u003c/details\u003e\n\n### details\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for expandable details in Markdown, as block syntax.\u003c/summary\u003e\n\nTo create an expandable details section, use `[details` followed by a summary.\nContent for the expanded section should be provided on lines after, closed with `]` on a new line.\n\n**Example Markdown input:**\n\n    [details This is hidden content\n    Content for inside the expanded section\n    ]\n\n    [details open This section is *open* by default\n    Content for inside the expanded section\n    ]\n\n**Example HTML output:**\n\n    \u003cdetails\u003e\n    \u003csummary\u003eThis is hidden content\u003c/summary\u003e\n    \u003cp\u003eContent for inside the expanded section\u003c/p\u003e\n    \u003c/details\u003e\n\n    \u003cdetails open\u003e\n    \u003csummary\u003eThis section is \u003cem\u003eopen\u003c/em\u003e by default\u003c/summary\u003e\n    \u003cp\u003eContent for inside the expanded section\u003c/p\u003e\n    \u003c/details\u003e\n\n**Options:**\n\nPass options for this plugin as the `details` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### glob\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://www.digitalocean.com/community/tools/glob\"\u003eglob\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[glob \u003cpattern\u003e \u003cstrings\u003e]`. E.g. `[glob *.js a.js b.js c.css]`.\nAfter the pattern, strings can be provided on a single line, or each separated by a newline.\nIf a newline is included, the full first line will be treated as the pattern, including any spaces.\n\n**Example Markdown input:**\n\n    [glob *.js /]\n\n    [glob * test.js\n    /a\n    /b]\n\n**Example HTML output:**\n\n    \u003cdiv data-glob-tool-embed data-glob-string=\"*.js\" data-glob-test-0=\"/\"\u003e\n        \u003ca href=\"https://www.digitalocean.com/community/tools/glob?glob=*.js\u0026tests=%2F\" target=\"_blank\"\u003e\n            Explore \u003ccode\u003e*.js\u003c/code\u003e as a glob string in our glob testing tool\n        \u003c/a\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-glob-tool-embed data-glob-string=\"* test.js\" data-glob-test-0=\"/a\" data-glob-test-1=\"/b\"\u003e\n        \u003ca href=\"https://www.digitalocean.com/community/tools/glob?glob=*+test.js\u0026tests=%2Fa\u0026tests=%2Fb\" target=\"_blank\"\u003e\n            Explore \u003ccode\u003e* test.js\u003c/code\u003e as a glob string in our glob testing tool\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cscript async defer src=\"https://do-community.github.io/glob-tool-embed/bundle.js\" type=\"text/javascript\" onload=\"window.GlobToolEmbeds()\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `glob` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### dns\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://www.digitalocean.com/community/tools/dns\"\u003eDNS lookup\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[dns \u003cdomain\u003e]`. E.g. `[dns digitalocean.com]`.\nAfter the domain, one or more space-separated DNS record types can be added. The default type is `A`.\n\n**Example Markdown input:**\n\n    [dns digitalocean.com]\n\n    [dns digitalocean.com A AAAA]\n\n**Example HTML output:**\n\n    \u003cdiv data-dns-tool-embed data-dns-domain=\"digitalocean.com\" data-dns-types=\"A\"\u003e\n        \u003ca href=\"https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com\" target=\"_blank\"\u003e\n            Perform a full DNS lookup for digitalocean.com\n        \u003c/a\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-dns-tool-embed data-dns-domain=\"digitalocean.com\" data-dns-types=\"A,AAAA\"\u003e\n        \u003ca href=\"https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com\" target=\"_blank\"\u003e\n            Perform a full DNS lookup for digitalocean.com\n        \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cscript async defer src=\"https://do-community.github.io/dns-tool-embed/bundle.js\" type=\"text/javascript\" onload=\"window.DNSToolEmbeds()\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `dns` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### asciinema\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"http://asciinema.org/\"\u003eAsciinema\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[asciinema \u003cid\u003e]`. E.g. `[asciinema 325730]`.\nThe cols and rows can optionally be set using `[asciinema \u003cid\u003e [cols] [rows]]`. E.g. `[asciinema 325730 100 50]`.\nThe default value for cols is 80, and for rows is 24.\n\n**Example Markdown input:**\n\n    [asciinema 325730]\n\n**Example HTML output:**\n\n    \u003cscript src=\"https://asciinema.org/a/325730.js\" id=\"asciicast-325730\" async data-cols=\"80\" data-rows=\"24\"\u003e\u003c/script\u003e\n    \u003cnoscript\u003e\n        \u003ca href=\"https://asciinema.org/a/325730\" target=\"_blank\"\u003eView asciinema recording\u003c/a\u003e\n    \u003c/noscript\u003e\n\n**Options:**\n\nPass options for this plugin as the `asciinema` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### codepen\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://codepen.io/\"\u003eCodePen\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[codepen \u003cuser\u003e \u003chash\u003e]`. E.g. `[codepen AlbertFeynman gjpgjN]`.\nAfter the user and hash, assorted space-separated flags can be added (in any combination/order):\n\n- Add `lazy` to set the CodePen embed to not run until the user interacts with it.\n- Add `light` or `dark` to set the CodePen embed theme (default is `light`).\n- Add `html`, `css`, or `js` to set the default tab for the CodePen embed.\n- Add `result` to set the CodePen embed to default to the Result tab (default, can be combined with other tabs).\n- Add `editable` to set the CodePen embed to allow the code to be edited (requires the embedded user to be Pro).\n- Add any set of digits to set the height of the embed (in pixels).\n\nIf two or more tabs are selected (excluding `result`), `html` will be preferred, followed by `css`, then `js`.\nIf the `result` tab is selected, it can be combined with any other tab to generate a split view.\n\nIf both `light` and `dark` are selected, `dark` will be preferred.\n\n**Example Markdown input:**\n\n    [codepen AlbertFeynman gjpgjN]\n\n    [codepen AlbertFeynman gjpgjN lazy dark 512 html]\n\n**Example HTML output:**\n\n    \u003cp class=\"codepen\" data-height=\"256\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"AlbertFeynman\" data-slug-hash=\"gjpgjN\" style=\"height: 256px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\"\u003e\n        \u003cspan\u003eSee the Pen \u003ca href=\"https://codepen.io/AlbertFeynman/pen/gjpgjN\"\u003egjpgjN by AlbertFeynman\u003c/a\u003e (\u003ca href=\"https://codepen.io/AlbertFeynman\"\u003e@AlbertFeynman\u003c/a\u003e) on \u003ca href='https://codepen.io'\u003eCodePen\u003c/a\u003e.\u003c/span\u003e\n    \u003c/p\u003e\n\n    \u003cp class=\"codepen\" data-height=\"512\" data-theme-id=\"dark\" data-default-tab=\"html\" data-user=\"AlbertFeynman\" data-slug-hash=\"gjpgjN\" data-preview=\"true\" style=\"height: 512px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\"\u003e\n        \u003cspan\u003eSee the Pen \u003ca href=\"https://codepen.io/AlbertFeynman/pen/gjpgjN\"\u003egjpgjN by AlbertFeynman\u003c/a\u003e (\u003ca href=\"https://codepen.io/AlbertFeynman\"\u003e@AlbertFeynman\u003c/a\u003e) on \u003ca href='https://codepen.io'\u003eCodePen\u003c/a\u003e.\u003c/span\u003e\n    \u003c/p\u003e\n    \u003cscript async defer src=\"https://static.codepen.io/assets/embed/ei.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `codepen` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### glitch\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://glitch.com/\"\u003eGlitch\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[glitch \u003cslug\u003e]`. E.g. `[glitch hello-digitalocean]`.\nAfter the slug, some space-separated flags can be added (in any combination/order):\n\n- Add `noattr` to tell Glitch to not show the authors of the project.\n- Add `code` to set the Glitch embed to show the project code by default.\n- Add `notree` to set the Glitch embed to collapse the file tree by default.\n- Add `path=` followed by a file path to set the Glitch embed to show a specific file by default.\n- Add `highlights=` followed by a comma-separated list of line numbers to tell Glitch to highlight those lines.\n- Add any set of digits to set the height of the embed (in pixels).\n\n**Example Markdown input:**\n\n    [glitch hello-digitalocean]\n\n    [glitch hello-digitalocean code 512 notree path=src/app.jsx]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"glitch-embed-wrap\" style=\"height: 256px; width: 100%;\"\u003e\n        \u003ciframe src=\"https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=100\" title=\"hello-digitalocean on Glitch\" allow=\"geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen\" allowFullScreen style=\"height: 100%; width: 100%; border: 0;\"\u003e\n            \u003ca href=\"https://glitch.com/edit/#!/hello-digitalocean\" target=\"_blank\"\u003eView hello-digitalocean on Glitch\u003c/a\u003e\n        \u003c/iframe\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"glitch-embed-wrap\" style=\"height: 512px; width: 100%;\"\u003e\n        \u003ciframe src=\"https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=0\u0026sidebarCollapsed=true\u0026path=src%2Fapp.jsx\" title=\"hello-digitalocean on Glitch\" allow=\"geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen\" allowFullScreen style=\"height: 100%; width: 100%; border: 0;\"\u003e\n            \u003ca href=\"https://glitch.com/edit/#!/hello-digitalocean\" target=\"_blank\"\u003eView hello-digitalocean on Glitch\u003c/a\u003e\n        \u003c/iframe\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `glitch` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### caniuse\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://caniuse.com/\"\u003eCanIUse\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nUses https://caniuse.bitsofco.de/ to provide interactive embeds from CanIUse data.\n\nThe basic syntax is `[caniuse \u003cfeature\u003e]`. E.g. `[caniuse css-grid]`.\nAfter the slug, some space-separated flags can be added (in any combination/order):\n\n- Add `past=` followed by a number to control how many previous browser versions to include (default is 1, supported 0-5).\n- Add `future=` followed by a number to control how many previous browser versions to include (default is 1, supported 0-3).\n- Add `accessible` to set the default color scheme for the CanIUse embed to be accessible colors.\n\n**Example Markdown input:**\n\n    [caniuse css-grid]\n\n    [caniuse css-grid past=5 future=3 accessible]\n\n**Example HTML output:**\n\n    \u003cp class=\"ciu_embed\" data-feature=\"css-grid\" data-periods=\"future_1,current,past_1\" data-accessible-colours=\"false\"\u003e\n        \u003cpicture\u003e\n            \u003csource type=\"image/webp\" srcset=\"https://caniuse.bitsofco.de/image/css-grid.webp\" /\u003e\n            \u003csource type=\"image/png\" srcset=\"https://caniuse.bitsofco.de/image/css-grid.png\" /\u003e\n            \u003cimg src=\"https://caniuse.bitsofco.de/image/css-grid.jpg\" alt=\"Data on support for the css-grid feature across the major browsers from caniuse.com\" /\u003e\n        \u003c/picture\u003e\n    \u003c/p\u003e\n\n    \u003cp class=\"ciu_embed\" data-periods=\"future_3,future_2,future_1,current,past_1,past_2,past_3,past_4,past_5\" data-accessible-colours=\"true\"\u003e\n        \u003cpicture\u003e\n            \u003csource type=\"image/webp\" srcset=\"https://caniuse.bitsofco.de/image/ambient-light.webp\" /\u003e\n            \u003csource type=\"image/png\" srcset=\"https://caniuse.bitsofco.de/image/ambient-light.png\" /\u003e\n            \u003cimg src=\"https://caniuse.bitsofco.de/image/ambient-light.jpg\" alt=\"Data on support for the ambient-light feature across the major browsers from caniuse.com\" /\u003e\n        \u003c/picture\u003e\n    \u003c/p\u003e\n    \u003cscript async defer src=\"https://cdn.jsdelivr.net/gh/ireade/caniuse-embed@v1.3.0/public/caniuse-embed.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `caniuse` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### youtube\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"http://youtube.com/\"\u003eYouTube\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[youtube \u003cid\u003e]`. E.g. `[youtube iom_nhYQIYk]`.\nHeight and width can optionally be set using `[youtube \u003cid\u003e [height] [width]]`. E.g. `[youtube iom_nhYQIYk 380 560]`.\nThe default value for height is 270, and for width is 480.\n\n**Example Markdown input:**\n\n    [youtube iom_nhYQIYk]\n\n**Example HTML output:**\n\n    \u003ciframe src=\"https://www.youtube.com/embed/iom_nhYQIYk\" class=\"youtube\" height=\"270\" width=\"480\" style=\"aspect-ratio: 16/9\" frameborder=\"0\" allowfullscreen\u003e\n        \u003ca href=\"https://www.youtube.com/watch?v=iom_nhYQIYk\" target=\"_blank\"\u003eView YouTube video\u003c/a\u003e\n    \u003c/iframe\u003e\n\n**Options:**\n\nPass options for this plugin as the `youtube` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### wistia\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://wistia.com/\"\u003eWistia\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[wistia \u003cid\u003e]`. E.g. `[wistia 7ld71zbvi6]`.\nHeight and width can optionally be set using `[wistia \u003cid\u003e [height] [width]]`. E.g. `[wistia 7ld71zbvi6 380 560]`.\nThe default value for height is 270, and for width is 480.\n\n**Example Markdown input:**\n\n    [wistia 7ld71zbvi6]\n\n**Example HTML output:**\n\n    \u003ciframe src=\"http://fast.wistia.net/embed/iframe/7ld71zbvi6\" class=\"wistia\" height=\"270\" width=\"480\" style=\"aspect-ratio: 16/9\" frameborder=\"0\" allowfullscreen\u003e\n        \u003ca href=\"http://fast.wistia.net/embed/iframe/7ld71zbvi6\" target=\"_blank\"\u003eView Wistia video\u003c/a\u003e\n    \u003c/iframe\u003e\n\n**Options:**\n\nPass options for this plugin as the `wistia` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n\n### vimeo\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://vimeo.com/\"\u003eVimeo\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[vimeo \u003curl\u003e]`. E.g. `[vimeo https://player.vimeo.com/video/329272793]`.\nHeight and width can optionally be set using `[vimeo \u003curl\u003e [height] [width]]`. E.g. `[vimeo https://player.vimeo.com/video/329272793 380 560]`.\nThe default value for height is 270, and for width is 480.\n\n**Example Markdown input:**\n\n    [vimeo https://player.vimeo.com/video/329272793]\n\n**Example HTML output:**\n\n    \u003ciframe src=\"https://player.vimeo.com/video/329272793\" class=\"vimeo\" height=\"270\" width=\"480\" style=\"aspect-ratio: 16/9\" frameborder=\"0\" allowfullscreen\u003e\n        \u003ca href=\"https://player.vimeo.com/video/329272793\" target=\"_blank\"\u003eView vimeo video\u003c/a\u003e\n    \u003c/iframe\u003e\n\n**Options:**\n\nPass options for this plugin as the `vimeo` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### twitter\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://twitter.com/\"\u003eTwitter\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[twitter \u003ctweet\u003e]`. E.g. `[twitter https://twitter.com/MattIPv4/status/1576415168426573825]`.\nAfter the tweet, assorted space-separated flags can be added (in any combination/order):\n\n- Add `light` or `dark` to set the card theme (default is `light`).\n- Add `left`, `center`, or `right` to set the alignment of the embed (default is `left`).\n- Add any set of digits to set the width of the embed (in pixels, between 250 and 550, default is 550).\n\nIf two or more alignments are selected, `left` will be preferred, followed by `center`, then `right`.\n\nIf both `light` and `dark` are selected, `dark` will be preferred.\n\nIf a width outside the range of 250-550 is selected, a clamped value will be used.\n\n**Example Markdown input:**\n\n    [twitter https://twitter.com/MattIPv4/status/1576415168426573825]\n\n    [twitter https://twitter.com/MattIPv4/status/1576415168426573825 left 400 dark]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"twitter\"\u003e\n        \u003cblockquote class=\"twitter-tweet\" data-dnt=\"true\" data-width=\"550\" data-theme=\"light\"\u003e\n            \u003ca href=\"https://twitter.com/MattIPv4/status/1576415168426573825\"\u003eView tweet by @MattIPv4\u003c/a\u003e\n        \u003c/blockquote\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"twitter\" align=\"left\"\u003e\n        \u003cblockquote class=\"twitter-tweet\" data-dnt=\"true\" data-width=\"400\" data-theme=\"dark\"\u003e\n            \u003ca href=\"https://twitter.com/MattIPv4/status/1576415168426573825\"\u003eView tweet by @MattIPv4\u003c/a\u003e\n        \u003c/blockquote\u003e\n    \u003c/div\u003e\n    \u003cscript async defer src=\"https://platform.twitter.com/widgets.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `twitter` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### instagram\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for \u003ca href=\"https://instagram.com/\"\u003eInstagram\u003c/a\u003e embeds in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[instagram \u003cpost\u003e]`. E.g. `[instagram https://www.instagram.com/p/CkQuv3_LRgS]`.\nAfter the post, assorted space-separated flags can be added (in any combination/order):\n\n- Add `caption` to include caption under the post.\n- Add `left`, `center`, or `right` to set the alignment of the embed (default is `left`).\n- Add any set of digits to set the width of the embed (in pixels, between 326 and 550, default is 326 as set by Instagram's embed.js).\n\nIf two or more alignments are selected, `left` will be preferred, followed by `center`, then `right`.\n\nIf a width outside the range of 326-550 is selected, a clamped value will be used.\n\n**Example Markdown input:**\n\n    [instagram https://www.instagram.com/p/CkQuv3_LRgS]\n\n    [instagram https://www.instagram.com/p/CkQuv3_LRgS left caption 400]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"instagram\"\u003e\n        \u003cblockquote class=\"instagram-media\"\n            data-instgrm-permalink=\"https://www.instagram.com/p/CkQuv3_LRgS\"\n            data-instgrm-version=\"14\"\u003e\n                \u003ca href=\"https://instagram.com/p/CkQuv3_LRgS\"\u003eView post\u003c/a\u003e\n        \u003c/blockquote\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"instagram\" align=\"left\"\u003e\n        \u003cblockquote class=\"instagram-media\"\n            style=\"width: 400px;\"\n            data-instgrm-permalink=\"https://www.instagram.com/p/CkQuv3_LRgS\"\n            data-instgrm-version=\"14\"\n            data-instgrm-captioned\u003e\n                \u003ca href=\"https://instagram.com/p/CkQuv3_LRgS\"\u003eView post\u003c/a\u003e\n        \u003c/blockquote\u003e\n    \u003c/div\u003e\n    \u003cscript async defer src=\"https://www.instagram.com/embed.js\" type=\"text/javascript\" onload=\"window.instgrm \u0026\u0026 window.instgrm.Embeds.process()\"\u003e\u003c/script\u003e\n\n**Options:**\n\nPass options for this plugin as the `instagram` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### slideshow\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for Slideshow in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[slideshow \u003curl1\u003e \u003curl2\u003e \u003c...urls\u003e]`. E.g., `[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png]`.\nHeight and width can optionally be set using `[slideshow \u003curl1\u003e \u003curl2\u003e \u003c...urls\u003e [height] [width]]`. E.g., `[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png 380 560]`.\nThe default value for height is 270 and for width is 480.\n\n**Example Markdown input:**\n\n    [slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"slideshow\" style=\"height: 270px; width: 480px;\"\u003e\n        \u003cdiv class=\"action left\" onclick=\"(() =\u003e this.parentNode.getElementsByClassName('slides')[0].scrollLeft -= 480)()\"\u003e\u0026#8249;\u003c/div\u003e\n        \u003cdiv class=\"action right\" onclick=\"(() =\u003e this.parentNode.getElementsByClassName('slides')[0].scrollLeft += 480)()\"\u003e\u0026#8250;\u003c/div\u003e\n        \u003cdiv class=\"slides\"\u003e\u003cimg src=\"https://assets.digitalocean.com/banners/python.png\" alt=\"Slide #1\" /\u003e\u003cimg src=\"https://assets.digitalocean.com/banners/javascript.png\" alt=\"Slide #2\" /\u003e\u003cimg src=\"https://assets.digitalocean.com/banners/nodejs.png\" alt=\"Slide #3\" /\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `slideshow` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### compare\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for Image Comparison in Markdown, as block syntax.\u003c/summary\u003e\n\nThe basic syntax is `[compare \u003curl1\u003e \u003curl2\u003e]`. E.g., `[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png]`.\nHeight and width can optionally be set using `[compare \u003curl1\u003e \u003curl2\u003e [height] [width]]`. E.g., `[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png 500 560]`.\nThe default value for height is 270 and for width is 480.\n\n**Example Markdown input:**\n\n    [compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png]\n\n**Example HTML output:**\n\n    \u003cdiv class=\"image-compare\" style=\"--value:50%; height: 270px; width: 480px;\"\u003e\n        \u003cimg class=\"image-left\" src=\"https://assets.digitalocean.com/banners/python.png\" alt=\"Image left\"/\u003e\n        \u003cimg class=\"image-right\" src=\"https://assets.digitalocean.com/banners/javascript.png\" alt=\"Image right\"/\u003e\n        \u003cinput type=\"range\" class=\"control\" min=\"0\" max=\"100\" value=\"50\" oninput=\"this.parentNode.style.setProperty('--value', `${this.value}%`)\" /\u003e\n        \u003csvg class=\"control-arrow\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"\u003e\u003cpath fill=\"currentColor\" d=\"M504.3 273.6c4.9-4.5 7.7-10.9 7.7-17.6s-2.8-13-7.7-17.6l-112-104c-7-6.5-17.2-8.2-25.9-4.4s-14.4 12.5-14.4 22l0 56-192 0 0-56c0-9.5-5.7-18.2-14.4-22s-18.9-2.1-25.9 4.4l-112 104C2.8 243 0 249.3 0 256s2.8 13 7.7 17.6l112 104c7 6.5 17.2 8.2 25.9 4.4s14.4-12.5 14.4-22l0-56 192 0 0 56c0 9.5 5.7 18.2 14.4 22s18.9 2.1 25.9-4.4l112-104z\"/\u003e\u003c/svg\u003e\n    \u003c/div\u003e\n\n**Options:**\n\nPass options for this plugin as the `compare` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### underline\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for underline markup across all Markdown.\u003c/summary\u003e\n\nThe syntax for underline text is `__`. E.g. `__hello world__`.\nThis replaces the default behaviour for the syntax, which would be bold.\nThis syntax is treated as regular inline syntax, similar to bold or italics.\n\n**Example Markdown input:**\n\n    __test__\n\n**Example HTML output:**\n\n    \u003cp\u003e\u003cu\u003etest\u003c/u\u003e\u003c/p\u003e\n\n**Options:**\n\nPass options for this plugin as the `underline` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### fence_label\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for label markup at the start of a fence, translating to a label div before the fence if there is a toolbar rendered or a label defined..\u003c/summary\u003e\n\nMarkup must be at the start of the fence, though may be preceded by other metadata markup using square brackets.\n\n**Example Markdown input:**\n\n    ```\n    [label test]\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cdiv class=\"code-label\" title=\"test\"\u003etest\u003c/div\u003e\n    \u003cpre\u003e\u003ccode\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_label` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `className` (`string`, optional, defaults to `'code-label'`): Class name to use on the label div.\n\u003c/details\u003e\n\n### fence_secondary_label\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for secondary label markup at the start of a fence, translating to a label div inside the fence.\u003c/summary\u003e\n\nMarkup must be at the start of the fence, though may be preceded by other metadata markup using square brackets.\n\n**Example Markdown input:**\n\n    ```\n    [secondary_label test]\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cpre\u003e\u003ccode\u003e\u003cdiv class=\"secondary-code-label\" title=\"test\"\u003etest\u003c/div\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_secondary_label` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `className` (`string`, optional, defaults to `'secondary-code-label'`): Class name to use on the label div.\n\u003c/details\u003e\n\n### fence_environment\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for environment markup at the start of a fence, translating to a class.\u003c/summary\u003e\n\nMarkup must be at the start of the fence, though may be preceded by other metadata markup using square brackets.\n\n**Example Markdown input:**\n\n    ```\n    [environment test]\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cpre\u003e\u003ccode class=\"environment-test\"\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_environment` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `allowedEnvironments` (`string[]`, optional): List of case-sensitive environments that are allowed. If not an array, all environments are allowed.\n- `extraClasses` (`string`, optional, defaults to `''`): String of extra classes to set when an environment is used.\n\u003c/details\u003e\n\n### fence_prefix\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for a prefix to be set for each line on a fenced code block.\u003c/summary\u003e\n\nThe prefix is set as part of the 'info' provided immediately after the opening fence.\n\nThe custom prefix can be set by:\n\n- Adding the 'line_numbers' flag to the info.\n  This will set each line's prefix to be incrementing line numbers.\n\n- Adding the 'command' flag to the info.\n  This will set each line's prefix to be a '$' character.\n  This will also add the 'bash' flag to the info, which can be used for language highlighting.\n\n- Adding the 'super_user' flag to the info.\n  This will set each line's prefix to be a '#' character.\n  This will also add the 'bash' flag to the info, which can be used for language highlighting.\n\n- Adding the 'custom_prefix(\u003cprefix\u003e)' flag to the info.\n  `\u003cprefix\u003e` can be any string that does not contain spaces. Use `\\s` to represent spaces.\n  This will also add the 'bash' flag to the info, which can be used for language highlighting.\n\n**Example Markdown input:**\n\n    ```custom_prefix(test)\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cpre\u003e\u003ccode class=\"prefixed custom_prefix language-bash\"\u003e\u003col\u003e\u003cli data-prefix=\"test\"\u003ehello\n    \u003c/li\u003e\u003cli data-prefix=\"test\"\u003eworld\n    \u003c/li\u003e\u003c/ol\u003e\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_prefix` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `delimiter` (`string`, optional, defaults to `','`): String to split fence information on.\n\u003c/details\u003e\n\n### fence_pre_attrs\n\n\u003cdetails\u003e\n\u003csummary\u003eMove all attributes from the opening `code` tag of a fenced code block to the `pre` tag.\u003c/summary\u003e\n\n**Example Markdown input:**\n\n    ```js\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cpre class=\"language-js\"\u003e\u003ccode\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_pre_attrs` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n_No options are available for this plugin._\n\u003c/details\u003e\n\n### fence_classes\n\n\u003cdetails\u003e\n\u003csummary\u003eFilters classes on code and pre tags in fences.\u003c/summary\u003e\n\n**Example Markdown input:**\n\n    ```test\n    hello\n    world\n    ```\n\n    ```bad\n    hello\n    world\n    ```\n\n**Example HTML output:**\n\n    \u003cpre\u003e\u003ccode class=\"language-test\"\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n    \u003cpre\u003e\u003ccode class=\"\"\u003ehello\n    world\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `fence_classes` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `allowedClasses` (`string[]`, optional): List of case-sensitive classes that are allowed. If not an array, all classes are allowed.\n\u003c/details\u003e\n\n### heading_id\n\n\u003cdetails\u003e\n\u003csummary\u003eApply Ids to all rendered headings and generate an array of headings.\u003c/summary\u003e\n\nHeadings are available after a render via `md.headings`.\nEach item in the array is an object with the following properties:\n\n- `slug`: The slug Id given to the heading (e.g. `my-heading`).\n- `content`: The raw Markdown content of the heading (e.g. `My **Heading**`).\n- `text`: The plain-text content of the heading (e.g. `My Heading`).\n- `rendered`: The rendered HTML content of the heading (e.g. `My \u003cstrong\u003eHeading\u003c/strong\u003e`).\n- `level`: The heading level (e.g. `1`).\n\n**Example Markdown input:**\n\n    # Hello World!\n\n**Example HTML output:**\n\n    \u003ch1 id=\"hello-world\"\u003e\u003ca class=\"hash-anchor\" href=\"#hello-world\" aria-hidden=\"true\"\u003e\u003c/a\u003eHello World!\u003c/h1\u003e\n\n**Options:**\n\nPass options for this plugin as the `heading_id` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `sluggify` (`function(string): string`, optional): Custom function to convert heading content to a slug Id.\n- `hashLink` Set this property to `false` to disable this feature.\n    - `maxLevel` (`number`, optional, defaults to `3`): Max heading level to generate hash links for.\n    - `class` (`string`, optional, defaults to `hash-anchor`): Class name to use on the anchor tag.\n    - `position` (`'before'|'after'`, optional, defaults to `before`): Position of the anchor tag relative to the heading.\n    - `linkHeading` (`boolean`, optional, defaults to `true`): Whether to link the heading text to the hash link.\n    - `clipboard` (`boolean`, optional, defaults to `true`): Whether to write the hash link to the clipboard on click.\n\u003c/details\u003e\n\n### image_settings\n\n\u003cdetails\u003e\n\u003csummary\u003eAdd support for defining settings on images, such as size and alignment.\u003c/summary\u003e\n\nThe syntax for this is `{ width=\u003cwidth\u003e height=\u003cheight\u003e align=\u003calignment\u003e }`, at the end of the image markup.\nE.g. `![alt](test.png \"title\"){ width=100 height=200 align=left }`.\nAll settings are optional, and the order does not matter.\n\nBy default, the width and height can be plain number (`100`), pixels (`100px`), or percentage (`100%`).\nOther units can be supported by passing an array of unit strings via the `sizeUnits` option.\n\nAlignment can be left unset, which will center the image, or can be set to either `left` or `right`.\n\n**Example Markdown input:**\n\n    ![alt](test.png \"title\"){ width=100 height=200 align=left }\n\n**Example HTML output:**\n\n    \u003cp\u003e\u003cimg src=\"test.png\" alt=\"alt\" title=\"title\" width=\"100\" height=\"200\" align=\"left\"\u003e\u003c/p\u003e\n\n**Options:**\n\nPass options for this plugin as the `image_settings` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `sizeUnits` (`string[]`, optional, defaults to `['', 'px', '%']`): Image size units to allow.\n\u003c/details\u003e\n\n### link_attributes\n\n\u003cdetails\u003e\n\u003csummary\u003eApply custom attributes to all links in the Markdown content.\u003c/summary\u003e\n\nIf an object is provided, the provided attributes are merged with the existing attributes.\n\nIf a function is provided, the existing attributes are passed to it,\n and the existing attributes are replaced (not merged) with the return value.\n\n**Options:**\n\nPass options for this plugin as the `link_attributes` property of the `do-markdownit` plugin options.\nThis plugin is disabled by default, pass an object to enable it.\n\n- `attributes` (`Object\u003cstring, string\u003e|function(Object\u003cstring, string\u003e): Object\u003cstring, string\u003e`): Object or function to generate attributes for links.\n\u003c/details\u003e\n\n### prismjs\n\n\u003cdetails\u003e\n\u003csummary\u003eApply PrismJS syntax highlighting to fenced code blocks, based on the language set in the fence info.\u003c/summary\u003e\n\nThis loads a custom PrismJS plugin to ensure that any existing HTML markup inside the code block is preserved.\nThis plugin is similar to the default `keep-markup` plugin, but works in a non-browser environment.\n\n**Example Markdown input:**\n\n    ```nginx\n    server {\n        try_files test =404;\n    }\n    ```\n\n**Example HTML output:**\n\n    \u003cpre class=\"language-nginx\"\u003e\u003ccode class=\"language-nginx\"\u003e\u003cspan class=\"token directive\"\u003e\u003cspan class=\"token keyword\"\u003eserver\u003c/span\u003e\u003c/span\u003e \u003cspan class=\"token punctuation\"\u003e{\u003c/span\u003e\n        \u003cspan class=\"token directive\"\u003e\u003cspan class=\"token keyword\"\u003etry_files\u003c/span\u003e test =404\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n    \u003cspan class=\"token punctuation\"\u003e}\u003c/span\u003e\n    \u003c/code\u003e\u003c/pre\u003e\n\n**Options:**\n\nPass options for this plugin as the `prismjs` property of the `do-markdownit` plugin options.\nSet this property to `false` to disable this plugin.\n\n- `delimiter` (`string`, optional, defaults to `','`): String to split fence information on.\n- `logging` (`boolean`, optional, defaults to `false`): Whether to log errors to the console.\n\u003c/details\u003e\n\n### limit_tokens\n\n\u003cdetails\u003e\n\u003csummary\u003eFilters and transforms tokens in the token stream.\u003c/summary\u003e\n\n**Options:**\n\nPass options for this plugin as the `limit_tokens` property of the `do-markdownit` plugin options.\nThis plugin is disabled by default, pass an object to enable it.\n\n- `allowedTokens` (`string[]`): A list of Markdown tokens that should render\n- `transformTokens` (`Object\u003cstring, function(Token): Token\u003e`): An object where the keys are Markdown tokens that should be transformed.\n  The transformation is done based on the value which is a function that expects a [Markdown token](https://markdown-it.github.io/markdown-it/#Token) as a param\n  and returns the transformed token.\n\u003c/details\u003e\n\n\n## PrismJS\n\nAs well as this plugin being for Markdown-It, we also include a modified version of PrismJS as part\nof the package, wrapped and modified in such a way that it will avoid polluting the global or window\nscopes with a Prism instance. Instead, each plugin or component for Prism expects to be called with\na Prism instance passed to it.\n\n```js\nconst Prism = require('@digitalocean/do-markdownit/vendor/prismjs');\n\nrequire('@digitalocean/do-markdownit/vendor/prismjs/plugins/toolbar/prism-toolbar')(Prism);\nrequire('@digitalocean/do-markdownit/vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard')(Prism);\n\nPrism.highlightAll();\n```\n\n### Reducing bundle size\n\nPrismJS is a large library that includes a *lot* of language definitions. By default, we use a\ndynamic require statement that allows for any language to be loaded for Prism. For bundlers like\nWebpack, this will result in a very large chunk being generated that contains all the possible\nlanguages that could be used -- these will all be in a single chunk as they need to be consumed\nsynchronously in the plugin, so a dynamic async import is not possible.\n\nTo reduce the size of the bundle you generate, you may wish to restrict what language definitions\nare included. You can do this by restricting what files from\n`@digitalocean/do-markdownit/vendor/prismjs/components` are included in the bundle --\n`prism-core.js` is the only \"required\" file, all others are language definitions.\n\nWe expose two utilities to help with this. First is the `getDependencies` method in\n`util/prism_util.js` which takes a PrismJS language and will return all the language dependencies\nthat also need to be loaded for it. For Webpack users specifically, we also expose a\nmethod in `util/prism_webpack.js` that takes an array of PrismJS languages to include and\nreturns a Webpack plugin you can include to restrict the paths included in the bundle.\n\n```js\nconst { getDependencies } = require('@digitalocean/do-markdownit/util/prism_util');\n\nconsole.log(getDependencies('javascript')); // [ 'clike', 'regex', 'markup' ]\nconsole.log(getDependencies('javascript', false)); // [ 'clike', 'markup' ]\n```\n\n```js\nconst restrictWebpack = require('@digitalocean/do-markdownit/util/prism_webpack');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    restrictWebpack([ 'javascript', 'nginx' ]),\n  ],\n};\n```\n\n### Keep HTML plugin\n\nAlongside the modified version of Prism, this package also includes a custom Prism plugin designed\nto preserve HTML within code that is highlighted by Prism. This is similar to Prism's default Keep\nMarkdown plugin, but has no dependency on being run in a browser context with the DOM available.\n\nWhen this plugin is enabled, it will handle preserving any HTML that is present within the code when\nPrism highlights it, including the lower-level `Prism.highlight` method that takes a string of code.\nEnabling this plugin will also ensure that the standard Keep Markdown plugin is disabled, so that it\ndoes not conflict with this plugin.\n\n```js\nconst Prism = require('@digitalocean/do-markdownit/vendor/prismjs');\n\nrequire('@digitalocean/do-markdownit/util/prism_keep_html')(Prism);\n\nPrism.highlight('console.log(\"\u003cmark\u003eHello, world!\u003c/mark\u003e\");', Prism.languages.javascript, 'javascript');\n```\n\n\n## Styles\n\nThis package also includes a set of SCSS stylesheets aimed at providing standard styles for our\nusage of Markdown within the DigitalOcean community, styling the features provided by this package\nas well as styling for standard Markdown.\n\nThese are broken up by component, and can be found in the [`styles`](./styles) directory. There is\nalso a subdirectory within for [DigitalOcean-specific styles](./styles/digitalocean) (e.g. specific\ncallout classes that we use).\n\nExample usage:\n\n```scss\n.markdown {\n    @import \"@digitalocean/do-markdownit/styles\";\n}\n```\n\nNote that if you're planning to use this in a way that will ultimately pass through Webpack's\ncss-loader to produce CSS modules (such as Next.js SCSS module), you may need to wrap the import in\na block using the `:global` pseudo-selector to ensure the classes inside aren't exported as well:\n\n```scss\n.markdown {\n    :global {\n        @import \"@digitalocean/do-markdownit/styles\";\n    }\n}\n```\n\nIf you're importing this as a context where there will be no parent selector, you will need to set\n`$root-text-styles` to `false` to prevent the default text styling that uses a `\u0026 {` selector from\nbeing loaded:\n\n_Importing the styles globally is not recommended, as these Markdown styles may collide with other\nparts of your document._\n\n```scss\n$root-text-styles: false;\n@import \"@digitalocean/do-markdownit/styles\";\n```\n\n### SCSS Variables\n\n\u003c!--\nVariables listed here should be sorted based on the filename, and then by variable name.\n--\u003e\n\n| Variable                                 | Default                | Usage                                                       | File                                                                |\n|------------------------------------------|------------------------|-------------------------------------------------------------|---------------------------------------------------------------------|\n| `$callouts-class` _(string)_             | `callout`              | The class name used for the `callout` plugin.               | [`_callouts.scss`](./styles/_callouts.scss)                         |\n| `$callouts-label-class` _(string)_       | `callout-label`        | The class name used for labels in the `callout` plugin.     | [`_callouts.scss`](./styles/_callouts.scss)                         |\n| `$code-label-class` _(string)_           | `code-label`           | The class name used for the `fence_label` plugin.           | [`_code_label.scss`](./styles/_code_label.scss)                     |\n| `$code-secondary-label-class` _(string)_ | `secondary-code-label` | The class name used for the `fence_secondary_label` plugin. | [`_code_secondary_label.scss`](./styles/_code_secondary_label.scss) |\n| `$collapsible-heading-class` _(string)_  | `collapsible`          | The class name used for the `collapsible_heading` plugin.   | [`_collapsible.scss`](./styles/_collapsible.scss)                   |\n| `$columns-inner-class` _(string)_        | `column`               | The inner class name used for the `columns` plugin.         | [`_columns.scss`](./styles/_columns.scss)                           |\n| `$columns-outer-class` _(string)_        | `columns`              | The outer class name used for the `columns` plugin.         | [`_columns.scss`](./styles/_columns.scss)                           |\n| `$hash-anchor-class` _(string)_          | `hash-anchor`          | The anchor class name used for the `heading_id` plugin.     | [`_heading-id.scss`](./styles/_heading_id.scss)                     |\n| `$rsvp-button-class` _(string)_          | `rsvp`                 | The class name used for the `rsvp_button` plugin.           | [`_rsvp_button.scss`](./styles/_rsvp_button.scss)                   |\n| `$table-wrapper-class` _(string)_        | `table-wrapper`        | The class name used for the `table_wrapper` plugin.         | [`_table_wrapper.scss`](./styles/_table_wrapper.scss)               |\n| `$terminal-button-class` _(string)_      | `terminal`             | The class name used for the `terminal_button` plugin.       | [`_terminal_button.scss`](./styles/_terminal_button.scss)           |\n| `$root-text-styles` _(boolean)_          | `true`                 | Enable or disable the `\u0026 {` selector for root text styles.  | [`_typography.scss`](./styles/_typography.scss)                     |\n\nAlongside these variables used for controlling specific styles, there is also the\n[`_theme.scss`](./styles/_theme.scss) file that contains all the colors used by the package.\n\n\n## Contributing\n\n### Development\n\nTo get started working with this repository, clone it locally first. Ensure that you have the\ncorrect version of Node.js as specified in the `.nvmrc` file, and then install the dependencies\nfollowing the lockfile by running `npm ci`.\n\nYou can then start up the demo server by running `npm run dev`. This runs a barebones instance of\nWebpack with hot-reload enabled that provides a real-time input that renders to Markdown, using the\nplugins in this package as well as the SCSS styling.\n\nWe have two key directories that contain plugins in this repository -- `modifiers` and `rules`.\n\nThe `modifiers` directory contains plugins that modify the output of existing Markdown-It render\nfunctions, manipulating the rendered HTML results or wrapping existing parsing and rendering rules\nin the core library.\n\nThe `rules` directory contains plugins that add net-new syntax rules to the Markdown-It parser, both\ninline and block. Within this is the `embeds` subdirectory, which contains plugins that add what we\ncall embed extensions to Markdown, such as embedding a CodePen, YouTube video, etc.\n\nEvery plugin that is written should also have tests written for it, ensuring that it functions as\nexpected. As well as isolated tests, example usage of the plugin should be added to\n`fixtures/full-input.md` to test the plugin when integrated into the main package (the plugin should\nbe loaded in `index.js`).\n\nThis repo makes use of Jest to run all the tests, and you can run the full suite with `npm test`.\n\nWe also have the `styles` directory, which contains the SCSS files provided by the package to style\nall the custom functionality this plugin provides, as well as core Markdown styles.\n\nWe also make use of ESLint and Stylelint to enforce a consistent style of code, as well as checking\nthat JSDoc comments are present with valid types and descriptions. You can run the linter for both\nJS and SCSS with `npm run lint`, or using `npm run lint:js` and `npm run lint:scss` respectively.\n\nBoth linters also support auto-fixing some issues, and this can be invoked with `npm run lint:fix`,\nor by using `npm run lint:fix:js` and `npm run lint:fix:scss` for the relevant files.\n\n### Pull Requests \u0026 Issues\n\nWe welcome contributions to this repository in the form of pull requests or issues -- requesting or\nadding new features, reporting or fixing bugs in existing plugins, cleaning up code, adding more\ntests, etc.\n\nHowever, please keep in mind that ultimately this plugin is built for the DigitalOcean Community,\nand so we may not be able to accept every new feature that is proposed. We recommend opening an\nissue first if you're interested in contributing a new feature, so that we can check it would be in\nscope for the plugin before you put time into the development of it.\n\nWhen opening a pull request, please make sure to fill out the provided template, making it clear\nwhat your pull request is changing and why it is doing that. Include examples of how your changes\nbehave in the pull request, through example Markdown syntax and what the resultant HTML is.\n\n\n## License\n\nThis plugin is licensed under the [Apache License 2.0](LICENSE).\n\nCopyright 2023 DigitalOcean.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalocean%2Fdo-markdownit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalocean%2Fdo-markdownit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalocean%2Fdo-markdownit/lists"}