copy to clipboard button

[mohdniyazkhan]

As you mentioned regarding copy to clipboard button in your github document, please check the link below
https://zerodevx.github.io/zero-md/v2/?a=recipes.md
In this link I can see cdn link has been used in explaining the example, if I download the dependency in node modules, then how I can use it.
Is it possible or not?

[zerodevx]

For v3, add this feature like so:

zero-md/docs/index.html

Lines 12 to 48 in f820ded

	<script type="module">
	import ZeroMd from 'https://cdn.jsdelivr.net/npm/zero-md@3'
	customElements.define(
	'zero-md',
	class extends ZeroMd {
	async load() {
	await super.load()
	this.template += `<style>.zero-md-copy{position:relative;}.zero-md-copy button{position:absolute;top:0.5rem;right:0.75rem;cursor:pointer;opacity:0.9;}</style>`
	}
	async parse(obj) {
	const parsed = await super.parse(obj)
	if (!navigator.clipboard) return parsed
	const tpl = document.createElement('template')
	tpl.innerHTML = parsed
	tpl.content.querySelectorAll('pre>code').forEach((code) => {
	const pre = code.parentElement
	pre.replaceWith(
	this.frag(`<div class="zero-md-copy">${pre.outerHTML}<button>Copy</button></div>`)
	)
	})
	return tpl.innerHTML
	}
	async render(obj) {
	const out = await super.render(obj)
	this.root.querySelectorAll('.zero-md-copy button').forEach((btn) => {
	btn.onclick = async () => {
	const code = btn.previousElementSibling.firstElementChild.innerText
	await navigator.clipboard.writeText(code)
	btn.innerText = 'Copied!'
	setTimeout(() => (btn.innerText = 'Copy'), 2500)
	}
	})
	return out
	}
	}
	)
	</script>