zerodevx
Rendering of Markdown Extra's Special Attributes
Great product! Thank you.
I've used Google Docs to export markdown files into a website. This works well but for one issue: Adding a table of contents.
Unfortunately, Google Docs will automatically add an curly-braced anchor to every header.
For example, Google Docs will generate this:
TOC:
[My Heading 1](#my-heading-1)
[My Heading 2](#my-heading-2)
[My Heading 3](#my-heading-3)
## My Heading 1 {#my-heading-1}
## My Heading 2 {#my-heading-2}
## My Heading 3 {#my-heading-3}
When rendered in zero-md, this will cause the curly braces content to appear on the heading lines (ie. "My Heading 1 {#my-heading-1}").
This syntax appears to be part of the Markdown Extra's 'Special attributes': https://michelf.ca/projects/php-markdown/extra/#spe-attr
Markdown will automatically generate id anchors for headings, so this extra syntax from the Google Docs export is unnecessary, but cannot be disabled.
Could zero-md have an option to either support, or strip out, Markdown Extra special attributes?
It would mean not needing to post-process .md files exported from Google Docs with each update.
Thank you.
You can use a marked extension to implement the Markdown Extended Syntax: https://www.npmjs.com/package/marked-custom-heading-id
Load zero-md like so:
<head>
<script type="module">
import customHeadingId from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
import ZeroMd from 'https://cdn.jsdelivr.net/npm/zero-md@3'
customElements.define('zero-md', class extends ZeroMd {
async load() {
await super.load()
this.marked.use(customHeadingId())
}
})
</script>
</head>
Example: https://plnkr.co/edit/wOR3sxXrJgn56bar
