Tools: Resize images in markdown

[codeallthethingz]

This PR adds the functionality to add style attributes to images by using the fragment part of a markdown image URL.

For example

![](image.png#width=20px&height=20px)

Will result in

<img src="image.png" style="width:20px; height:20px" />

[tristanls]

issue As we are adding a fragment to the URL, I think it should follow the usual URL convention of key=value&key=value, instead of key:value. This way, it can be easily parsed by a library like urllib.parse.parse_qs.

[tristanls]

Thank you for the fragment format update 🙌 .

[tristanls]

suggestion (non-blocking): I think it should be called X here.

[tristanls]

issue (blocking): I would like to see two things that reinforce each other: a sanitization library and an allowlist of supported keys.

Please look at the nh3 sanitization library to sanitize input: https://nh3.readthedocs.io/en/latest/#. I don't want us to maintain our own sanitization code. I would rather rely on the expertise of people who care about this sort of thing.

After the CSS keys are extracted, they should be checked against an allowlist of keys, in this case, consisting of a single one: width. However, I noticed height in the tests. Whatever the list, I think we should enumerate an allowlist to vastly reduce what can be put into the HTML.

One way to accomplish the above would be to first filter key, values for the allowlist of keys, i.e., width. Then, second, naively and unsafely construct the final HTML <figure><img... and then put the final HTML through the nh3.clean() before returning it.