javascriptvue.jsmarkdownshowdown

Vue Showdown Default Classes

I want to achieve the following say i the MD as

md:'#H1'

I want to render it as

<h1>H1</h1>

I was able to achieve this using VueShowdown

but I want add default class to every h1 tag like

<h1 class="custom">H1</h1>

I got something similar to this here.

But I don't know how to use this in Vue.

Is it even possible in VueShowdown?

Is there any better library which has this functionality?

Solution

  • You can create a simple directive:

    Vue.directive('default-classes', (parentElement) {
  const els = parentElement.querySelectorAll('h1')

  els.forEach((el) => {
    el.classList.add('custom')
  })
  
})

    Then apply that directive to the VueShowdown component:

    <VueShowdown v-default-classes :markdown="markdownBinding" />