How to reference the text below a heading?

[avinal]

I want to customize the parser to output in a way so that I can use an existing style sheet. For example my markdown is:

## This is a level 2  heading

This is some text.
More lines.

End Line

and it should produce:

<section aria-labelledby="this-is-a-level-2-heading">
  <h2 id="this-is-a-level-2-heading">
    <a href="#this-is-a-level-2-heading">This is a level 2 heading</a>
  </h2>
  <div class="section-content">
    <p>
      This is some text.
      More lines.
      <br>
      End Line
    </p>
  </div>
</section>

I can modify the headings but I am not sure how to wrap the section in <section ..><div>.

This is my code for heading.

renderer.heading = (text, level, raw) => {
        if (level === 1) {
          return `<h${level}>${text}</h${level}>`
        }
        const escapedText = text.trim().toLowerCase().replace(/[^\w]+/g, '-');

        return `
            <section aria-labelledby="${escapedText}">
            <h${level} id="${escapedText}">
              <a title="Permalink to ${text}" href="#${escapedText}">
                ${text}
              </a>
            </h${level}>
            <div class="section-content">
              ${raw}
              </div>
              </section>`;
      };

How do I close the tags?

[UziTech]

A renderer only has a single token for information and the tokens don't know about siblings. I can see three ways you could do this.

1. Output HTML with marked than add sections by searching for <h and </p>.
2. Updating heading tokenizers to include text below it in the token so you can render them together.
3. Handle this in client side JavaScript by querying and updating the dom.

Which method is the best depends on what the actual input looks like and if it is controlled by you or is user input.

[avinal]

Thanks Tony, I did something that feels almost illegal to do. I observed that if I don't provide closing tags, then somehow the necessary closing tags are automatically added. I know for sure that nothing else can appear between the two sections. So I wrote logic to add closing tags in between sections and left the last one to be auto-completed. Here is my code:

var numberOfHeadings = 0;
renderer.heading = (text, level) => {
  if (level === 1) {
    return `<h${level}>${text}</h${level}>`;
  }
  const escapedText = text
    .trim()
    .toLowerCase()
    .replace(/[^\w]+/g, "-");
  const endSection = `</div></section>`;
  const sectionContent = `
<section aria-labelledby="${escapedText}">
<h${level} id="${escapedText}">
  <a title="Permalink to ${text}" href="#${escapedText}">
    ${text}
  </a>
</h${level}>
<div class="section-content">`;
  toc += `<li class="document-toc-item"><a class="document-toc-link" href="#${escapedText}">${text}</a></li>`;
  if (numberOfHeadings === 0) {
    numberOfHeadings++;
    return sectionContent;
  } else {
    return endSection + sectionContent;
  }
};

I am curious about the second option though. Can you please put some code about that? I searched and couldn't find enough information on how to do that.

[UziTech]

Here is some code to create a custom extension:
(p.s. this code might not handle weird edge cases)

import { marked, Slugger } from 'marked';
const slugger = new Slugger();

const section = {
  name: 'section',
  level: 'block',
  start(src) { return src.indexOf('\n#'); },
  tokenizer(src, tokens) {
    // always anchor to the start of `src` with `^` so you don't find matches in the middle of the markdown
    const match = src.match(/^(#{1,6}) (.+?)\n([\s\S]+?(?:\n|$))(?=#|$)/);
    if (match) {
      console.log(match);
      return {
        type: 'section',
        raw: match[0],
        heading: {
          text: match[2],
          level: match[1].length,
          tokens: this.lexer.inline(match[2])
        },
        tokens: this.lexer.blockTokens(match[3])
      };
    }
  },
  renderer(token) {
    console.log(token);
    const slug = slugger.slug(token.heading.text);
    return `
<section aria-labelledby="${slug}">
  <h${token.heading.level} id="${slug}">
    <a href="#${slug}">${this.parser.parseInline(token.heading.tokens)}</a>
  </h${token.heading.level}>
  <div class="section-content">
    ${this.parser.parse(token.tokens)}
  </div>
</section>
`;
  }
};

marked.use({ extensions: [section] });

console.log(marked.parse(`
## This is a *level 2*  heading

This is some **text**.
More lines.

End Line
`));

[avinal]

Thank you that helps. Meanwhile, I would like to improve the documentation to include more details about the APIs.