search

BlueOakJS / markdownit-loader

Webpack loader to translate markdown to HTML using markdownit
MIT License
12 stars 11 forks source link

Question: Is `section` container tag configurable? #4

Open aminimalanimal opened 6 years ago

aminimalanimal commented 6 years ago

First, thanks for writing this loader. I found it through your comment on vue-markdown-loader, and am currently toying with the concept of using markdown as the lang for some of my Vue templates.

I noticed that it outputs a section tag around the content. section tags are sometimes used by assistive technologies to parse the page's outline, so I was hoping to switch the tag to a div for semantic neutrality. I've been looking through the documentation and haven't found a configuration option. Is there one?

And is it possible to add a class to the container?

NemoAlex commented 6 years ago

My question is why this tag is needed, and what if we just remove it ?

aminimalanimal commented 6 years ago

It's needed because Vue component templates must return a root element, and there's no way to choose your own root element within Markdown's syntax.

garyo commented 5 years ago

I'm using markdownit with nuxt.

I'd also love to have a configurable class (default "markdownit" perhaps) added to the top-level <section> or <div> or whatever it may be. That would make it really easy to style the result as

.markdownit p {
  font-size: 18px;
}
.markdownit h1 {
  font-size: 24px;
}
.markdownit {
  background: #444;
}
awmartin commented 4 years ago

I would like this as well. I'm not using markdownit in a template scenario, so I don't expect the extra tag to account for the template use case.

The extra section tag causes complications with the corresponding CSS, which now has to account for this special case when I'm rendering markdown.

In addition, it means that I can't use section tags appropriately to structure the surrounding HTML. Now I have sections within sections that I have to rationalize.