search

qjebbs / vscode-markdown-extended

Extended syntaxes to built-in markdown & What you see is what you get exporter.
MIT License
123 stars 25 forks source link

Render header ID and/or preamble ID in preview #159

Open gmccullo opened 5 months ago

gmccullo commented 5 months ago

If a header has an ID, it would be nice to have that ID applied to a section tag in the rendered HTML in the preview. For example:

markdown

#### foobar{#special}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

current preview

<div class="markdown-body">
  <h2 id="foobar">foobar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

desired preview

<div class="markdown-body">
  <section id="special">
    <h2 id="foobar">foobar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </section>
</div>

Rationale: This is basically what Pandoc does when it converts markdown to html or epub. And that lets us use ID selectors in CSS to apply styles to a particular section of the document:

#special {
  font-size: large;
}

Since the "special" id is not in the preview HTML that CSS selector doesn't work in preview. You can only see it after compiling the epub.