how to add data-attribute at markdown code block?

661 Views Asked by At

I want this format

Hello I want to be make this format using markdown

<pre class='language-javascript' data-line='2'>
<code class='language-javascript'>
console.log('asd');
console.log('asd');
console.log('asd');
console.log('asd');
</code>
</pre>

I tried...

How can I write that with '```' this keyword

I been tried below codes

// please recognize ' to `

'''javascript {line=2}
console.log('asd');
console.log('asd');
console.log('asd');
'''

'''javascript {data-line=2}
console.log('asd');
console.log('asd');
console.log('asd');
'''\n

'''javascript data-line=2
console.log('asd');
console.log('asd');
console.log('asd');
'''\n

'''javascript line=2
console.log('asd');
console.log('asd');
console.log('asd');
'''\n

I already know able to using html tags at markdown, but I want to markdown grammer.

markdown reader

Im using remark and remark-html

export default async function markdownToHtml(markdown: string) {
  const result = await remark()
    .use(html, { sanitize: false })
    .process(mark`enter code here`down);
  return result.toString();
}

code highlight with prismjs

1

There are 1 best solutions below

1
On

I didn't saw remark-prism's document below

\`\`\`diff-javascript[class="line-numbers"][class="diff-highlight"]