search

denoland / dotland

[Archived] deno.land website
https://deno.land
MIT License
957 stars 626 forks source link

Restore inline display of Markdown images #2040

Closed kidonng closed 2 years ago

kidonng commented 2 years ago

Fix #2038 Test: https://dotland-fresh-ggcxpmcsd6tg.deno.dev/x/cronnor@v1.3.0/README.md

I'm not sure but probably there are more issues caused by CSS reset 🤷

crowlKats commented 2 years ago

Shouldnt this rather be part of gfm?

kidonng commented 2 years ago

Shouldnt this rather be part of gfm?

I think deno-gfm is general purpose and should not assume other projects are using CSS resets as well.

Take a look at GitHub's style, they don't override display of <img> as well:

https://github.com/sindresorhus/github-markdown-css/blob/afa572390de862d4bb1cf7ca0c0d4ecf2373ced9/github-markdown.css#L202-L207

Or look at how Tailwind deal with it: they provide a @tailwindcss/typography plugin which you have to explicitly opt-in.

kt3k commented 2 years ago

twind seems setting dispaly: block for img by default. ref: https://github.com/tw-in-js/twind/blob/851160d9895fb2e11d6e6a9911017a5d33c8d348/src/twind/preflight.ts#L246

and we include these settings here: https://github.com/denoland/dotland/blob/a53e5cb029681cb6ae48524fda543b11313f5ff1/pages/_render.ts#L56

these styles are visible, embedded in <style id="__FRSH_STYLE"> tag in html

kidonng commented 2 years ago

twind seems setting dispaly: block for img by default. ref: https://github.com/tw-in-js/twind/blob/851160d9895fb2e11d6e6a9911017a5d33c8d348/src/twind/preflight.ts#L246

Right, that's what I mean by "CSS reset".

kt3k commented 2 years ago

Ah, ok.

BTW I did some research about reseting <img> in this way.

normalize.css and modern-normalize don't do this reset, but tailwind (and therefore twind) does this https://github.com/tailwindlabs/tailwindcss/blob/f980ca4ca4a74eb39dc1f17f67373f117e2b1052/src/css/preflight.css#L339-L347

This practice seems to have started in the discussion in CSS remedy https://github.com/jensimmons/cssremedy/issues/14

kidonng commented 2 years ago

Thanks for the info, that's something new to me.

Block images by default are fine, but this is user content we can't control (hence the .markdown-body prerequisite), they should behave normally and just like e.g. GitHub's rendering.