How to support some functions as markdown-it?

[hoboy0313]

Hello! thank you for micromark，i love it so much !!! 🎉

but i have some problems and i have no better idea to elegant approach to solve its.

Partial HTML Tag Parser.

In some cases, i hope to recognize part of the html tag. For example, in some AI scenarios, it is expected to allow a <br /> line feed to be returned. However, it appears that only the 'allowDangerousHtml' option is currently available.

URL Recognize.

Like markdown-it, it supports identifying urls by default, not via the []() format, how can I implement this more elegantly?

End Note

I like micromark so much and I look forward to bringing it to our company and letting more people know about it. In addition, I look forward to being a future contributor to the micromark ecosystem ~ 🎉🎉🎉🎉

From an Oriental friend with poor English

[wooorm]

Hi there!

However, it appears that only the 'allowDangerousHtml' option is currently available.

allowDangerousHtml is available; I do not understand what you mean that it is not?

not via the []() format

It should work, I have no clue what you mean? Links are supported in micromark.

[hoboy0313]

Wooooo，I got a response from the dalao!!! exciting!! hhhh.

First, I want some html tags is availabled.

For example

import {micromark} from 'micromark';
import {tagHtml} from 'micromark-extension-tag-html'

// Expect: `<br />&lg;i&gt;`;
const result = micromark(`<br /><i />`, 'utf-8', {
    allowDangerousHtml: true,
    htmlExtension: [tagHtml({
        allowTag: ['br'],
    })],
})

so, I don't know if such extensions exist ? emm.
I saw an extension called 'micromark-extension-gfm-tagfilter', the internal logic is the opposite of mine, I'm not sure if my fork development is an elegant solution.

Second, autolink

In markdown-it, url-string can be parsed.

For example.

import markdownit from 'markdown-it';
const md = markdownit();
const result = md.render('www.google.com'); // it can be parsed.

so, What can I do to support it more gracefully in micromark?

import {micromark} from 'micromark';

const result = micromark('www.google.com'); // <a href="www.google.com">www.google.com</a>

[JounQin]

You may use remark, remark-gfm, remark-rehype with rehype-raw instead.

[hoboy0313]

You may use remark, remark-gfm, remark-rehype with rehype-raw instead.

Yeah, it's a good idea~

but, I chose it because it's lower level and more performant. I could develop a series of extensions by myself, but I'm not sure if it's more elegant to implement them all myself.

So, Does the author suggest using remark instead of micromark? 😊😊😊

[wooorm]

micromark is indeed lower level. But you want some higher level things: the remark/rehype level is where all the extensions are!

For your first Q, which is allowing/disallowing some HTML, you can:
a) move up a level, https://github.com/syntax-tree/mdast-util-from-markdown, https://github.com/syntax-tree/mdast-util-to-hast, https://github.com/syntax-tree/hast-util-raw, https://github.com/syntax-tree/hast-util-sanitize
b) move up to plugins, use unified + remark + rehype, specifically https://github.com/rehypejs/rehype-sanitize
c) use a single tool that does all that: micromark + some HTML sanitizer of your choosing

For the second Q, what you call “autolink”: that behavior is not “standard”, as in, CommonMark. It is a common extension that is part of GFM: https://github.com/micromark/micromark-extension-gfm-autolink-literal

[hoboy0313]

Thanks so much~ i will try there ways ~ love u.

[hoboy0313]

Hey, i'm come back bro. 🤪

Thanks for suggestions, and i get another problem.

i hope to recognize custom-link-protocol in autolink, like this

bank://www.google.com

What could I have done better? 3q~

[JounQin]

You'll need write your own extension, it could be based on https://github.com/micromark/micromark-extension-gfm-autolink-literal/blob/618170c86639742036ecf666d975a6ebac5aac50/dev/lib/syntax.js#L320-L365

[hoboy0313]

You'll need write your own extension, it could be based on https://github.com/micromark/micromark-extension-gfm-autolink-literal/blob/618170c86639742036ecf666d975a6ebac5aac50/dev/lib/syntax.js#L320-L365

ok~ 3q, let me try it.

[hoboy0313]

I found some differences between remark and micromark when I tried to use remark.

Q: The html string is gone.

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

import {micromark} from 'micromark';

const markdown = `# Difference.
<p style="color: red;">dom</p>`;

const result = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown)
  .then((file) => {
    console.log('\nremark:', String(file));
  });


console.log('\nmicromark:', micromark(markdown, 'utf-8'));

micromark: <h1>Difference.</h1>
&lt;p style=&quot;color: red;&quot;&gt;dom&lt;/p&gt;

remark: <h1>Difference.</h1>

micromark is right, but remark is confusing.

I tried to open the allowDangarousHtml，as well as trying to use a lot of plugins that are not supported. What should be done in remark？

😭

[wooorm]

Please see the docs of the tools you use, specifically, remark-rehype has a whole example section on this: https://github.com/remarkjs/remark-rehype#example-supporting-html-in-markdown-naïvely