vscode-markdown-extended icon indicating copy to clipboard operation
vscode-markdown-extended copied to clipboard

Render header ID and/or preamble ID in preview

Open gmccullo opened this issue 1 year ago • 0 comments

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.

gmccullo avatar Mar 02 '24 08:03 gmccullo