[Question] Any plans of supporting more HTML tags?

[ghost]

The most interesting feature in HackMD that intrigues me, is the partial support of HTML. You can insert a line of HTML in the document directly to implement some features that markdown does not provide.

So the question is, how many HTML tags can be used in HackMD directly? And for the tags that are not supported, are there any plans of supporting them?

For example, I can easily insert an audio/video/iframe element, but SVG/Canvas elements will be treated as text. And then I try the ruby tag:

<ruby>兎<rt>うさぎ</rt></ruby>

Well it can be handled in Github Markup: 兎うさぎ, but in HackMD it will be treated as text, too. So this issue is also a feature request issue. 😂

[SISheogorath]

We currently use a library to prevent XSS attacks. Which is the reason why this is not shown.

Right now there are no plans in changing the library or extending this file: https://github.com/hackmdio/hackmd/blob/master/public/js/render.js

But maybe you can point us to a good reason to do so. 😄

[jackycute]

Hi @aka-rin Thanks for giving us requests!

As @SISheogorath said, we filtered the HTML tags to prevent XSS attacks. We would like to cover all HTML tags but unfortunately there are too many details about them, so we could only review and add as user requests. Includes the tags and related attributes will need to be reviewed before whitelist them.

The ruby tags actually makes sense! Please provide detail usage and all the tags you like to request for adding and we'll see.

Thanks! 😃

[ghost]

Well I'm just a little curious because it reminds me of the sweet memory with Kramdown in Jekyll...

The ruby tags maybe useful for Japanese learners, but another markdown syntax for this feature is also acceptable. SVG and Canvas tags maybe used in showcases by web designers, but iframe or embed tag may be a better choice in that case. 😂

In Jekyll you can insert any kinds of HTML tags in a markdown post, but the most thrilling feature in Jekyll (Kramdown) is the Attribute List Syntax. This syntax feature is easy-to-use, extensible and hackable. You can even write a filter script to convert the specific elements to whatever you want, which make this syntax to something like 'feature generator'. For example, the Alert Area syntax can be changed to this:

Watch out :zap:
{:.warning}

I know these features may be impractical for a web service, but to be honest, the current syntax in hackmd is a bit messy and hard to remember. Anyway, thanks for the replies. 😂

[SISheogorath]

Canvas and similar features are better placed in iframes, yes, not only because they are very evil, but also because we don't allow to embed JS directly, which makes the usage of these features almost impossible.

We also have to notice that there is a big difference between Jekyll and HackMD as Jekyll is a blogging software which only allows the owner and/or explicitly authorized people edit the page, while HackMD is made for user generated content which means you have to take care about a lot of things to make it a secure platform. Supporting iframes is already a big problem from a security perspective but not avoidable.

We with the CSP Pull Request we will probably make it possible to restrict the iframes even more.

But back to topic: When you can make a short list of HTML tags you want to see/use, we can probably check them out provide them :smile:

[ghost]

So back to the topic... 😂

Well, html tags support is not the matter. I mean, if these features have alternative syntax in hackmd, then no security or feature problems any more. I check up the full list of HTML tags in HTML5 standard and here are some suggestions:

1. SVG and Canvas support

There are many ways to load SVG in HTML, but the most convenient one is SVG as an Image:

![SVG Logo](https://www.w3.org/Graphics/SVG/svglogo.svg)

Since most browsers support this method, SVG is not a problem. And as to Canvas, if the content is static it can be converted to SVG. For Canvas animations and more, iframe is a better choice (well it has some security issues too). So Canvas is not a problem, too.

2. Other new tags in HTML 5

2.1 Progress bar and meter element

Well, this feature is a little interesting...

<progress value="22" max="100"></progress> 
<meter value="0.6">60%</meter>

Since these two tags are quite similar, I think the only support of progress tag is enough.

2.2 Ruby Annotations

As I mentioned above:

<ruby>漢<rt>ㄏㄢˋ</rt></ruby>

And the result: 漢ㄏㄢˋ.

2.3 Foldable Blocks

This feature is a bit interesting too, although it only works in Chrome/Webkit:

<details><summary>Hackmd</summary>https://hackmd.io</details>

And the result:

Hackmd

https://hackmd.io

---

It reminds me of a foldable block demo that without js.

2.4 Advanced Image Composition

HTML5 provides the <figure> tag to let you composite your images, captions and more in a block. Although it's not a necessary feature, it's still worth thinking about the composition with photos. In my opinion, the design in Dropbox Paper is quite elegant:

Well just my two cents... 😂

[SISheogorath]

Hint to your first request:

We already have SVG support if you host the picture yourself.

With #691 we also provide support for SVGs as long as you don't use imgur as backend.

Hope this already makes you a bit happy ;)

[SISheogorath]

@aka-rin please check #740 :)

[SISheogorath]

https://hackmd-ce.herokuapp.com/MwFgnAbMwOwKwFoAmAzADCBIIENMCMBTAJhQThXxzQA4VCYccIg=#

[ghost]

Sorry, I haven't checked my mailbox since my vacation started... 😂

Thanks for your work. At least I can start learning Japanese now :)

But maybe they are still a bit primitive(for me). For example, you can have a glance at <details> tag in mkdocs-material.

Anyway, it's better to know that this issue is in process than just leave it there and wait for human's forgetfulness... But a further improvement would be better 😂