Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to parse <dl>...</dl> back to markdown #80

Closed
c-smile opened this issue Mar 4, 2023 · 4 comments
Closed

How to parse <dl>...</dl> back to markdown #80

c-smile opened this issue Mar 4, 2023 · 4 comments

Comments

@c-smile
Copy link

c-smile commented Mar 4, 2023

Not an issue but rather question...

I have function md2html(md) below that produces <dl>...</dl> successfully .
But opposite function html2md(html) does not understand <dl>...</dl> as input:

import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
import { unified } from 'unified';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkDirective from 'remark-directive';
import remarkRehype from 'remark-rehype';
import remarkStringify from 'remark-stringify';

import rehypeRemark from 'rehype-remark';
import rehypeStringify from 'rehype-stringify';
import rehypeParse from 'rehype-parse';

export async function md2html(md) {
  return unified()
    .use(remarkParse)
    .use(remarkGfm)    
    .use(remarkDirective)
    .use(remarkDefinitionList)
    .use(remarkRehype, {
      handlers: { ...defListHastHandlers }
    })
    .use(rehypeStringify)
    .process(md);
}

export async function html2md(html) {
  return unified()
    .use(rehypeParse)
    .use(rehypeRemark)
    .use(remarkGfm)
    .use(remarkDirective)
    .use(remarkDefinitionList)
    .use(remarkStringify)
    .process(html);
}

seems like I need one more piece to this...

@wataru-chocola
Copy link
Owner

Presumably we need hast-util-to-mdast extension to convert html to md, as suggested in #59.

I've wanted to make time to create an extension.
Hopefully, I'll try this week.

@c-smile
Copy link
Author

c-smile commented Mar 8, 2023

That would be really great and make DL handling complete in rehype/remark system.

@wataru-chocola
Copy link
Owner

I've just release hast-util-definition-list, which provides the way to convert hast into mdast.
You can now parse <dl> html using this new package like this:

import { defListToMarkdown } from "mdast-util-definition-list";
import { fromHtml as hastFromHtml } from "hast-util-from-html";
import { toMarkdown as mdastToMarkdown } from "mdast-util-to-markdown";
import { toMdast as hastToMdast } from "hast-util-to-mdast";
import { defListHastToMdast } from "hast-util-definition-list";

const html = `
<dl>
<dt>First Term</dt>
<dd>This is the <strong>definition</strong> of the first term.</dd>
<dd>This is another definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term.</dd>
<dd>This is another definition of the second term.</dd>
</dl>
`;

const hast = hastFromHtml(html, { fragment: true });
const mdast = hastToMdast(hast, {
  handlers: {
    ...defListHastToMdast,
  },
});
const md = mdastToMarkdown(mdast, {
  extensions: [defListToMarkdown],
});
console.log(md);

Bad news: you possibly cannot use this together with rehype-remark at the moment.

hast-util-definition-list depends on the latest version of hast-util-to-mdast, but rehype-remark hasn't upgraded to use it yet as mentioned in this pr.
As soon as rehype-remark upgrade, I'll release a new remark-definition-list containing hast-util-definition-list.

@wataru-chocola
Copy link
Owner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants