What can remark actually do / how to display videos in markdown?

[katerlouis]

I'm making a NuxtJS application using @nuxt/content, which uses remark as its markdown parser. I ran a setup with markdown-it before and found a plugin to teach markdown to display embed youtube videos. Cool. That time's over now, though :D – Gotta make this happen with remark!

This repos main readme says:

Internally, remark now uses micromark, a new, fast, and tiny CommonMark compliant Markdown tokenizer. It can be GFM compliant with remark-gfm.

I mean, I have no idea what this means :D
While I can guess what "CommonMark compliant" refers to, I don't know what a tokenizer is.
Googling micromark lead me to this awesome company :D

I've got a plugin for fenced divs, remark-containers, already up and running. Great, so there's probably a plugin for video, right? But the plugin directory doesn't show any plugin for videos. So video display must be baked in already, right? But I find no information on how to do this.

There is a huuuuge discussion spanning over several years about CommonMark and video display. But it is still ongoing and I guess therefore not implemented yet?

The CommonMark website itself also doesn't seem to offer documentation or examples on what CommonMark actually can do. The Specs website is literally beyond my understanding.

You see: there is so much information and clues to follow that kinda lead nowhere for a newbie to all of this.
I hope no one is offended by this little experience report. Call me dumb, but for me it is very frustrating to use remark at this point.
Maybe all you pros weren't aware that it's really difficult to dive into this. Well now you know, atleast for me it is.

TL;DR
what remark (or CommonMark) can do is a huge black-box for me and I would appreciate if somebody could press my nose on some clear documentation and if somebody could tell me how to embed both self-hosted mp4 and youtube videos.

Thanks!

[ChristianMurphy]

found a plugin to teach markdown to display embed youtube videos

Sounds like: https://github.com/agentofuser/remark-oembed (which is in the list of plugins https://github.com/remarkjs/remark/blob/main/doc/plugins.md)

So it must be baked in already, right? But I find no information on how to display videos using remark.

It is not a part of markdown, commonmark, or gfm.
It can be added through a plugin/extension, but is not a part of the language.
directives https://github.com/remarkjs/remark-directive and JSX https://github.com/mdx-js/mdx are two common ways of extending the content types in markdown.

The CommonMark website itself also doesn't seem to offer documentation or examples on what CommonMark actually can do.

Oh?
The reverse may be said, the site goes into excruciating detail with examples https://spec.commonmark.org/0.29/

[katerlouis]

Holy moly. That was a fast reply. I was still editing my messy english :D

Yeah, technically you're right.

The reverse may be said, the site goes into excruciating detail with examples https://spec.commonmark.org/0.29/
Well, technically you're surely right. But isn't that just like terms of conditions? Who reads that? Who can and who got the time :D

the oembed plugin looks promising. And if I took the time to read all the plugins, I could've find it. But I argue most devs do CMD + F followed by vid and see "0 results" and leave after a quick scrolldown.

The reason I didn't look for "embed" is that I also want to display self hosted video files via <video>-tag.
How would you suggest I teach remark that? (I don't understand what remark-directive aims to do :F, sorry)

Again: thanks for the quick reply

[ChristianMurphy]

How would you suggest I teach remark that?

Unified generally works with syntax trees https://unifiedjs.com/learn has a good guide on what syntax trees and how to create plugins to transform the syntax trees.
https://astexplorer.net/#/gist/6e67416aa44bd7b98e8175d5fe8171d1/34f013315b17d79f987e94f02630d506f6c8e454 offers a good way to look at what the markdown syntax tree looks like.

I also want to display self hosted video files

Markdown also supports inline HTML, if you wanted <video src="https://example.com/video.mp4"> would work.
Directives and JSX are different flavors of the same idea, it depends on what you want the syntax to look like.

[wooorm]

@katerlouis It sounds like you‘re still in the process of figuring out what your question is: http://xyproblem.info. Maybe talk to a rubber duck for a bit to ask a clearer questions, so that we can provide a useful answer?