search

webpack-contrib / remark-loader

Load markdown through remark with image resolving and some react-specific features.
MIT License
18 stars 11 forks source link

Potentially use remark-rehype, rehype-raw #1

Closed wooorm closed 5 years ago

wooorm commented 7 years ago

Markdown comes with a weird feature: HTML. You can add HTML everywhere to “break out” of markdown. It’s basically a black box where remark, or any other markdown parser, doesn’t know what to do.

You could use remark-rehype and rehype-raw to properly handle HTML in markdown, and then later use rehype-stringify (for HTML) or rehype-react (for React) to get the proper output!

Also check out the site for the main project: unified.

And feel free to ask me questions!

Cheers, Titus

skipjack commented 7 years ago

Awesome, thank you! Surprised you found me first 😆 because my next goal was to get in contact with you and the author of remark-react. I will look into those things and keep digging into the remark/rehype/retext/unified suite. Thanks for all your work on this by the way, the tools you've built seem to be the most well thought out and modularized I've found for markdown parsing / stringification so far. Once I get this to a good place, I think we'll be switching webpack.js.org over to remark (webpack-contrib/webpack-defaults#73).

You could use remark-rehype and rehype-raw to properly handle HTML in markdown, and then later use rehype-stringify (for HTML) or rehype-react (for React) to get the proper output!

So it sounds like my assumption in the README that this could be done a lot cleaner via remark or rehype plugins is correct? Also, the way I'm resolving images right now (via the html-loader) feels a bit hacky as well. I'm thinking I could probably push that to webpack-specific remark plugin maybe?

And feel free to ask me questions!

Definitely will be pinging you soon...

wooorm commented 7 years ago

So it sounds like my assumption in the README that this could be done a lot cleaner via remark or rehype plugins is correct? Also, the way I'm resolving images right now (via the html-loader) feels a bit hacky as well. I'm thinking I could probably push that to webpack-specific remark plugin maybe?

Yes, it’s much cleaner to go to HTML or React through rehype! That provides a very good layer for finding images and other files too (something like rehype-picture?), or minify HTML (using rehype-minify)!

skipjack commented 5 years ago

@wooorm just stumbled on to mdx which seems to be remark based and supports exactly the syntax I was going for. It seems to me, the best direction for this package is to make it a simple "pure remark" alternative to the mdx webpack loader. Then in cases where JSX is needed, we can recommend using the mdx loader instead of this one.

So I think the action items for me are...

Sorry for the delay here, I've had to take a little break from open source for a bit but I'm planning to dig back in soon. Glad to see the remark community is still alive and well!

wooorm commented 5 years ago

Oh don’t worry about that! Yes, mdx is great! But there’s reasons for “just” remark as well.

Todos look good btw 👍

Cheers, Titus

skipjack commented 5 years ago

Knocked out the first two things listed above and pushed a v1 candidate (prerelease). I'll keep giving image resolution thing more thought and try to clean that aspect up in future releases.